需求:我要在一个页面中生成一个二维码,并且这个二维码可以长按保存到本地或者发送给好友;
我这里是将生成的canvas二维码转换成图片,利用长按图片进行保存或转发
效果图:
第一步先下载对应的包:
npm install weapp-qrcode --save
第二步: wxml
我们需要准备一个生成二维码的canvas
<canvas class="pf canvas" style="width:260rpx;height:260rpx;" canvas-id="myQrcode" id="myQrcode"></canvas>
canvas-id="myQrcode" 这个id是生成二维码的时候需要
id="myQrcode" 这个id是转换图片的时候需要
还需要一个存放图片的image (图片的位置自定义)
<image show-menu-by-longpress="true" src="{{qrcodeUrl}}" mode="aspectFit"></image>
show-menu-by-longpress="true" 必须存在
第三步:JS
先导入weapp-qrcode包
import drawQrcode from 'weapp-qrcode'
data中定义需要用到的变量
data: { showCodeFn:false, qrcodeUrl:'' },
开始生成二维码
onLoad(options) { var that = this drawQrcode({ width:130, height:130, canvasId: 'myQrcode', text: config.temporaryUrl+'wechat/unit/'+options.unitId, callback:function(e){ //我这里判断如果二维码生成成功就调用转换图片的方法,万一在没生成二维码之前,用户点击了图片的,报错或者看不见就尴尬了 that.drawImg() } }) },
至于需要在哪个生命周期函数中生成二维码,自己定
将二维码转换成图片的方法
drawImg(){ var that = this // 创建一个选择器查询对象 const query = wx.createSelectorQuery(); // 执行查询并获取 canvas 节点的实例 query.select('#myQrcode').boundingClientRect() // 查询结束后执行回调函数 query.exec((res) => { if (res[0]) { // res[0] 是 canvas 节点信息,确保节点存在 wx.canvasToTempFilePath({ canvasId: 'myQrcode', success(res) { that.setData({ //因为的的需求是点击某个地方,才让图片显示,所以在没生成图片之前,先把需要点击的那个地方隐藏了,等生成图片成功后,再放出来,所以这里是控制那个点击地方的显示/隐藏 showCodeFn:true }) console.log('查询成功') const tempFilePath = res.tempFilePath; console.log(tempFilePath); that.setData({ //这是图片地址 qrcodeUrl: tempFilePath }) }, fail(err) { console.error( err); } }); } else { console.error('未能找到对应的 canvas 节点'); } }); },
完成 ✿✿ヽ(°▽°)ノ✿