当前位置: 首页 → 爱前端 → 

JavaScript

自定义微信、支付宝二维码

 

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

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

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

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

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

支付宝二维码:

支付宝二维码

微信二维码:

微信二维码

微信收款/支付二维码:

微信支付二维码

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

生成效果如下图:

打赏二维码

亦可通过本文下方“分享”和“打赏”进行体验。

🔚
 

*

*

*

*