在设计微信二维码分享时,第一感觉是从个人信息导出后直接img链接过去,但细想总感觉并非完美的方案。

首先,导出的二维码样式虽然可以选择背景图、颜色,但选择范围依然有限,无法 DIY;其次,微信的二维码和支付宝的二维码显然无法统一,在页面的视觉呈现上,也就有些突兀;第三,以图片的方式引用,需要额外增加一个图片的请求,显然也不划算。

一番考量之下,决定研究动态生成二维码的方式。

考虑到大部分二维码本质上是一个URL,因此获取到二维码的 URL 便可解决问题。一种方式是直接利用网上的解码器进行解码;另一种方式有些投机取巧,也是本文所用的方式。

一次意外的扫码发现微信不支持支付宝二维码的扫码,而且扫码的结果显示的正是二维码所代表的URL。于是正好可以利用此特点获取到双方的 URL,而最后的验证也证实支付宝同样不支持微信二维码。

利用各自的 App 互扫对方二维码获取到URL之后,便可通过 qrcode 等插件实时生成二维码了。而此插件支持自定义二维码大小、颜色等等,完美解决上述的问题。兼容性上,对于不支持 canvas 的浏览器将降级使用 table 方式,也可显式配置生成方式。