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

前言

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

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

相关推荐
一木 之林1 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦1 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析
河北清兮网络科技1 天前
石家庄做一套企业知识库系统多少钱?2026 报价明细
小程序·短剧app·广告联盟
Ai-_Man1 天前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
微订校园外卖平台1 天前
新手做校园外卖平台:小程序启动顺序与订单链路验收
小程序·外卖系统·本地生活·微订
FX1317887KP_2 天前
KET口语Part 2看图对话怎么练?“观察—提问—回应”;三步法讲透
小程序·ket口语·pet口语·fce备考·剑桥英语
沃达德软件2 天前
智慧教育教学资源管理系统(PC端+微信小程序)
微信小程序·小程序
阿俊-全栈开发2 天前
LikeShop 小程序商城首页可配置弹窗的设计与实现(Java + uni-app)
小程序·状态模式·likeshop·likeshop开源商城
考拉讲支付3 天前
延迟分账 / 核销分账的技术实现方案:服务完成后再分钱,到底怎么设计?
大数据·运维·人工智能·微信小程序·小程序·系统架构
Newway3213 天前
便利店小程序商城如何打通总部、门店与会员
小程序·小程序商城·会员运营·连锁便利店·门店订货·o2o系统