摘要：微信小程序后台中有一个“扫普通链接二维码打开小程序”的设置。说人话就是：用户可以把某一个链接生成二维码，扫这个二维码后就能跳转到指定的小程序。虽然这个需求很人性化，配置起来也比较简单。但难的是扫码后会出现各种神奇的问题！例如：403白屏、开发码跳正式、undefined、页面不存在等

数了数，这是我的第45篇关于微信小程序的文章。没想到我已经踩过这么多坑和有过这么多的分享，有点儿不敢相信。想看往期文章的看官，可以猛戳链接→→→微信小程序。

一、起因

话说上周有个网友咨询我关于普通链接转二维码的问题。如下图↓↓↓

经过一番沟通和测试，顺利帮其解决了问题。

在解决问题的过程中，我发现这个需求在去年5月份就实现过，但当时我竟然没有写笔记！！！

如实说，我有些后悔。毕竟这次遇到同样的问题，又花费了一些时间和记忆搜索。

为了避免这种现象再发生，我打算写篇详细的笔记记录一下。

二、理解功能：扫普通链接二维码打开小程序

可能有些看官读到现在还不知道我在说些啥，说直白点儿。我有一个二维码，你用微信扫一扫来扫这个二维码，然后就可以访问对应的小程序了。

听起来是不是很像太阳码啊！？

确实很像，但两者还是有一些区别的。太阳码必须由后端生成，而这个普通链接转二维码，前端就可以搞定。

两者解码的参数也不一样。太阳码需要获取scene参数。详情见文章→→→uni-app跨端开发之生成小程序码和调试scene参数爬坑指南。后者需要获取q参数，后方会有提及。

三、功能实现

3.1、入口

先说下这个怎么找到这个入口吧。步骤如下：

1. 首先打开微信公众平台网站。网址是：https://mp.weixin.qq.com/
2. 扫码登录后，在左侧菜单中找到开发管理并点击进去；
3. 接着点击上面的开发设置
4. 页面往下拉，会看到扫普通链接二维码打开小程序，右侧有一个绿色的添加按钮。

完整流程见下图↓↓↓

现在我们便找到了入口。接下来点击绿色的添加按钮，就进入了添加规则页面。

在添加规则前，强烈建议看官先阅读一遍顶部的开发文档和二维码规则，避免等会儿出现各种问题。如下图↓↓↓

说个小秘密，微信文档你尽管看，如果测试期间不出现问题，算你牛逼。

3.2、添加一条规则

为了让看官更好的了解这个功能，我现在来创建一条规则。步骤如下：

1. “协议类型”和“选择大小写”均保持默认选项
2. “二维码规则”：填写自己的URL，比如a.com/demo/
3. “前缀占用规则”：选择“不占用”
4. “校验文件”：下载校验文件并上传到自己的域名所在服务器上，注意是放在demo目录下。官方释义：放置于 URL 中声明的最后一级子目录下，若无子目录，则放置于 host 所属服务器的顶层目录下
5. “小程序功能页面”：此处填写pages/index/index
6. “测试范围”：开发阶段推荐选择“开发版”。
7. “测试链接(选填)”：可以不填。如果填写的话，可以写a.com/demo/?id=1
8. 点击“保存”按钮，添加成功后跳转到列表页。

上述步骤如下图↓↓↓

此时“扫普通链接二维码打开小程序”列表中会多出一条待发布的记录，千万不要点击发布！如图↓↓↓

3.3、生成二维码并扫码测试

现在，我们复制刚才添加的测试链接地址https://a.com/demo/?id=1并生成二维码。这里推荐草料二维码，网址：https://cli.im/url。

点击进去后，粘贴网址，点击绿色的“生成二维码”，此时右侧就会出现一个二维码。如图↓↓↓

用微信进行扫码，如果能成功打开微信小程序，则表示规则生效。

四、经常出现的几个神奇问题

应该有不少看官都遇到过，但又无法解释原因，我只能说是微信小程序的问题。

4.1、扫码后出现403 Forbidden

