扫描普通二维码跳转小程序

前言

在现有需求的驱动下,小程序生成的码有个数限制,不能满足的一些场景,这是就 需要手动生成普通二维码并且携带动态参数来跳转打开小程序实现后续功能。

1、微信小程序提供了这种功能,具体实现可以分三步

(1)在微信小程序后台配置好
(2)如何跳转
(3)代码中

二,小程序配置-开启普通链接二维码打开小程序功能

1、登录 微信小程序公众平台,左边菜单列表里面找到 开发 选项,点击下面的 开发管理 ,右边内容区会显示和开发管理相关的设置

2、点击 开发设置 ,页面拉到下方,找到 扫普通链接二维码打开小程序,这里就是添加二维码跳转规则的地方。每个小程序可以添加100个二维码地址,每个月可以发布100次

配置二维码规则(很重要!!!)

规则:

  1. 首先在这里选择对应的 协议类型选择大小写

  2. 填写二维码规则:

    1. 二维码规则的域名须通过ICP备案的验证。
    2. 支持 httphttpsftp开头的链接(如:http://wx.qq.comhttps://wx.qq.com/mp/https://wx.qq.com/mp?id=123)。
    3. 一个小程序帐号可配置不多于10个二维码前缀规则。
  3. 填写前缀占用规则:选择是否独占符合二维码前缀匹配规则的所有子规则

    如选择占用,则其他帐号不可申请使用满足该前缀匹配规则的其他子规则。

  4. 向服务器添加校验文件:

    下载随机校验文件,并将文件上传至服务器指定位置的目录下,方可通过所属权校验。

    验证文件放置规则: 放置于URL中声明的最后一级子目录下,若无子目录,则放置于host所属服务器的顶层目录下。请根据页面提示将验证文件放置在指定的目录下。

  5. 设置小程序功能页面:

    配置扫描二维码后打开的小程序功能页面路径,如:pages/index/index

  6. 设置测试范围:

    开发者可根据开发进度选择在开发版/体验版/线上版本测试"普通二维码跳转小程序"的功能。

  7. 设置测试链接(选填):

    填写符合二维码前缀匹配规则的二维码完整链接用于测试,如包括参数,请完整填写。

    一个规则可以填写不多于5个测试链接,可多次修改。若二维码与测试链接匹配,且用户微信号是小程序指定的管理员/开发者/体验者,将打开指定版本的小程序。

配置例子

配置完成后,生成一个我们在上面配置的测试链接的二维码

你可以将测试链接复制下来,随便找到一个二维码生成工具网站,生成二维码,以便下面的测试

在这里我用 草料二维码生成器 简单生成一个二维码:

  1. 用户可以通过微信 "扫一扫" ,扫描该二维码,就会跳到小程序的 对应的功能页面

  2. onLoad 中解析 options.q 处理拿到的参数,就可以进行后续的逻辑操作了。

    javascript 复制代码
    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
          })
        }
    }

    将拿到的参数提取成对象的工具类 uril.js

javascript 复制代码
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
}

如果有问题的话可以使用AI 检查前端获取参数方式,还有跳转的路径

本文记录自己操作的流程怕忘记来,借鉴的博主链接有

https://blog.csdn.net/zhangjunli/article/details/113617078

https://www.cnblogs.com/zaijin-yang/p/17419753.html

https://blog.csdn.net/zuowentao666/article/details/133903679

相关推荐
CHU7290352 小时前
以安心托付,换无忧时光:宠物寄养小程序功能浅析
小程序·宠物
卓越软件开发2 小时前
毕设全栈开发一条龙:Java/SpringBoot/Vue/ 小程序 / Python / 安卓 / AI 图像识别 人脸检测 车牌识别 YOLO
开发语言·spring boot·python·yolo·小程序·毕业设计·课程设计
Greg_Zhong2 小时前
微信小程序滑动控制自定义标题显隐操作
小程序
吴声子夜歌1 天前
小程序——组件一
小程序
object not found1 天前
微信小程序审核机制解析(2026 实践向总结)
微信小程序·小程序
吴声子夜歌1 天前
小程序——组件二
小程序
蓝黑20203 天前
从经纬度获取地理信息以及从地名获取经纬度
小程序
吴声子夜歌3 天前
小程序——逻辑层
小程序
花木偶3 天前
小迪网安:APP攻防-Day1
安全·小程序