坑点1: 获取不到小程序码的二进制流
问题: 真机不显示二维码, 不勾选不检验合法域名时不显示二维码
解决:
https://api.weixin.qq.com
该域名无法设置在request合法域名中,所以获取二维码二进制的请求应放在后台,前端再去请求后台的接口,arraybuffer数据接收
wx.request({
url: '请求地址', //这是后台请求地址: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.token,
method: 'post',
data: {
scene: 'id=1&cid=2' //参数
},
responseType: 'arraybuffer', //返回数据格式, 必须
complete: res => {
let codebuffer = res.data
let base64Data = wx.arrayBufferToBase64(codebuffer); //arraybuffer转base64
const base64ImgUrl = "data:image/png;base64," + base64Data;
}
})
坑点2: pc上canvas显示, 真机空白
原因: 1用了网络图片 2用了base64格式图片
解决:
- 1.使用本地图片绘制,或者先下载网络图片再绘制
wx.downloadFile({
url: poster, //这里poster为图片网络链接
success: res => {
// console.log(res.tempFilePath);
let downloadimg = res.tempFilePath //此处为下载的图片文件
...... //后续canvas绘制逻辑
}
})
- 2.base64图片转临时图片再绘制
var aa = wx.getFileSystemManager();
var imgs = this.data.codeimgs;
aa.writeFile({
filePath: wx.env.USER_DATA_PATH + '/test.png',
data: imgs.slice(22), //去除base64头部格式文字,我使用的是'data:image/png;base64', jpeg的话是slice(23)
encoding: 'base64',
success: res => {
let nimgs = wx.env.USER_DATA_PATH + '/test.png'; //此处为转换的图片文件
.....//后续canvas绘制逻辑
},
fail: err => {
rej(err)
}
})
其他:
以上获二进制流格式,下载图片,转换图片都是异步操作, 绘制图片都需要再这些操作完成后进行,
建议以上异步操作写成promise对象
, 最后async await
调用