评论

小程序获取路由参数方法封装

小程序路由传参,多种场景参数处理封装

路由传参的几种场景:

1,小程序内普通跳转传参

直接获取

onLoad (options) {
  doSomething(options)
}

2,通过扫小程序码进入

文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

通过扫小程序进入的时候,参数会被放在options.scene里

onLoad (options) {
  doSomething(decodeURIComponent(options.scene));
}

3,扫普通链接二维码打开小程序

文档:https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E4%BA%8C%E7%BB%B4%E7%A0%81%E8%B7%B3%E8%BD%AC%E8%A7%84%E5%88%99

通过配置扫普通链接二维码打开小程序时,参数会被放在options.q里

onLoad (options) {
  doSomething(decodeURIComponent(options.q));
}

函数封装:

1,将params参数字符串转成对象返回

// 获取URL参数并转换成对象
const getQueryParams = (url) => {
  const sUrl = url.split('?');
  // 取最后一位,兼容全链接有?和纯参数无?
  const sParams = sUrl[sUrl.length - 1];
  const arr = sParams.split('&'); // ['a=1', 'b=2']
  const result = {};
  arr.forEach((item) => {
    const keyVal = item.split('=');
    // key值
    const key = keyVal.shift();
    // value值,兼容参数没encode时有=,例如'a=b=1' => [a, b, 1] => key: a,value: b=1
    const value = decodeURIComponent(keyVal.join('='));
    result[key] = value;
  })
  return result;
}

2,处理上述3种场景

const handleOptions = (options = {}, key) => {
  let params = JSON.parse(JSON.stringify(options));
  if (params.q || params.scene) {
    params = {
      ...params,
      ...getQueryParams(decodeURIComponent(params.q || params.scene)),
    }
  }
  if (key) {
    return params[key];
  } else {
    return params;
  }
}

3,使用

onLoad(options) {
 const params = handleOptions(options);
  doSomething(params);
// --------直接取某个key-------
  const id = handleOptions(options, id);
}
最后一次编辑于  2021-12-06  
点赞 2
收藏
评论

3 个评论

  • 派大星。
    派大星。
    2022-05-30

    怎么打印啊,我都打印不到


    2022-05-30
    赞同
    回复 1
    • 中式小面包
      中式小面包
      2022-05-30
      打印什么
      2022-05-30
      回复
  • Neo
    Neo
    2022-02-14

    学习了

    2022-02-14
    赞同
    回复
  • 詹伟杰
    詹伟杰
    2021-12-27

    学习了

    2021-12-27
    赞同
    回复
登录 后发表内容