前言
之所以把掃碼和帶參數跳轉放到一起是因為這兩個都涉及到頁面間傳參。
1. 小程序之掃碼
在現在的移動互聯網中，掃碼是一個非常重要的應用場景。在眼查查中也得到廣泛應用，從最開始的掃會員二維碼到掃描預約碼到現在的掃描帶篩查碼的菊花碼。
在小程序中掃碼需要使用微信官方提供的api，其底層是使用的微信的掃一掃，通過調起微信客戶端的掃碼界面進行掃碼。
具體的Api使用請參考官方文檔。需要注意的是在這個過程中，掃描二維碼和掃描菊花碼是不同處理過程。
掃描普通二維碼結果在result中拿，掃描菊花碼結果在path中拿。在下一節中將會具體說明。
2. 實際項目中的掃碼
上代碼進行說明
scan() {
let that = this;
wepy.scanCode({
onlyFromCamera: false, //是否只能從相機掃碼，不允許從相冊選擇圖片,
success: res => {}
}).then(res => {
that.onScanResult(res);
});
},
在調用wepy.scanCode后，將結果交由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();
}
}
}
在具體的處理中根據scanType的不同從不同的字段中取數據。
此處需要特別注意的是菊花碼的生成，如果只是小程序的二維碼可以在微信小程序后臺中直接下載物料，但是如果是需要生成自定義的帶參數的小程序二維碼則需要調用對應的接口才能實現。獲取自定義的小程序碼有如下兩種方式：
l 使用官方工具：
https://mp.weixin.qq.com/wxamp/wxaqrcode/weappcode?simple=1&token=2009620926&lang=zh_CN
但是這種方式只能生成指定頁面的小程序碼，無法再帶參數。
l 使用https接口獲取：可通過后臺調用或者使用網絡請求工具模擬。除了可以指定頁面路徑外還可以指定接口。官方提供了ABCD4個接口我們使用的是B接口，page指定頁面路徑，scene指定頁面參數。
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. 頁面帶參數跳轉
頁面帶參數跳轉這個功能主要用于小程序被外部應用打開時使用，比如從公眾號的自定義菜單項和眼查查App中跳轉二來。
由于小程序的頁面棧邏輯，如果直接跳轉至對應頁面，在退出這個頁面后將直接退出小程序無法進入其他頁面，所以我們采用的方案是所有跳轉交由home頁面執行，在home頁面拿到對應的參數后做出跳轉動作。
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();
}
})
/**
* 跳轉至頁面
*/
switchToPage(page, param) {
// TODO: 跳轉至具體的頁面
}
參考資料
1.微信小程序掃碼說明
https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html
2. 小程序碼的參數獲取
https://www.jianshu.com/p/108233ed7ed0
