小程序扫描普通链接二维码跳转小程序指定界面方法

谁践踏了优雅 2022-11-13 02:00 253阅读 0赞

微信官方文档[https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html][https_developers.weixin.qq.com_miniprogram_introduction_qrcode.html]

看了官方文档之后，还是存在很多困惑，微信小程序是托管到微信服务器上的，要想扫描普通链接跳转指定界面，首先要知道微信把小程序放的服务器的访问路径，这些最初想法，可是看微信官方文档，感觉不是我想的这样的

![d8a4b3978eff1304fa04b6530a1cd168.png][]

文档上：“二维码规则的域名须通过ICP备案的验证。”如果是微信的服务器，那他们就不必这么写了，

可是小程序是托管微信服务器上的，为什么扫码自己服务器上的url能跳转呢？困惑反倒是多了，然后各种查资料，最后还是在微信官方文档上找到答案了

![c1563fb6ad025c5256dc56062501a462.png][]

原来是这样！恍然大悟！微信会扫描所有自己配置的url，如果匹配上了，就跳转至指定界面，还有个前提，小程序必须先发布代码，才可以。

![5c0c159d10466ab39c0a04e0bf2a3bfd.png][]

下面记录一下详情：

1.二维码规则，这里需要下载微信提供的验证文件，放到指定目录，验证不过会有提示，验证过了如图所示，配置几层目录根据自己的需求而定，上图这个：https://www.aaa.com/a/b/c/ 验证文件放置到c目录同层

2.测试链接，这里的url就是扫码之后，跳转到你指定界面里，可以获取到你此处配置这个完整的url包括参数，当然，这个参数是一个动态参数，配置的时候是写死了一个，你的应用中，自己动态生成这个参数，  
https://www.aaa.com/a/b/c/d/service?flag=123 目录a/b/c/d/是在你的服务器上真实存在的目录，在d目录里面有个脚本service，当然目录名称脚本名称换成你自己的，flag这个key值不能改变，123换成你的实际生成的动态参数

3.在app.js中这样获取参数  
util.js  
/\*\*  
\* 获取url参数  
\*/

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>let getQueryString = </code><code>function</code> <code>(url,name) { </code> <code>&nbsp;</code><code>console.log(</code><code>"url = "</code><code>+url)</code> <code>&nbsp;</code><code>console.log(</code><code>"name = "</code> <code>+ name)</code> <code>&nbsp;</code><code>var</code> <code>reg = </code><code>new</code> <code>RegExp(</code><code>'(^|&amp;|/?)'</code> <code>+ name + </code><code>'=([^&amp;|/?]*)(&amp;|/?|$)'</code><code>, </code><code>'i'</code><code>)</code> <code>&nbsp;</code><code>var</code> <code>r = url.substr(1).match(reg) </code> <code>&nbsp;</code><code>if</code> <code>(r != </code><code>null</code><code>) { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"r = "</code> <code>+ r)</code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"r[2] = "</code> <code>+ r[2])</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>r[2]</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return</code> <code>null</code><code>;</code> <code>}</code> <code>module.exports = { </code> <code>&nbsp;</code><code>getQueryString: getQueryString,</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

//app.js文件如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>var</code> <code>utils = require(</code><code>'./utils/util'</code><code>)</code> &nbsp; <code>App({ </code> <code>&nbsp;</code><code>onLaunch: </code><code>function</code> <code>(options) { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"全局onLaunch options=="</code> <code>+ JSON.stringify(options))</code> <code>&nbsp;&nbsp;</code><code>let q = decodeURIComponent(options.query.q)</code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(q){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"全局onLaunch onload url="</code> <code>+ q)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"全局onLaunch onload 参数 flag="</code> <code>+ utils.getQueryString(q, </code><code>'flag'</code><code>))</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;</code><code>}</code> &nbsp; <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

在其它的界面中的js脚本中这样获取参数

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> <code>Page({ </code> &nbsp; <code>&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;</code><code>* 页面的初始数据</code> <code>&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;</code><code>data: { </code> &nbsp; <code>&nbsp;</code><code>},</code> &nbsp; <code>&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;</code><code>* 生命周期函数--监听页面加载</code> <code>&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;</code><code>onLoad: </code><code>function</code> <code>(options) { </code> <code>&nbsp;&nbsp;</code><code>console.log(</code><code>"index 生命周期 onload"</code><code>+JSON.stringify(options))</code> <code>&nbsp;&nbsp;</code><code>//在此函数中获取扫描普通链接二维码参数</code> <code>&nbsp;&nbsp;</code><code>let q = decodeURIComponent(options.q)</code> <code>&nbsp;&nbsp;</code><code>if</code><code>(q){ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"index 生命周期 onload url="</code> <code>+ q)</code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"index 生命周期 onload 参数 flag="</code> <code>+ utils.getQueryString(q, </code><code>'flag'</code><code>))</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

以上所述是小编给大家介绍的小程序扫描普通链接二维码跳转小程序指定界面详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

[https_developers.weixin.qq.com_miniprogram_introduction_qrcode.html]: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html
[d8a4b3978eff1304fa04b6530a1cd168.png]: /images/20221022/c492005e144e4987813808907ff806e4.png
[c1563fb6ad025c5256dc56062501a462.png]: /images/20221022/e171caa1bd8c4f36a25b68c48de1db0f.png
[5c0c159d10466ab39c0a04e0bf2a3bfd.png]: /images/20221022/b6f44f6d5bd94ebd9a259ea20774dd0e.png