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

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

此处提供两种解决方案：

方案一：采用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中进行使用

效果如下图:

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

小程序生成带信息的二维码相关推荐

微信小程序生成带参数的二维码
微信小程序生成带参数的二维码 //写一个图片来写路径,好让二维码显示出来 <image style="width:500rpx;height:500rpx;" src=&qu ...
微信小程序生成带参数的二维码以及小程序码
微信小程序生成带参数的二维码官方共给了三个接口调用,大家可以根据自己的实际情况来使用,我这里使用的是接口B和接口C. 官方文档地址业务需求: 扫描二维码进入指定商品页面,需要的参数为商品id(go ...
微信小程序生成带动态参数二维码
首先说一下我的使用场景,用户可根据id生成这一条记录的二维码,其他人扫码直接跳转到小程序,显示这条记录的具体信息. 分两步:第一在微信公众号后台配置,第二利用canvas前端实现二维码展示,并接收参数 ...
小程序生成带参数的二维码
public function auth(){//传的参数$puid = input('uid');$appid = '你的appid';$secret = '你的secret ';$url =&qu ...
微信小程序生成携带参数的二维码
当对需求的时候发现要完成一个永久二维码直接进入微信小程序的对应页面+对应IID参数不要慌这篇文章解决满足生成需要微信官方提供生成微信二维码可满足大部分功能 https://develope ...
微信小程序生成canvas-2d类型的二维码
canvas画布.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护. 在目前版本中,如果使用旧canvas,开发者工具也会提示切换为ca ...
微信小程序生成普通网页的二维码
首先在github上下载/utils/weapp-qrcode.js文件,或者将weapp-qrcode.js文件中的内容复制粘贴到自己的utils的js文件中. wxml页面 <canvas ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...

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

小程序生成带信息的二维码相关推荐

最新文章

热门文章