前言
之所以把掃碼和帶參數(shù)跳轉(zhuǎn)放到一起是因?yàn)檫@兩個(gè)都涉及到頁面間傳參。
1. 小程序之掃碼
在現(xiàn)在的移動互聯(lián)網(wǎng)中，掃碼是一個(gè)非常重要的應(yīng)用場景。在眼查查中也得到廣泛應(yīng)用，從最開始的掃會員二維碼到掃描預(yù)約碼到現(xiàn)在的掃描帶篩查碼的菊花碼。
在小程序中掃碼需要使用微信官方提供的api，其底層是使用的微信的掃一掃，通過調(diào)起微信客戶端的掃碼界面進(jìn)行掃碼。
具體的Api使用請參考官方文檔。需要注意的是在這個(gè)過程中，掃描二維碼和掃描菊花碼是不同處理過程。
掃描普通二維碼結(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個(gè)接口我們使用的是B接口，page指定頁面路徑，scene指定頁面參數(shù)。
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
此外還需要注意使用時(shí)需要用到accessToken
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
3. 頁面帶參數(shù)跳轉(zhuǎn)
頁面帶參數(shù)跳轉(zhuǎn)這個(gè)功能主要用于小程序被外部應(yīng)用打開時(shí)使用，比如從公眾號的自定義菜單項(xiàng)和眼查查App中跳轉(zhuǎn)二來。
由于小程序的頁面棧邏輯，如果直接跳轉(zhuǎn)至對應(yīng)頁面，在退出這個(gè)頁面后將直接退出小程序無法進(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
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。