小程序生成带信息的二维码

我的需求是,循环生成多个核销码,每个核销码自带字符串信息。注意,是要带信息,而不是单纯的生成二维码,但微信小程序并没有提供相应的生成二维码的接口。

此处提供两种解决方案:

方案一:采用weapp.qrcode库

github地址:GitHub - yingye/weapp-qrcode: weapp.qrcode.js 在 微信小程序 中,快速生成二维码

这种方法也可以,但是只适合生成一个二维码。如果需求是要生成多个二维码,屏幕上下滚动预览,就会产生如下问题:

 看吧,它会遮挡住底部的部分内容,原因是微信原生小程序canvas层级过高,即使你调整z-index,也是没用的。所以weapp.qrcode仅仅适合生成单个二维码的应用场景。

方案二:使用QRCodes.js插件

这个方法的好处是可以避开原生canvas层级过高的问题,单纯的去使用image去替代。

js库地址为:https://files.cnblogs.com/files/RVon/QRCodes.js

1.将QRCode.js放入utils文件夹中:

 2.在js文件的最后可以看到向外提供了一个createQrCodeImg方法 这就是生成二维码的方法:

module.exports = {
  createQrCodeImg: createQrCodeImg
};

3.在相应page的js文件中引用QRCode.js:

var QR = require(\'../../utils/QRCode\')

4.在方法中调用QR.createQrCodeImg()方法:

 var imgData = QR.createQrCodeImg(\'123\')

这里的imgData即为生成的二维码 为base64格式  可以直接放入img中进行使用

效果如下图:

 

这个需求折腾了我大半天的时间,最后其实做起来发现也很简单。如果帮到了您,动动小手指给我点个小小的赞吧~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值