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

前言

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

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

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

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

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

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

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

规则:

  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. 设置测试范围:

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

  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

相关推荐
andrsted2 小时前
练题簿在线免费刷题:选择、填空、简答与排序,多种题型练出不同的掌握程度
学习·微信小程序·小程序·学习方法·刷题
长沙三为智能科技11 小时前
家政小程序门店运营模块设计:会员、下单、派单、结算四段链路的落地拆解
python·小程序·内容运营
weixin_1772972206912 小时前
回收小程序做自营还是撮合?先看你手里有什么
小程序
andrsted13 小时前
练题簿在线免费刷题:Word、PDF 导题与预览补全,把现成资料变成可练习题库
微信小程序·小程序·pdf·word·学习方法·刷题
AI行业应用研究13 小时前
会务信息载体的演进:纸质、PDF 与结构化数据源的分发成本与版本一致性
大数据·人工智能·安全·小程序·架构·pdf
Geek_Vison13 小时前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器
FX1317887KP_1 天前
从KET到PET口语进阶:词汇量翻倍后,口语如何跟上?
小程序·ket口语·pet口语·fce备考·剑桥英语
m0_587383001 天前
工业场景设备维修维护实战技巧 全流程标准化落地与常见问题排查指南
java·spring·小程序·架构·需求分析
m0_587383002 天前
深圳 24 小时自助健身房系统软件开发实战指南与案例解析
java·spring boot·小程序·架构·需求分析