普通链接二维码打开小程序实现动态传递参数

Bertha 。 2022-10-27 05:26 1232阅读 0赞

### 目录 ###

*  前言
 *  一、官方文档
 *  二、开启普通链接二维码打开小程序功能
 *  三、配置流程
 *  四、配置实例
 *  五、踩坑记录
 *   *   *  1. 扫码打开小程序出现 "页面不存在"
         *  2. 测试版本需要注意的几个点
 *  六、总结

--------------------

# 前言 #

在现有需求的驱动下， 需要手动生成普通二维码并且携带动态参数来跳转打开小程序实现后续功能，本文章主要用于记录如何配置普通链接二维码打开小程序和配置过程中踩过的坑。

# 一、官方文档 #

[扫码打开小程序接入指南][Link 1]

# 二、开启普通链接二维码打开小程序功能 #

1.  登录 [微信小程序公众平台][Link 2]，左边菜单列表里面找到 **开发** 选项，点击下面的 **开发管理** ，右边内容区会显示和开发管理相关的设置。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 1]
2.  点击 **开发设置**，页面拉到下方，找到 **扫普通链接二维码打开小程序**，这里就是添加二维码跳转规则的地方。每个小程序可以添加100个二维码地址，每个月可以发布100次。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 2]
3.  点击 **添加** 按钮，进入 **配置普通链接二维码规则** 页面。进行相应配置。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 3]

# 三、配置流程 #

1.  首先在这里选择对应的 **协议类型** 和 **选择大小写**
2.  填写二维码规则：
    
    1.  二维码规则的域名须通过`ICP`备案的验证。
    2.  支持 `http`、`https`、`ftp`开头的链接（如：`http://wx.qq.com`、`https://wx.qq.com/mp/`、`https://wx.qq.com/mp?id=123`）。
    3.  一个小程序帐号可配置不多于10个二维码前缀规则。
3.  填写前缀占用规则：选择是否独占符合二维码前缀匹配规则的所有子规则  
    如选择占用，则其他帐号不可申请使用满足该前缀匹配规则的其他子规则。
4.  向服务器添加校验文件：
    
    下载随机校验文件，并将文件上传至服务器指定位置的目录下，方可通过所属权校验。
    
    验证文件放置规则： 放置于URL中声明的最后一级子目录下，若无子目录，则放置于host所属服务器的顶层目录下。请根据页面提示将验证文件放置在指定的目录下。
5.  设置小程序功能页面：  
    配置扫描二维码后打开的小程序功能页面路径，如：`pages/index/index` 。
6.  设置测试范围：  
    开发者可根据开发进度选择在开发版/体验版/线上版本测试“普通二维码跳转小程序”的功能。  
    ![在这里插入图片描述][20210114151400540.png]
7.  设置测试链接(选填)：  
    填写符合二维码前缀匹配规则的二维码完整链接用于测试，如包括参数，请完整填写。
    
    一个规则可以填写不多于5个测试链接，可多次修改。若二维码与测试链接匹配，且用户微信号是小程序指定的管理员/开发者/体验者，将打开指定版本的小程序。

# 四、配置实例 #

1.  在后台配置一个普通链接二维码规则  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 4]
2.  配置完成后，生成一个我们在上面配置的测试链接的二维码  
    在这里我用 [草料二维码生成器][Link 3] 简单生成一个二维码：  
    ![在这里插入图片描述][20210114152409186.png]
3.  用户可以通过微信 “扫一扫” ，扫描该二维码，就会跳到小程序的 对应的功能页面
4.  在 `onLoad` 中解析 `options.q` 处理拿到的参数，就可以进行后续的逻辑操作了。
    
        onLoad: function(options) { 
            if (options.hasOwnProperty('q') && options.q) { 
              // 通过下面这步解码，可以拿到url的值
              const url = decodeURIComponent(options.q)
              // 对url中携带的参数提取处理
              const obj = util.urlToObj(url)
              app.globalData.obj = obj
              this.setData({ 
                obj: obj
              })
            }
        }
        
              
               
              
               
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
    
    将拿到的参数提取成对象的工具类 `uril.js`：
    
        const urlToObj = function(url) { 
          let obj = { }
          let str = url.slice(url.indexOf('?') + 1)
          let arr = str.split('&')
          for (let j = arr.length, i = 0; i < j; i++) { 
            let arr_temp = arr[i].split('=')
            obj[arr_temp[0]] = arr_temp[1]
          }
          return obj
        }
        module.exports = { 
          urlToObj: urlToObj
        }
        
              
               
              
               
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13

# 五、踩坑记录 #

### 1. 扫码打开小程序出现 “页面不存在” ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 5]

这个问题纠结了我好久，最后又仔细阅读了一下官方提供的文档，将这个问题解决了。发现还是因为自己阅读文档不仔细造成的，大家只要按照上面的配置实例截图来配置，基本上就是没问题的。这里需要注意的是设置的二维码规则，大家可以注意一下。

### 2. 测试版本需要注意的几个点 ###

1.  测试版本不需要发布也是可以进行测试的；
2.  测试阶段不发布，**只能扫描测试链接中设置的地址中的二维码**，其他的就算符合规范也不可以的。
3.  如果是要动态匹配参数，那么动态部分必定是 **/** 后面的字符串
4.  如果是要动态匹配参数，那么提交的地址最后一定带 **/**
5.  提交的规则地址对应的项目路径下必须有验证文件，所以**不建议设置过长的规则路径**

# 六、总结 #

其实扫普通链接二维码打开小程序的配置和使用还是比较简单的，应用场景也是比较多的，只不过第一次配置的时候还是需要细心一点的，避免多次重复操作。

相信大家都可以完美解决掉所有问题，加油！！

[Link 1]: https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html
[Link 2]: https://mp.weixin.qq.com/wxamp/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70]: /images/20221024/29e9f879467946079c2abc10479f2d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 1]: /images/20221024/c6ea7cdc626642be8b64eb269ea49d0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 2]: /images/20221024/8925bebbf6014a728e2a76b9373d8a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 3]: /images/20221024/0554119080394519bc850b67578e1e81.png
[20210114151400540.png]: /images/20221024/dfa0843f852747d2aac92cc492512d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 4]: /images/20221024/a20f443045e84d438ec941336da1f101.png
[Link 3]: https://cli.im/
[20210114152409186.png]: /images/20221024/e43c7baa6b064b4c94ef0ad2964e5dfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hIX2ppbmc_size_16_color_FFFFFF_t_70 5]: /images/20221024/b658850285a74748a92e3c126e659faf.png