设置
先按照官方文档走一遍设置流程扫普通链接二维码打开小程序
阻塞点
链接二维码的规则
这里主要讲一下怎么设置链接二维码的规则
二维码跳转规则
注意:从2017年5月开始,微信客户端支持二维码规则根据“子路径匹配”。如原有二维码链接为 http://www.qq.com/a/123456 ,其中12345为业务参数,则可配置规则 http://www.qq.com/a/ 实现扫码打开小程序。微信客户端扫码将按以下匹配规则控制跳转:
二维码链接的协议、域名与已配置的二维码规则一致。
二维码链接属于后台配置的二维码规则的子路径。(如需支持子路径匹配,请确认后台配置的二维码规则以/结尾)
如果二维码规则包含参数,链接?后为参数部分,参数要求前缀匹配。
如果不带参数
- 指定某个页面,就直接把页面路径配置上去就行。比如说我们要访问的页面地址是
http://www.qq.com/a
,那就直接配置http://www.qq.com/a
。 - 如果说我们想直接匹配
http://www.qq.com
下的所有页面(不带参数),则设置为http://www.qq.com/
,参考规则-如需支持子路径匹配,请确认后台配置的二维码规则以/结尾
- 指定某个页面,就直接把页面路径配置上去就行。比如说我们要访问的页面地址是
- 带参数
实际项目中,我们往往会在二维码的链接上带各种各样的参数,有时候还会是动态的,假如说我们现在二维码上的链接是http://www.qq.com/mypath?a=1&b=2&other=else
,并且这个参数是动态的,就是a/b/other的值会变化。
那么根据前缀匹配规则,那就可以设置成http://www.qq.com/mypath?
。
这样不管实际上链接后面带什么参数都可以匹配上我们在后台设置的二维码规则了!
这里顺便看下我们项目中的实际应用
<template>
<-- 所有webview都共用这个页面,改变src的值就行 -->
<web-view v-if="pageUrl" :src="pageUrl"></web-view>
</template>
<script>
export default {
data() {
return {
pageUrl: null,
params: {}
};
},
onLoad(query) {
this.params = query
},
onShow() {
this.init(this.params)
},
methods: {
async init({ q }) {
if(this.pageUrl) { // 刷新页面
this.pageUrl = ''
await new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 100)
})
}
const token = uni.getStorageSync("USER_TOKEN"); // 用户token
if(q) {
const urlPath = decodeURIComponent(q) // 获取到二维码原始链接内容
const flag = /\?\w+=\w+/g.test(urlPath) ? "&" : "?";
this.pageUrl = `${urlPath}${flag}&token=${token}`
console.log("urlPath=======", this.pageUrl);
return
}
}
}
};
</script>
如何测试
在后台设置好了二维码规则之后,怎么测试呢?
填写测试链接
我们设置二维码规则的时候,会要求我们填写测试链接!之前不知道这个填写了有什么用,原来就是用来测试的orz。这个填写的测试链接,就是可以用来测试的二维码链接。也就是你扫的二维码的链接内容必须是这里填写的测试链接,我们才能调起体验版(如果选择了测试范围是体验版的话)的小程序,否则会直接调起线上版的小程序。
不知道是不是我们理解不正确,如果真是这样子的话好不方便啊,感觉每测试一个二维码,就得把二维码的链接填写到后台的这个测试链接上去,不然调起的就是线上版小程序。这里如果理解不对,还望知道的大佬告知下,谢谢!- 发布规则
发布上面填写的一系列设置的规则。上面如果我们选择了测试范围是体验版,那我们就要发布。 - 提交体验版
就可以测试啦。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。