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

前言

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

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

相关推荐
低代码布道师1 天前
微搭低代码MBA 培训管理系统实战 25——小程序用户登录与账号绑定
低代码·小程序
清风絮柳2 天前
65.少儿英语微信小程序
vue.js·spring boot·微信小程序·小程序·毕业设计
tjsoft2 天前
unigui开发微信小程序
微信小程序·小程序
m0_462803883 天前
“趣味运动会记分”功能教学指南
小程序
网络安全学习库3 天前
很喜欢Vue,但还是选择了React: AI时代的新考量
vue.js·人工智能·react.js·小程序·aigc·产品经理·ai编程
叱咤少帅(少帅)3 天前
Uniapp开发pc端,小程序和APK
小程序·uni-app
2501_915918414 天前
iOS性能测试工具 Instruments、Keymob的使用方法 不局限 FPS
android·ios·小程序·https·uni-app·iphone·webview
Chengbei114 天前
利用 LibreNMS snmpget 配置篡改实现 RCE 的完整攻击链
人工智能·web安全·网络安全·小程序·系统安全
苏灵凯4 天前
智能环境监测终端全栈设计:从单片机到微信小程序,手把手搞定!
单片机·嵌入式硬件·mcu·物联网·微信小程序·小程序·蓝牙模块
nhc0884 天前
贵阳纳海川科技有限公司・货运物流行业解决方案
科技·微信小程序·小程序·软件开发·小程序开发