最近项目中涉及到小程序的生成二维码，很是头疼，经过多次摸索，整理出了自己的一些思想方法，如有不足，欢迎指正。
首先完全按照小程序的结构依次填坑。
pages--index.wxml
<view class="wrap"> <view>导游姓名：<text>{{guide.name}}</text></view> </view> <view class="wrapCode"> <view>导游证号：<text>{{guide.id}}</text></view> </view> <view class="erCode"> <canvas style="width: 650rpx;height: 650rpx;margin:80rpx auto;" canvas-id="qrcCanvas"/> </view> <button formType="submit" class="login-btn" hover-class="none" bindtap=\'saveQrImg\'>保存二维码到手机相册</button>
对于其他标签 以及结构我想应该不必多说了吧，但是canvas是重点，敲黑板。。。
pages--index.js
Page({ data: { aaa:\'aaa://\',//这个参数根据自己不同的需求自己定义 guide:{ id:\'\', name:\'\' }, canvasId: "qrcCanvas",// canvas的Id 因为下面用的到 },
由于我的页面是跳转的 也就是在上个页面输入的相关信息，然后跳转到这个页面中的，所以在onLoad()函数中接收下参数
onLoad: function (option) { this.setData({ guide:option, }) },
那下面就是最重要的了
onReady: function () { let size = this.setCanvasSize();//动态设置画布大小 let http = this.data.hlj+this.data.guide.id; console.log(http); this.createQrCode(http, this.data.canvasId, size.w, size.h); }, setCanvasSize(){ var size = {}; try { var res = wx.getSystemInfoSync(); var scale = 750 / 686;//不同屏幕下canvas的适配比例；设计稿是750宽 var width = res.windowWidth / scale; var height = width;//canvas画布为正方形 size.w = width; size.h = height; } catch (e) { // Do something when catch error console.log("获取设备信息失败" + e); } return size; }, createQrCode(str, canvasId, cavW, cavH){ QR.api.draw(str, canvasId, cavW, cavH); }, saveQrImg(){ // let http = this.data.hlj + \'510301198801305998\'; //把canvas转成图片 成功返回url wx.canvasToTempFilePath({ canvasId: \'qrcCanvas\', success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (res) { wx.showToast({ title: \'保存成功\', icon: \'success\', duration: 2000 }) }, fail: function (res) { console.log(res) } }) } }) },
请发表评论