微信小程序转二维码-微信小程序动态生成二维码实现-小程序二维码-即速应用

微信小程序转二维码-微信小程序动态生成二维码实现-小程序二维码

浏览量：1636 时间：2020-03-20 来源：尤腻腻小厨房

实现效果如下：
1.
代码实现
2.wxml:
!--存放二维码的图片--viewclass='container'imagebindtap="previewImg"mode="scaleToFill"src="{{imagePath}}"/image/view!--画布，用来画二维码，只用来站位，不用来显示--viewclass="canvas-box"canvashidden="{{canvasHidden}}"style="width:686rpx;height:686rpx;background:#f1f1f1;"canvas-id="mycanvas"//view
3.wxss:
.container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.containerimage{width:686rpx;height:686rpx;background-color:#f9f9f9;}.canvas-box{position:fixed;top:999999rpx;left:0;}
4.js:
varQR=require("../../../lib/qrcode.js");Page({/***页面的初始数据*/data:{canvasHidden:false,imagePath:'',},/***生命周期函数--监听页面加载*/onLoad:function(options){//option为上个页面传递过来的参数varjiaoyanCode='sorry,jiaoyanCodeisloss';if(options){jiaoyanCode=options.jiaoyanCode;}console.log(jiaoyanCode);varsize=this.setCanvasSize();//动态设置画布大小this.createQrCode(jiaoyanCode,"mycanvas",size.w,size.h);},//适配不同屏幕大小的canvassetCanvasSize:function(){varsize={};try{varres=wx.getSystemInfoSync();varscale=750/686;//不同屏幕下canvas的适配比例；设计稿是750宽686是因为样式wxss文件中设置的大小varwidth=res.windowWidth/scale;varheight=width;//canvas画布为正方形size.w=width;size.h=height;}catch(e){//Dosomethingwhencatcherrorconsole.log("获取设备信息失败"+e);}returnsize;},/***绘制二维码图片*/createQrCode:function(url,canvasId,cavW,cavH){//调用插件中的draw方法，绘制二维码图片QR.api.draw(url,canvasId,cavW,cavH);setTimeout(()={this.canvasToTempImage();},1000);},/***获取临时缓存照片路径，存入data中*/canvasToTempImage:function(){varthat=this;//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。wx.canvasToTempFilePath({canvasId:'mycanvas',success:function(res){vartempFilePath=res.tempFilePath;console.log(tempFilePath);that.setData({imagePath:tempFilePath,//canvasHidden:true});},fail:function(res){console.log(res);}});},/***点击图片进行预览*/previewImg:function(e){varimg=this.data.imagePath;console.log(img);wx.previewImage({current:img,//当前显示图片的http链接urls:[img]//需要预览的图片http链接列表});},})
5.详细源码请查看https://github.com/demi520/wxapp-qrcode
6.文章转载自：https://blog.csdn.net/She_lock/article/details/81059514