原生小程序生成二维码并保存到本地

需求：我要在一个页面中生成一个二维码，并且这个二维码可以长按保存到本地或者发送给好友；

我这里是将生成的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 节点');       }     });   },

完成 ✿✿ヽ(°▽°)ノ✿