目錄
功能需求
實(shí)現(xiàn)思路
第一步，發(fā)布二維碼的關(guān)聯(lián)規(guī)則
發(fā)布關(guān)聯(lián)規(guī)則的步驟
精確匹配和模糊匹配的區(qū)別
精確匹配
模糊匹配
添加小程序功能頁
發(fā)布關(guān)聯(lián)規(guī)則
第二步，讀取參數(shù)
小程序應(yīng)用的生命周期
獲取二維碼中攜帶的參數(shù)
我的需求實(shí)現(xiàn)代碼片段
?代碼調(diào)試
?在手機(jī)中打開聯(lián)調(diào)
查看數(shù)據(jù)
功能需求
實(shí)現(xiàn)支付寶APP掃描小程序的付款碼，跳轉(zhuǎn)到小程序的收款頁面
實(shí)現(xiàn)思路
在支付寶開放平臺中，可以通過在小程序碼中，發(fā)布關(guān)聯(lián)二維碼的關(guān)聯(lián)規(guī)則，通過關(guān)聯(lián)規(guī)則實(shí)現(xiàn)支付寶 APP 掃碼跳轉(zhuǎn)到小程序，通過在App.vue頁面讀取二維碼中攜帶的參數(shù)。
第一步，發(fā)布二維碼的關(guān)聯(lián)規(guī)則
首先登錄支付寶開放平臺，進(jìn)入小程序的控制臺中。點(diǎn)擊小程序碼，添加關(guān)聯(lián)二維碼。
發(fā)布關(guān)聯(lián)規(guī)則的步驟
注意：發(fā)布關(guān)聯(lián)規(guī)則的時候，二維碼地址的域名必須完成 ICP 備案，并且按照支付寶的要求完成所屬校驗(yàn)。
例如：二維碼的鏈接是 https://www.test.com
精確匹配和模糊匹配的區(qū)別
精確匹配
精確匹配中，需要所掃二維碼鏈接與關(guān)聯(lián)規(guī)則中的二維碼的地址完全一致才能夠喚起小程序。一般匹配的是唯一的關(guān)聯(lián)規(guī)則
模糊匹配
模糊匹配中，用戶所掃二維碼鏈接的前綴與關(guān)聯(lián)規(guī)則中的二維碼地址一致時，就能夠跳轉(zhuǎn)到小程序指定的頁面。
例如:二維碼鏈接的地址為： https://www.test.com/abc，則生成的二維碼的鏈接包含https://www.test.com/abc，在APP掃碼的時候都會發(fā)生跳轉(zhuǎn)。就像 https://www.test.com/abc/123或者 https://www.test.com/abc/123/456或者 https://www.test.com/abc/def等，以https://www.test.com/abc為根路徑的鏈接都可以實(shí)現(xiàn)跳轉(zhuǎn)。
在本次操作中，只要是滿足 url + /pages/user/money/transfer 的鏈接生成的二維碼，都能夠?qū)崿F(xiàn)APP掃碼跳轉(zhuǎn)到小程序頁面。
添加小程序功能頁
添加二維碼的鏈接后，通過添加小程序的功能頁面來控制 APP 掃碼后跳轉(zhuǎn)的頁面。
發(fā)布關(guān)聯(lián)規(guī)則
內(nèi)容填充完畢后，點(diǎn)擊提交關(guān)聯(lián)規(guī)則，點(diǎn)擊提交后進(jìn)入發(fā)布關(guān)聯(lián)規(guī)則頁面
在發(fā)布關(guān)聯(lián)規(guī)則頁面，可以通過生成的測試二維碼，進(jìn)行測試，然后選擇發(fā)布關(guān)聯(lián)規(guī)則。發(fā)布的關(guān)聯(lián)規(guī)則，會在兩分鐘內(nèi)生效。
示例效果圖：
第二步，讀取參數(shù)
讀取參數(shù)前可以先了解一下小程序的應(yīng)用生命周期。
小程序應(yīng)用的生命周期
小程序應(yīng)用的生命周期在框架接口-APP 里可以看到。
在 App.vue中
App({
// 監(jiān)聽小程序初始化
onLaunch (options) {
},
// 監(jiān)聽小程序啟動顯示
onShow (options) {
},
// 監(jiān)聽小程序隱藏（切入后臺時）
onHide () {
},
})- 當(dāng)用戶首次打開小程序，就觸發(fā) onLaunch（只觸發(fā)一次），小程序程序就開始進(jìn)行初始化。（二維碼的攜帶參數(shù)的值就是在這個生命周期中獲取。）
- 當(dāng)小程序代碼初始化完成后，觸發(fā)onShow方法，監(jiān)聽小程序顯示，這個時候我們就可以看到頁面。
- 當(dāng)小程序從前臺進(jìn)入后臺，觸發(fā) onHide方法，當(dāng)我們切換到其他手機(jī)程序（從百度APP到QQAPP手機(jī)程序）使用，應(yīng)用切換放置后臺運(yùn)行了。
獲取二維碼中攜帶的參數(shù)
在 onLanuch 中，在 options.query 中獲取到二維碼的參數(shù)。二維碼中獲取的參數(shù)為 url + 小程序頁面 + 具體參數(shù)，拼接而成的字符串，具體可以通過在字符串中截取，得到具體需要使用的參數(shù)。
onLaunch(options){
//獲取關(guān)聯(lián)普通鏈接二維碼的碼值（即二維碼地址），放到全局變量 qrCode中
if (options.query && options.query.qrCode) {
this.qrCode = options.query.qrCode;
}
}options.query的包含的參數(shù)有兩個
我的需求實(shí)現(xiàn)代碼片段
首先獲取二維碼中的數(shù)據(jù)
onLaunch(options) {
console.log('數(shù)據(jù)測試');
if (options.query && options.query.qrCode) {
/* console.log('小程序啟動時的參數(shù)') */
if(options.query.qrCode.indexOf('transfer')!=-1){
/* console.log('轉(zhuǎn)賬'); */
uni.setStorageSync('qrCodeData',options.query.qrCode)
}
}
},將從二維碼中讀取到的數(shù)據(jù)存儲到本地當(dāng)中，在功能目標(biāo)頁面可以通過在本地中獲取然后使用。
需求中的目標(biāo)頁面為 /pages/user/money/transfer ，在 transfer.vue 中獲取具體需要使用的參數(shù)。具體代碼如下
export default {
data() {
return {
urlData:{},
isFromApp:false
}
},
onShow() {
// #ifdef MP-ALIPAY
/* 在本地中拿到二維碼中的數(shù)據(jù) */
let qrCode = uni.getStorageSync('qrCodeData')
if (qrCode) {
/* 通過 this.getUrlParam 截取路徑中攜帶的參數(shù) */
this.getUrlParam(qrCode)
this.isFromApp=true
}
// #endif
this.shopsInfo()
},
methods: {
/* 獲取二維碼鏈接路徑中攜帶的參數(shù)中的參數(shù) */
getUrlParam(url) {
let params = url.split("?")[1].split("&");
params.map(v => (this.urlData[v.split("=")[0]] = v.split("=")[1]));
/* console.log(this.urlData,'拿到的二維碼中的參數(shù)'); */
},
}
}?代碼調(diào)試
一般情況下二維碼掃碼跳轉(zhuǎn)的都是線上已經(jīng)發(fā)布成功的小程序，在支付寶小程序中，可以通過聯(lián)調(diào)實(shí)現(xiàn)掃碼跳轉(zhuǎn)調(diào)試，并在控制臺中查看打印的參數(shù)。
首先在IDE中點(diǎn)擊預(yù)覽
注意：記得是預(yù)覽不是真機(jī)調(diào)試
?在手機(jī)中打開聯(lián)調(diào)
連接到手機(jī)后，在聯(lián)調(diào)設(shè)置中，開啟聯(lián)調(diào)掃碼版本。開啟后APP掃碼跳轉(zhuǎn)的就是這個版本的小程序。
?進(jìn)入小程序后，點(diǎn)擊小程序界面的右上角，安全膠囊的三個小圓點(diǎn)，進(jìn)入設(shè)置頁面。
?到這里之后，不需要將小程序發(fā)布到線上，就能實(shí)現(xiàn)APP掃碼后跳轉(zhuǎn)到小程序。（記得每次調(diào)整代碼重新保存運(yùn)行后，重新打開聯(lián)調(diào)設(shè)置，這樣才能跳轉(zhuǎn)到正確的版本）。
查看數(shù)據(jù)
掃碼后，跳轉(zhuǎn)到開啟聯(lián)調(diào)設(shè)置版本的小程序，然后在手機(jī)上開啟調(diào)試
?在圖中可以看到在App.vue中，最開始獲取到的二維碼中的數(shù)據(jù)，如同前邊所說，是由 url + 小程序功能頁面 + 參數(shù) 組成的字符串。我們可以在字符串中，截取出需要的參數(shù)
文章來源：http://www.zghlxwxcb.cn/news/detail-447236.html
?到這里就結(jié)束了，頭一次寫文檔，可能文章邏輯有點(diǎn)亂，廢話有點(diǎn)多，但還是希望對大家有一點(diǎn)點(diǎn)幫助(*￣︶￣)。文章來源地址http://www.zghlxwxcb.cn/news/detail-447236.html
到了這里，關(guān)于實(shí)現(xiàn)支付寶APP掃碼跳轉(zhuǎn)小程序并傳參的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
