在小程式中開啟普通二維碼
轉載註明出處：www.xdxxdxxdx.com，或者加入java學習群學習討論：481845043
有時候我們先做好了微信站，並且印刷好了一些宣傳材料，宣傳材料上的二維碼為原來微信站的二維碼，但是我們現在要主推小程式了，所以我們希望通過這些普通的二維碼也能進入小程式的頁面，這時候，我們就需要學習本篇所講的知識了。
以下就來介紹如何通過普通二維碼進入小程式頁面。
一.到小程式後臺配置頁面路徑規則
因為普通的二維碼訪問的是普通的網頁路徑，怎麼讓微信識別到這是一個小程式的路徑而不是普通的頁面路徑呢？這就需要到小程式後臺去配置路徑規則。舉個例子來說：我用www.xdxxdxxdx.com/article/23生成了一個二維碼，很顯然這是一個網站的二維碼，但是我想要微信掃描這個二維碼的時候，跳轉到小程式的page/index/index。這時候就需要配置路徑規則將二者繫結起來。
小程式後臺--》設定--》開發設定--》掃普通連結二維碼開啟小程式，就可以新增普通連結路徑與小程式路徑的對應關係，如下圖所示。
上述我們將www.wonyen.com/xcxxxxx這個路徑規則與pages/index/index關聯起來了，所以當我們掃普通碼的時候，只要這個碼是以www.wonyen.com/xcxxxxx這個路徑開頭的二維碼，比如www.wonyen.com/xcxxxxx?buy=1166。微信都會引導到小程式的pages/index/index頁面來，然後我們再在這個頁面的js程式碼中去進行分發。把所有的訪問都引導到首頁，然後再進行分發，可以避免一些不必要的麻煩事情發生。
二.編寫分發程式碼
先看程式碼，程式碼如下：
const app = getApp();
const prototype = require(
'../utils/prototype.js'
);
const dictionaries = {
buy:
'/pages/realCommodity/realCommodityDetail?realCommodityId='
,
shop:
'/pages/shop/index?merchantId='
,
orderList:
'/pages/orderList/orderList'
,
realOrderId:
'/pages/orderDetial/orderDetial?realOrderId='
}
const tabPage = [
'shoppingCart'
,
'orderList'
,
'userCenter'
]
const routeResult =
function
(parameter) {
if
(parameter.q) {
//解碼並獲取到引數的陣列
const pmArray = decodeURIComponent(parameter.q).replace(app.domain +
'xcxRoute?'
,
''
).split(
'='
);
if
(dictionaries[pmArray[0]]) {
const result = {};
result.url = dictionaries[pmArray[0]] + (pmArray[1] ? pmArray[1] :
''
);
result.isTabPage = prototype.inArray(tabPage, pmArray[0]);
return
result
}
}
return
false
;
}
module.exports = {
routeResult: routeResult
}
|
我們將路由分發的程式碼寫成一個模組，以供其他頁面呼叫。我們用了資料字典將普通的二維碼連結跟小程式的連結一一對應，比如buy對應的是/pages/realCommodity/realCommodityDetail?realCommodityId=。當有一個連結來的時候，我們判斷其parameter.q是否存在，存在則表明是普通的二維碼連結，我們需要根據資料字典找出其實際的小程式路徑，並且判斷其是否是tab頁。並存入到返回值中。
三.呼叫
在index.js裡面，我們先引入上述模組，然後在頁面載入的時候判斷連結是否是普通連結，若普通連結則呼叫上述模組來進行分發。
const routeDictionary = require(app.resource.util.routeDictionary);
const routeUrl = routeDictionary.routeResult(options);
//如果是通過掃普通二維碼過來的，在這裡進行分發轉跳
if
(routeUrl) {
if
(routeUrl.isTabPage) {
wx.switchTab({
url: routeUrl.url,
})
}
else
{
wx.navigateTo({
url: routeUrl.url,
})
}
}