微信小程序动态生成二维码的实现代码

效果图如下：

实现

页面结构

！-存放二维码的图片-view class=' container ' image bind tap=' previewImg ' mode=' scaleToFill ' src=' http : { { imagePath } } '/image/view！-画布，用来画二维码，只用来站位，不用来显示-view class=' canvasHidden-box ' canvasHidden=' { { canvasHidden } } ' style=' width : 686 rpx；高度： 686rpx背景# f1 f1 f1 ' canvas-id=' my canvas '/view XSS。容器{ display : flex align-items :居中；正义-内容：中心；宽度： 100%;高度： 100%;}.容器图像{ width : 686 rpx h8 : 686 rpx背景-color : # F9 F9；}.帆布箱{位置：固定；top : 999999 rpxleft : 0；}js

var QR=require('./././lib/二维码。js’)；页面({ /** *页面的初始数据*/data : { canvashidden : false，imagePath: ' '，}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){//选项为上个页面传递过来的参数定义变量焦艳码='对不起，焦艳码是亏损的；if(options){ jiaoyanCode=options。焦延码；} console.log(焦彦码);var size=这个。setclassize()；//动态设置画布大小this.createQrCode(焦彦码，' mycanvas '，size.w，size。h)；}, //适配不同屏幕大小的画布集画布集：函数(){ var size={ }；请尝试{ var RES=wx。getsysteminfosync()；定义变量标度=750/686;//不同屏幕下帆布的适配比例；设计稿是750宽686是因为样式页面样式表文件中设置的大小var width=RES . WiNDOW宽度/比例；可变高度=宽度；//画布画布为正方形size.w=宽度；size.h=高度；} catch(e){//catch错误控制台。日志('时执行一些操作获取设备信息失败e)；}返回大小；}, /** * 绘制二维码图片*/createQrCode:函数(url、canvasId、cavW、cavH) { //调用插件中的画方法，绘制二维码图片QR.api.draw(url、canvasId、cavW、CavH)；setTimeout(()={ this。canvastotempimage()；}, 1000);}, /** * 获取临时缓存照片路径，存入数据中*/canvasToTempImage:函数(){ var=this//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径wx。canvasotemfilepath({ canvasid : ' my canvas '，success : function(RES){ var tempFilePath=RES . tempFilePath；控制台。日志(临时文件路径)；那个。setdata({ image path : tempfile path，//canvashidden : true })；}，fail:函数(RES){控制台。日志(RES)；} });}, /** * 点击图片进行预览*/previewmg :函数{ var img=this。数据。imagepath控制台。日志(img)；wx。previewimage({ current 3360 img，//当前显示图片的超文本传送协议(超文本传输协议的缩写)链接urls: [img] //需要预览的图片超文本传送协议(超文本传输协议的缩写)链接列表});},})二维码。射流研究…可以去这里下载。

详细源码请查看https://github.com/demi520/wxapp-qrcode

总结

以上所述是小编给大家介绍的微信小程序动态生成二维码的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！