參考文章原文鏈接：微信小程序使用weapp-qrcode.js完成二維碼的生成_fairy_404的博客-CSDN博客
首先給需要生成二維碼的頁面創(chuàng)建一個canvas
<canvas canvas-id="myCanvas" style="background:#fff;position: absolute; left: -9999px;" />因為我這里實現(xiàn)的是彈窗展示二維碼，所有就把?canvas移出頁面，小伙伴們根據(jù)自己需求進(jìn)行調(diào)整，weapp-qrcode.js內(nèi)容參考鏈接中就有，我這里就不展示了，接著就可以在頁面中直接使用了
const QRCode = require('../../utils/weapp-qrcode');//根據(jù)自己文件實際位置修改
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
// 點擊生成按鈕觸發(fā)事件
handleGenerate(code) {
let that = this
new QRCode('myCanvas', {
text: 'https://xxx?id=' + code,
width: 141, //canvas 畫布的寬
height: 141, //canvas 畫布的高
padding: 10, // 生成二維碼四周自動留邊寬度，不傳入默認(rèn)為0
correctLevel: QRCode.CorrectLevel.L, // 二維碼可辨識度
colorDark: "#0378CC",//分別為兩種交替顏色
colorLight: "white",
callback: (res) => {
//工具回調(diào)數(shù)據(jù)
wx.hideLoading()
that.setData({
imagePath: res.path
})
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.handleGenerate('123')//生成二維碼
},
})通過以上方法就可以生成二維碼了。
掃描二維碼跳轉(zhuǎn)到小程序
然后就是怎么實現(xiàn)掃描二維碼跳轉(zhuǎn)到小程序并接收參數(shù)了，先根據(jù)微信文檔做好配置工作：
具體配置可查看：掃普通鏈接二維碼打開小程序 | 微信開放文檔
1、登錄小程序后臺配置>開發(fā)管理>開發(fā)設(shè)置>啟用“掃普通鏈接二維碼打開小程序”
?2、添加>填寫二維碼規(guī)則等信息
3、獲取參數(shù)（這里不好測試，因為只有上傳代碼和規(guī)則上線發(fā)布才會生效，先記錄一下吧），需要在跳轉(zhuǎn)頁面的onLoad進(jìn)行接收
onLoad: function (options) {
// 掃描邀請碼進(jìn)入
if(options.q && options.q != "undefined"){
const qrUrl = decodeURIComponent(options.q)
let jsonUrl = this.getwxUrlParam(qrUrl);
let inviteId = jsonUrl.id;
console.log(inviteId)
}
},
getwxUrlParam(url) {
let theRequest = {};
if(url.indexOf("#") != -1){
const str=url.split("#")[1];
const strs=str.split("&");
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}else if(url.indexOf("?") != -1){
const str=url.split("?")[1];
const strs=str.split("&");
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
},好了，基本就這樣~~~撒花~~~了嗎？
還差一點點，還有遇到的問題沒記錄呢：
I、以上的獲取參數(shù)方法3，經(jīng)過發(fā)布后已經(jīng)確定能正確獲取到鏈接參數(shù)（包括&后的參數(shù),如：https://xxxx?id=123&code=456）：
// 掃描邀請碼進(jìn)入
if(options.q && options.q != "undefined"){
// 獲取到二維碼原始鏈接內(nèi)容
const qrUrl = decodeURIComponent(options.q)
//獲取參數(shù)，通過方法解析
let jsonUrl = that.GetwxUrlParam(qrUrl);
//獲取邀請碼
let inviteId = jsonUrl.id;
let inviteCode = jsonUrl.code;
}II、因為微信小程序首頁onLoad調(diào)用兩次，導(dǎo)致獲取鏈接參數(shù)失敗問題：
這是因為微信小程序啟動時，app.json文件中的pages第一行（即首頁）是一定會執(zhí)行的。這是第一次調(diào)用，這個時候可以獲取到鏈接參數(shù):
{
"pages": [,
"pages/index/index"
]
}?
但是當(dāng)你在app.js的onLunch存在以下代碼，就會導(dǎo)致首頁第二次調(diào)用。這時候options就是一個空對象{}，就會將第一次的結(jié)果覆蓋
//app.js
App({
onLaunch: function (options) {
......
wx.redirectTo({
url: 'pages/index/index'
});
}
})
這個時候，我們只需要將app.js中的wx.redirectTo({......})刪除就可以解決這個問題了??！文章來源：http://www.zghlxwxcb.cn/news/detail-789333.html
真?。?！完結(jié)~~~撒花~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-789333.html
到了這里，關(guān)于微信小程序使用weapp-qrcode.js生成二維碼以及“掃普通鏈接二維碼打開小程序”動態(tài)傳遞參數(shù)實現(xiàn)以及遇到問題記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
