第一步第二步都要必须由后端完成,返回图片地址给前端! !原因? ?如下图:
想了解,想尝试的可以看看:
<强>第一步:获取ACCESS_TOKEN
//这一步前端可以试试请求玩玩,一般由后端获取access_Token。后端请求微信API接口时会用到这个access_Token,前端
再请求会造成重复请求,会使之前的access_token过期。
<强>第二步:获取小程序二维码并渲染:
小程序API地址
wx.request ({//url: https://api.weixin.qq.com/wxa/getwxacode& # 63; access_token=' + accessToken,////url: https://api.weixin.qq.com/wxa/getwxacodeunlimit& # 63; access_token=' + accessToken,//b
url: https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode& # 63; access_token + accessToken,//c
方法:“文章”,
数据:{
“路径”:“/页/索引/指数# 63;openid=" + openid,//携参数openid
“宽度”:“430”
}，
responseType:“arraybuffer”,
成功:函数(res) {
console.log (res.data)//二维码
that.setData ({
qrcode: res.data
}）
}，
失败:函数(res) {
console.log(失败)
｝
})
最后结果会出现小程序乱码,(这是个二进制流文件):
<>强解决?
可以利用微信小程序拓展接口,(后台转二进制流也是可以的,后台获取后,直接保存为图片,然后将图片路径返回给前台)。
wx.arrayBufferToBase64 (arrayBuffer)可以将二进制流转为base64,拓展接口方法地址
//前端请求完整方法:
wx.request ({//url: https://api.weixin.qq.com/wxa/getwxacode& # 63; access_token=' + accessToken,////url: https://api.weixin.qq.com/wxa/getwxacodeunlimit& # 63; access_token=' + accessToken,//b
url: https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode& # 63; access_token + accessToken,//c
方法:“文章”,
数据:{
“路径”:“/页/索引/指数# 63;openid=" + openid,//携参数openid
“宽度”:“430”
}，
responseType:“arraybuffer ',//arraybuffer是以数组的语法处理二进制数据,称为二进制数组。
成功:函数(res) {
让数据=https://www.yisu.com/zixun/wx.arrayBufferToBase64 (res.data);
that.setData ({
qrcode:“数据:图像/png; base64, +数据
}）
}，
失败:函数(res) {
console.log(失败)
｝
})
wxml文件:
& lt;图像src=' https://www.yisu.com/zixun/{{qrcode}}/祝辞
这样二维码就可以出现了,
首页获取二维码参数
onLoad:功能(选项){//console.log (options.openid)
如果(options.openid) {
wx。setStorageSync (openid, options.openid)//将openid缓存
｝
}
要使用的时候,拿缓存则:让openid=wx.getStorageSync (openid);
<>强如果后端给你传的是base64 ?
那么恭喜你,本该传图片路径给你…
解决base64图片显示的方法:
var=wx.base64ToArrayBuffer数组(res.data.data)
var base64=wx.arrayBufferToBase64(数组)
如果(res.statusCode==200) {
that.setData ({
qrcode:“数据:图像/jpeg, base64”+ base64,//数据为接口返回的base64字符串
}）
}
附:前端请求获取access_token与小程序二维码(试试)
wx.request ({//获取令牌
url: https://api.weixin.qq.com/cgi-bin/token& # 63; grant_type=client_credential ',
数据:{
appid:“* * *”,//小程序appid
秘密:“* * *”//小程序秘钥
}，
成功(res) {//res.data.access_token
wx.request ({
url: https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode& # 63; access_token=' + res.data.access_token,
方法:“文章”,
数据:{
“路径”:“/页/索引/指数”,
“宽度”:430
}，
成功(res) {
console.log (res.data)//后台转二进制流,后台获取后,直接保存为图片,然后将图片路径返回给前台//前端转,如上
｝
}）
｝
})
