收藏
回答

【Bug】页面 onLoad(options) 生命周期中解析当前URL参数 options 有误!

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 8.0.62 3.9.1

小程序页面 onLoad 生命周期中解析的 URL 参数对象 options 中,没有严格遵循规范进行解析,导致解析结果有误!

如导航到的页面路径为:/pages/about/about?name=tesla&color&price=30,针对 ?name=tesla&color&price=30 这个查询参数,其中 color 参数只有 name 没有 value,且参数对中不包含 = 号,按照规范应当把 color 的值解析为空字符串,而小程序解析为字符串 "undefined"

  1. 当前小程序 onLoad 中的 options 为 { "name": "tesla", "color": "undefined", "price": "30" }
  2. 按照规范,预期 options 应当为 { "name": "tesla", "color": "", "price": "30" }

这个错误会导致页面类似下面的条件分支执行错误:

if (!options.color) {
  // 由于color被解析为字符串 "undefined" 导致无法进入该条件分支
}


小程序解析结果截图:


希望官方能够按照 WHATWG URL Standard 规范进行URL参数的解析!

WHATWG URL Standard:https://url.spec.whatwg.org/#concept-urlencoded-parser

从我的测试结果来看,浏览器、Nodejs 都遵循了规范,对于查询参数中没有 = 号的查询参数解析为空字符串,以下是测试截图:

浏览器:

Nodejs:



回答关注问题邀请回答
收藏

3 个回答

  • 小程序技术专员-SgLy
    小程序技术专员-SgLy
    08-27

    看了下,是 navigateTo 等路由接口调用时对 url 做的处理有些问题,会使实际用于跳转的路径中的这种空值被替换为 undefined;我另外试了下几个不走路由接口的场景,从开发者工具的编译模式或者 onShareAppMessage 分享时填这个 query,是能正常解析到空 value 的

    考虑到线上可能已经有小程序依赖这个行为运行,现在修这个 url 处理实际上是个有点危险的 breaking change 了,如果没有必要,我们可能倾向于不去改动这个行为;可以考虑用 &color=& 来规避

    08-27
    有用
    回复
  • Addison Chen
    Addison Chen
    08-22

    沒有接到 你 color的值

    08-22
    有用
    回复 1
    • Addison Chen
      Addison Chen
      08-22
      function buildQuery(obj) {
        return Object.keys(obj)
          .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k] ?? '')}`)
          .join('&');
      }
      // 使用示例
      const params = { name: 'tesla', color: '', price: 30 };
      const url = '/pages/about/about?' + buildQuery(params);
      wx.navigateTo({ url });
      08-22
      回复
  • Mr.Zhao
    Mr.Zhao
    08-21

    没理解,不按规范传,要按规范解析?

    08-21
    有用
    回复 1
    • 北方
      北方
      08-22
      是的,因为小程序生成 options 干的是 parser 的活,应该按 parser 的规则进行
      08-22
      回复
登录 后发表内容