官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/api/getAccessToken.html
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token',
header: { 'content-type': 'application/json' },
data: {
grant_type: 'client_credential',
appid:'小程序ID',//小程序开发者进入后台可以看到
secret: '小程序秘钥'//小程序开发者进入后台可以看到
}
})
返回data 就看到access_token了,access_token时效就2小时,并且重复请求后,上一个会失效!
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
坑点:
1、请求方式要用post method:‘POST’
2、access_token 要连接 在 接口后面https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXXX
3、返回类型格式responseType:'arraybuffer’
4、参数path 必须为正式版发布了小程序存在的页面
5、参数scene即二维码进入小程序页面场景的参数
如果涉及到1个参数还好,该咋咋地,如2个以上,习惯用&拼接的话 可能在开发调试阶段就会出错了(场景模拟入口参数如scene=id%3D1%26activeid%3D1), decodeURIComponent(option.scene)解码
进入页面获取到scene,转码(二维码进入),我是用,隔开参数
let scene = decodeURIComponent(option.scene)
let itemId = scene.split(',')[0]
let activeId = scene.split(',')[1]
6、请求成功后获取到的是二进制的数据,需要将其转化成64位
let base64 = wx.arrayBufferToBase64(res.data)
7、转换为64位图片后还不是完整的二维码,需要添加一下字符串
let codeImg= 'data:image/PNG;base64,' + base64
贴下完整代码:
wx.request({
// 调用接口C
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=XXXXXX',
method: 'POST',
responseType: 'arraybuffer',
data: {
"page": '正式版已发布的页面路由pages/index/index',
"width": 430,
'scene': that.data.id + ',' + that.data.activityId
},
success(res) {
console.log(res)
let base64 = wx.arrayBufferToBase64(res.data)
that.setData({
codeImg: 'data:image/PNG;base64,' + base64
})
},
fail(err){
console.log(err)
}
})
看到这里已经成功了一半,获取到二维码是64位格式图片
但是!小程序正式版真机 Canvas.drawImage 不支持64位格式,只支持http那种网络格式图片
所以要么前端有办法将64位变化成HTTP格式图片(我失败了),要么就交给后端,重复以上操作返回网络图片给前端。
绘制网络图片二维码代码
let that = this;
const ctx = wx.createCanvasContext('poster', this)
ctx.drawImage('/images/poster3.png', 0, 0, 300, 456)
ctx.beginPath()
ctx.setFillStyle('#212c67')
ctx.setFontSize(22)
ctx.fillText(that.data.itemInfo.Name, 104, 160)
//坑点 wx.getImageInfo 是个请求会有延时,如果在外边写ctx.draw(),可能就会绘制不出来一些图片文字形状
wx.getImageInfo({
src: img,
success(res) {
console.log(img)
ctx.drawImage(res.path, 80, 240, 140, 140)
// //画个圆
ctx.arc(150, 80, 54, 0, 2 * Math.PI)
ctx.clip()
wx.getImageInfo({
src: that.data.itemInfo.ImgPH,
success(res) {
console.log(that.data.itemInfo.ImgPH)
ctx.drawImage(res.path, 100, 28, 100, 100)
ctx.draw()
wx.hideLoading()
}
})
}
})
let that=this;
//剪裁Canvas里的位置,保存为临时图片地址
wx.canvasToTempFilePath({
canvasId: 'poster',
x: 0,
y: 0,
width: 375,
height: 570,
destWidth: 375,
destHeight: 570,
success(res) {
that.setData({
posterImg: res.tempFilePath
})
//下载到手机里了
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
})
}
})
}
}, this)