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

前言

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

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

相关推荐
CRMEB系统商城12 小时前
CRMEB多商户系统(Java)v2.3公测版发布
java·开发语言·人工智能·小程序·开源·php
嫂子的姐夫21 小时前
050-wx小程序合肥住房
爬虫·python·小程序·逆向
Geek_Vison1 天前
政务一网通APP如何引入AI能力,通过一个AI助手就能够调用所有的功能,实现对话即办事
人工智能·ai·小程序·uni-app·小程序容器
黄华SJ520it1 天前
跨境分销小程序:全球市场新机遇
小程序·系统开发
爱分享的小诺1 天前
微信小程序2.0人脸审核,1.0升级到2.0
微信小程序·小程序
打瞌睡的朱尤1 天前
微信小程序(黑马)4-5
微信小程序·小程序
海兰2 天前
【小程序】基于 AI 大语言模型驱动的中国古典诗词 Web 应用详细设计指南
人工智能·语言模型·小程序
博客zhu虎康2 天前
小程序:UGC自定义发布内容接入微信公众平台内容安全API(imgSecCheck、msgSecCheck、mediaCheckAsync)
安全·小程序·微信公众平台
博客zhu虎康3 天前
小程序:解决小程序发布上线后无分享功能
小程序
tuanyuan99o3 天前
2026商城小程序的安全怎么保障?防止黑客攻击和数据泄露
安全·小程序