需求
需求:可以支持自定义信息再生成二维码的需求
调用网络提供接口
1、jquery-qrcode.js
在PC端对应的功能我们是利用jquery-qrcode.js来实现的,但是在小程序里不支持操作dom,所以这个插件就用不了啦
2、qrcode.js
这个用在web网页开发可以,微信小程序不建议用这个
3、weapp-qrcode.js
微信小程序推荐用这个接口
weapp-qrcode.js操作步骤
-
下载weapp-qrcode.js接口软件包
https://codechina.csdn.net/mirrors/dillonlfy/weapp-qrcode?utm_source=csdn_github_accelerator
-
在小程序中引入weapp-qrcode.js,可以放在主目录下和app.js同目录,建议创建一个utils目录,放在这个下面
-
在需要用二维码的js页面引入weapp-qrcode.js
var QRCode=require("../../utils/weapp-qrcode.js")
-
wxml利用canvas画布画二维码
<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>
-
js页面写canvas绑定函数,调用new QRCode画二维码
var qrcode = new QRCode('canvas', { //这个canvas是wxml页面定义的canvas-id='canvas' text: "123456", width: 150, height: 150, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, });
-
实现效果,canavs,binglangtap长按触发生成二维码