项目需要文章分享到朋友圈,需要获取每一篇文章对应的小程序码,和文章标题,以及缩略图生成canvas,保存成图片,用户长按识别小程序码后就可直接查看有对应的文章,
因为项目小程序需要每一篇文章对应的小程序码,所以就采取了官方提供的B方法去获取小程序码(通过该接口生成的小程序码,永久有效,数量暂无限制。用户扫描该码进入小程序后,开发者需在对应页面获取的码中 scene 字段的值,再做处理逻辑。);
前台:发给后台对应页面路径,以及对应文章的id;
data: {
scene: that.data.id,
page: 'pages/newsDetail/newsDetail',
}
,后台拿到前台发送的数据后通过微信提供的jdk:
https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
一. 请求成功之后微信会给后台会返回一个二进制流,后台开发将二进制流转化为base64字符串发送到前台,前台将取到的base字符串以image的形式显示就可以;但是这种方法只能显示小程序码,但是无法将小程序画到canvas上;
二.因为canvas并不支持将base64图片直接画到canvas上,所以只好后台保存成图片上传到阿里云oss上之后返回给网络路径在进行处理,前台将图片下载到本地之后再获取临时路径画到canvas上面,最后保存成图片,再次一定要注意canvas的回调函数;
前端一定注意文章列表传来的id和识别小程序码进入文章的scene的处理
附:前台显示base64小程序码方法:
var Base64Binary = {
_keyStr:
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
/* will return a Uint8Array type */
decodeArrayBuffer:
function (input) {
var bytes = (input.length /
4) *
3;
var ab =
new ArrayBuffer(bytes);
this.decode(input, ab);
return ab;
},
removePaddingChars:
function (input) {
var lkey =
this._keyStr.indexOf(input.charAt(input.length -
1));
if (lkey ==
64) {
return input.substring(
0, input.length -
1);
}
return input;
},
decode:
function (input, arrayBuffer) {
//get last chars to see if are valid
input =
this.removePaddingChars(input);
input =
this.removePaddingChars(input);
var bytes = parseInt((input.length /
4) *
3,
10);
var uarray;
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i =
0;
var j =
0;
if (arrayBuffer)
uarray =
new Uint8Array(arrayBuffer);
else
uarray =
new Uint8Array(bytes);
input = input.replace(/[^A-Za-z0-9\+\/\=]/g,
"");
for (i =
0; i < bytes; i +=
3) {
//get the 3 octects in 4 ascii chars
enc1 =
this._keyStr.indexOf(input.charAt(j++));
enc2 =
this._keyStr.indexOf(input.charAt(j++));
enc3 =
this._keyStr.indexOf(input.charAt(j++));
enc4 =
this._keyStr.indexOf(input.charAt(j++));
chr1 = (enc1 <<
2) | (enc2 >>
4);
chr2 = ((enc2 &
15) <<
4) | (enc3 >>
2);
chr3 = ((enc3 &
3) <<
6) | enc4;
uarray[i] = chr1;
if (enc3 !=
64) uarray[i +
1] = chr2;
if (enc4 !=
64) uarray[i +
2] = chr3;
}
return uarray;
}
}
var uintArray = Base64Binary.decode(base64_string);
var byteArray = Base64Binary.decodeArrayBuffer(base64_string);
下面是获取到的base64字符串进行处理
wx.request({
url: baseUrl + '/news/sharecode',
method: 'POST',
data: {
id: id,
scene: id,
page: 'pages/newsDetail/newsDetail'
},
success: res => {
var data = res.data
var array = Base64Binary.decodeArrayBuffer(res.data)
var base64 = wx.arrayBufferToBase64(array)
that.setData({
code_img: "data:image/png/jpg/jpeg;base64," + base64
})
}
})
<image src='{{code_img}}' ></image>