如果扫码后没有跳转微信小程序而是出现403 Forbidden错误页，也有可以是别的错误状态。此时大概率是测试链接未配置

举些例子

测试链接	已配置	能否打开小程序
https://a.com/demo/?id=1	是	是
https://a.com/demo/?id=2	否	否
https://a.com/demo/?id=1&t=123	否	否
https://a.com/demo/?id=10	否	否
https://a.com/demo/?t=1&id=1	否	否

如果配置正确，但还是无法打开小程序，那就是微信的问题。

别笑，我在写这篇笔记的时候真的遇到过。

用开发组同事的手机扫码，拥有同样的开发者权限、先扫微信开发者工具中的预览码、再扫同一个普通二维码、微信版本号相同，有的能打开小程序，有的打不开。

我自闭了~

4.2、扫码后打开的小程序不是最新的

出现这种情况是因为在扫码前访问过旧的小程序，删除后重新扫新码有可能会正确。具体步骤如下：

1. 先删除微信中的开发版小程序
2. 打开微信开发者工具，重新生成预览二维码
3. 扫微信开发工具生成的二维码
4. 再扫网址二维码

为了确保语言的准确性，注意我上面用的是有可能哈，毕竟还真有概率出现意外情况。

还是用开发组同事的手机，有的就行，有的就是不行，很无语！

4.3、扫码后跳到了线上已发版的小程序

这是因为看官在列表中点击了发布按钮。如下图↓↓↓

但此时同样会有几种情况出现：

1. 用户A非开发者，在扫码前没有访问过小程序，也没有扫过微信开发者工具中的预览码，此时会跳转到线上已发版的小程序。
2. 用户B是开发者，在扫码前访问过小程序，也扫过预览码，此时有可能会跳转到线上已发版的小程序。
3. 用户B是开发者，在扫码前访问过小程序，也扫过预览码，此时有可能会跳转到开发版小程序

至于为什么会出现乱跳的情况，我无法解释，只能把锅甩给微信了。

有人可能会去查微信开放文档中的说明。微信开放文档？我信你个鬼！

4.4、二维码内容获取

通过监听onLoad事件中携带的q参数，便可获取到二维码中参数，戳我访问微信官方文档。

Page({
  onLoad(query) {
    const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
    const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳
  }
})

像我们的小程序使用了uni-simple-router这个插件（强烈推荐给各位看官，戳我访问插件），通过$Route便能获取到参数，而且还自动解码，超级方便！

<script>
export default {
  onLoad() {
    console.log('this.$Route.query', this.$Route.query)
  }, // 生命周期回调—监听页面加载
}
</script>

4.5、TypeError: Cannot read property 'q' of undefined

出现这个错误的原因是因为4.4小节这里我们没有做兼容性处理。

来分析下出错的原因。onLoad(query){}事件中的query为页面携带的参数，如果访问这个页面时没有带参数，此时的query值为undefined，下面的query.q自然就会报错了。

解决方法也很简单，给它赋一个默认的初始值即可。相关代码如下↓↓↓

Page({
  onLoad(query = {}) { // 这一行很关键！！！
    ...... // 此处代码无变化
  }
})

现在，我们的代码便不会出错了。

4.6、扫码后“页面不存在”

扫码后能打开小程序，但提示页面不存在。如下图↓↓↓

这种情况是因为已打开的小程序中不存在二维码中配置的路径。

产生的原因一般是：打开的小程序版本不对。

解决的办法也很简单，检查一下二维码中的路径是否存在于对应的小程序中，如果不存在，更换正确即可。

五、最后

面对各种神奇的问题，我好心累！

少测试，会少遇到些bug。测的越多，会越懵逼！因为预期结果出现了偏差，关键是部分手机是符合预期结果的。

关于上面的4.1~4.3这3个神奇问题，微信论坛中也有人时不时在反馈。

现在，我只有一个小小的请求：“微信大大，行行好吧！此处省略4个字。”

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2022-09-01/scan-the-QRcode-to-open-the-applet.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。