转载注明出处: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,
})
}
}