“工程诗”人：从微信公众号源代码中学如何在console中进行图文展示，附代码

??一个偶然的机会，看到微信的前端工程师，“公开”地在console中“诗发了一下”感概：“愿大家出走半生，归来仍是少年”，并配上一张“纪念意义”的团队合照。

?

?照片放大后是这样的。

?那么如何在console中进行图文展示？代码是如何实现的呢？

代码如下：

  1. {
  2. var n = t("./src/mmbizweb-web2-common/modules/utils/contributors.js").sort(function (e, r)
  3. {
  4. return e.localeCompare(r)
  5. }
  6. ).join(", ");
  7. window.PAGE_MID && window.PAGE_MID.indexOf("loginpage") < 0 && !window.thanksToContributor && (console.info("%c 感谢大家为微信公众号做出的卓越贡献", "background: url(https://res.wx.qq.com/mpres/zh_CN/htmledition/weui-desktopSkin-common/svg/buildless/new_bg_logo_primary.svg) no-repeat; padding: 10px 130px 10px 130px; font-family: helvetica; font-size: 20px;
  8. line-height: 12px;"), console.info("%c Contributors: ".concat(n), "font-family: consolas; font-size: 10px;"), console.info("%c ", "background: url(https://mmbiz.qlogo.cn/mmbiz_png/aOncaiaP23TAeVMJdplptU1Tv7sKs8WcuU7icS1UMXGialyr2I8qRiakTeiaLxlQjx64OWZohASfThklfOL76phQz5A/0?wx_fmt=png) no-repeat; background-size: 160px 100px; padding: 50px 80px"), console.info("%c 愿大家出走半生，归来仍是少年", "font-family: helvetica; font-size: 8px; text-align: right;"), window.thanksToContributor = !0)
  9. }

供有需要者参阅

批量网页截图

相关

标签