最近项目中涉及到小程序的生成二维码，很是头疼，经过多次摸索，整理出了自己的一些思想方法，如有不足，欢迎指正。
首先完全按照小程序的结构依次填坑。
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)
}
})
}
})
},