需求：我要在一个页面中生成一个二维码，并且这个二维码可以长按保存到本地或者发送给好友；
我这里是将生成的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 节点');}});},
完成 ✿✿ヽ(°▽°)ノ✿
)
