效果图如下:
实现
<强> wxml 强>
& lt; !——存放二维码的图片——比; & lt;视图类=叭萜鳌北? & lt;图像bindtap=皃reviewImg”模式=" scaleToFill " src=" https://www.yisu.com/zixun/{{imagePath}}”祝辞& lt;/image> & lt;/view> & lt; !——画布,用来画二维码,只用来站位,不用来显示——比; & lt;视图类=癱anvas-box”比; & lt;帆布隐藏=" {{canvasHidden}}”canvas-id=" mycanvas "/比; & lt;/view>
<强> wxs 强>
.container { 显示:flex; 对齐项目:中心; justify-content:中心; 宽度:100%; 高度:100%; } {.container形象 宽度:686 rpx; 身高:686 rpx; background - color: # f9f9f9; } .canvas-box { 位置:固定; 最高:999999 rpx; 左:0; }js
var QR=要求(“. ./. ./. ./lib/qrcode.js”); 页面({/* * *页面的初始数据 */数据:{ canvasHidden:假的, imagePath:”, },/* * *生命周期函数——监听页面加载 */onLoad:功能(选项){//选项为上个页面传递过来的参数 var jiaoyanCode=岸圆黄?jiaoyanCode损失”; 如果(选项){ jiaoyanCode=options.jiaoyanCode; } console.log (jiaoyanCode); var=this.setCanvasSize大小();//动态设置画布大小 这一点。createQrCode (jiaoyanCode“mycanvas”,大小。w, size.h); },//适配不同屏幕大小的画布 setCanvasSize:函数(){ var大?{}; 尝试{ var res=wx.getSystemInfoSync (); var=750/686规模;//不同屏幕下画布的适配比例;设计稿是750宽686是因为样式wxs文件中设置的大小 var宽度=res.windowWidth/规模; var高度=宽度;//帆布画布为正方形 大小。w=宽度; 大小。h=身高; }捕捉(e) {//当捕获错误做些什么 控制台。日志(“获取设备信息失败”+ e); } 返回大小; },/* * *绘制二维码图片 */createQrCode:函数(url、canvasId cavW cavH) {//调用插件中的画方法,绘制二维码图片 QR.api。画(url、canvasId cavW cavH); setTimeout(()=比;{ this.canvasToTempImage (); }, 1000); },/* * *获取临时缓存照片路径,存入数据中 */canvasToTempImage:函数(){ var=这个;//把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。 wx.canvasToTempFilePath ({ canvasId:“mycanvas”, 成功:函数(res) { var tempFilePath=res.tempFilePath; console.log (tempFilePath); that.setData ({ imagePath: tempFilePath,//canvasHidden:没错 }); }, 失败:函数(res) { console.log (res); } }); },/* * *点击图片进行预览 */previewImg:函数(e) { var img=this.data.imagePath; console.log (img); wx.previewImage ({ 当前:img//当前显示图片的http链接 url: [img]//需要预览的图片http链接列表 }); }, })
qrcode。js可以去这里下载。
详细源码请查看https://github.com/demi520/wxapp-qrcode
以上所述是小编给大家介绍的微信小程序动态生成二维码的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!