前言
之所以把掃碼和帶參數(shù)跳轉(zhuǎn)放到一起是因?yàn)檫@兩個都涉及到頁面間傳參。
1. 小程序之掃碼
在現(xiàn)在的移動互聯(lián)網(wǎng)中，掃碼是一個非常重要的應(yīng)用場景。在眼查查中也得到廣泛應(yīng)用，從最開始的掃會員二維碼到掃描預(yù)約碼到現(xiàn)在的掃描帶篩查碼的菊花碼。
在小程序中掃碼需要使用微信官方提供的api，其底層是使用的微信的掃一掃，通過調(diào)起微信客戶端的掃碼界面進(jìn)行掃碼。
具體的Api使用請參考官方文檔。需要注意的是在這個過程中，掃描二維碼和掃描菊花碼是不同處理過程。
掃描普通二維碼結(jié)果在result中拿，掃描菊花碼結(jié)果在path中拿。在下一節(jié)中將會具體說明。
2. 實(shí)際項(xiàng)目中的掃碼
上代碼進(jìn)行說明
scan() {
let that = this;
wepy.scanCode({
onlyFromCamera: false, //是否只能從相機(jī)掃碼，不允許從相冊選擇圖片,
success: res => {}
}).then(res => {
that.onScanResult(res);
});
},
在調(diào)用wepy.scanCode后，將結(jié)果交由onScanResult方法處理
/**
* 掃描成功
*/
onScanResult(res) {
if (res == null) {
return;
}
// 掃到了二維碼
if (res.scanType == "QR_CODE") {
this.getDataByCode(res.result)
this.$Apply();
} else if (res.scanType == "WX_CODE") {
if (stringUtils.isNullOrEmpty(res.path)) {
this.getScreenDetail(res.result);
this.$apply();
} else {
let path = decodeURIComponent(res.path)
let senceIndex = path.indexOf("=")
let code = path.substring(senceIndex + 1, path.length);
this.getDataByCode(code);
this.$apply();
}
}
}
在具體的處理中根據(jù)scanType的不同從不同的字段中取數(shù)據(jù)。
此處需要特別注意的是菊花碼的生成，如果只是小程序的二維碼可以在微信小程序后臺中直接下載物料，但是如果是需要生成自定義的帶參數(shù)的小程序二維碼則需要調(diào)用對應(yīng)的接口才能實(shí)現(xiàn)。獲取自定義的小程序碼有如下兩種方式：
l 使用官方工具：
https://mp.weixin.qq.com/wxamp/wxaqrcode/weappcode?simple=1&token=2009620926&lang=zh_CN
但是這種方式只能生成指定頁面的小程序碼，無法再帶參數(shù)。
l 使用https接口獲取：可通過后臺調(diào)用或者使用網(wǎng)絡(luò)請求工具模擬。除了可以指定頁面路徑外還可以指定接口。官方提供了ABCD4個接口我們使用的是B接口，page指定頁面路徑，scene指定頁面參數(shù)。
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
此外還需要注意使用時需要用到accessToken
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
3. 頁面帶參數(shù)跳轉(zhuǎn)
頁面帶參數(shù)跳轉(zhuǎn)這個功能主要用于小程序被外部應(yīng)用打開時使用，比如從公眾號的自定義菜單項(xiàng)和眼查查App中跳轉(zhuǎn)二來。
由于小程序的頁面棧邏輯，如果直接跳轉(zhuǎn)至對應(yīng)頁面，在退出這個頁面后將直接退出小程序無法進(jìn)入其他頁面，所以我們采用的方案是所有跳轉(zhuǎn)交由home頁面執(zhí)行，在home頁面拿到對應(yīng)的參數(shù)后做出跳轉(zhuǎn)動作。
var page, param;
console.log("option", option)
if (option != null) {
if (option.src) {
this.enablePageSwitch = true;
page = option.src;
}
if (option.param) {
param = option.param
}
}
this.$parent.loginToServer().then(() => {
if (page) {
this.switchToPage(page, param)
this.enablePageSwitch = false;
} else {
this.bannerList();
this.getHomeTags();
}
})
/**
* 跳轉(zhuǎn)至頁面
*/
switchToPage(page, param) {
// TODO: 跳轉(zhuǎn)至具體的頁面
}
參考資料
1.微信小程序掃碼說明
https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html
2. 小程序碼的參數(shù)獲取
https://www.jianshu.com/p/108233ed7ed0
