uniapp微信小程序开发踩坑日记:获取带参小程序码中的参数(获取地址栏参数)

一、三种小程序码

微信提供了三种生成小程序码的接口

第一种小程序码是有限制的,只能在微信内打开,不能长期保存和分享

第二种小程序码可以保存到手机相册,也可以分享给其他人,适合在需要长期保存或分享的场景下使用

第三种小程序码是一种带参数的小程序码,可以包含额外的信息,比如推广参数或场景信息

今天我们要介绍的就是获取带参小程序码中的参数

二、参数获取

带参数的小程序码除了携带扫码后跳转到的页面信息外,还可以携带由程序员设置的额外参数

额外参数一般会拼接在目标页面(即扫码后跳转的页面)的地址栏上,所以获取参数就相当于获取地址栏的参数值

假设扫码后跳转的页面路径为:pages/invite?scene=teamId=1&secret=SMhbE,下面是在目标页面获取地址栏参数的代码及注释

import { onLoad } from "@dcloudio/uni-app";

// 在页面的生命周期函数中获取页面地址栏参数(获取小程序码场景值)
onLoad(() => {
  // 获取当前页面栈
  const pages = getCurrentPages();
  // 获取当前页面对象
  const currentPage = pages[pages.length - 1];

    // 解码获取到的scene参数值:teamId=1&secret=SMhbE
    const scene = decodeURIComponent(currentPage.options.scene);

    // 进一步解析参数
    const params = {};
    // 将参数字符串按'&'分割成数组,然后对每一项进行处理
    scene.split('&').forEach(item => {
      // 对每一项按'='分割成key和value,并存入params对象中
      // 解析后的 params:{
      //   secret: "SMhbE"
      //   teamId: "1"
      // }
      const [key, value] = item.split('=');
      params[key] = value;
    });

    // 获取团队ID和密钥,如果参数中不存在对应的值,则使用空字符串代替
    const teamId = params.teamId || ''; //团队ID
    const secret = params.secret || ''; //密钥
})

你可能感兴趣的:(小程序,uni-app,微信小程序)