情景:微信小程序的最后一頁中間有一個自己的二維碼,方便用戶截圖分享,如果知道域名和網(wǎng)頁路徑,是很容易生成一個二維碼的樱调,但是微信小程序沒辦法這樣做。
微信小程序沒有window.location届良,所以必須通過微信提供的方法來獲取這個二維碼笆凌,具體方法:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html
這些操作都是需要后端去操作的,前端可以通過downloadFile方法來獲取臨時的二維碼圖片文件士葫,然后再賦值給Image的src用來展示乞而;或者通過canvas把它繪制出來。
注意:代碼中接口必須是Get接口慢显,imgInfo參數(shù)必須用encodeURIComponent方法處理一下爪模,而且wx.downloadFile方法必須設置下載域名白名單才能在發(fā)布狀態(tài)下調(diào)用成功欠啤。
下載域名白名單設置后,并不能立即使用屋灌,等待兩三個小時也有可能洁段。
...
this.getQrCode().then(res => {
if (!res) {
wx.hideLoading();
// wx.showToast({
// title: '二維碼加載出錯~',
// icon: 'none'
// })
this.setData({
downloadFileErr: true
});
return false
}
const ctx = wx.createCanvasContext('myCanvas');
ctx.save();
ctx.drawImage(
'../../images/share@2x.png',
0, 0,
750, 1624,
0, 0,
this.data.cvsSize.width, this.data.cvsSize.height
);
this.drawRect(ctx);
this.drawEwm(ctx, res.tempFilePath);
ctx.draw(false, function () {
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '繪制完成',
})
},
})
});
})
},
...
getQrCode () {
var SessionResult = wx.getStorageSync('SessionResult') || {}
let imgInfo = {
channelNo: 'cy35',
scene: 'userId=' + SessionResult.userId + '&type=1',
width: 280
}
return new Promise((resolve, reject) => {
wx.showToast({
title: 'getQrCode...',
})
wx.downloadFile({
url: Ajax.preUrl + 'ky/createUnlimitedQr?imgInfo=' + encodeURIComponent(JSON.stringify(imgInfo)),
success (res) {
if (res.statusCode === 200) {
// console.log('downloadFile', res)
resolve(res)
} else {
wx.showToast({
title: 'success.' + res.statusCode,
})
resolve('');
}
},
fail (err) {
wx.showToast({
title: 'fail.' + err,
})
console.log('downloadFile failed.', err);
resolve('');
}
})
})
},
生成了二維碼并附帶了參數(shù),那么掃碼后在首頁怎么獲取這個傳過來的參數(shù)呢声滥?
scene: 'userId=' + SessionResult.userId + '&type=1'這部分代碼就是二維碼附帶的參數(shù)眉撵,在進入頁面index.js的onload方法里面,可以得到這個參數(shù)落塑。
if(options.scene){
console.log('options.scene:', options)
let scene=decodeURIComponent(options.scene);
console.log('options.scene:', scene)
//&是我們定義的參數(shù)鏈接方式
let userId=scene.split("&")[0];
if (typeof userId === 'string' && userId.indexOf('=') > 0) {
userId = userId.split('=')[1]
}
}
options.scene結果打优ε薄:
{scene: "userId=2100&type=1"}