小程序页面 onLoad 生命周期中解析的 URL 参数对象 options 中,没有严格遵循规范进行解析,导致解析结果有误!
如导航到的页面路径为:/pages/about/about?name=tesla&color&price=30,针对 ?name=tesla&color&price=30 这个查询参数,其中 color 参数只有 name 没有 value,且参数对中不包含 = 号,按照规范应当把 color 的值解析为空字符串,而小程序解析为字符串 "undefined"
- 当前小程序 onLoad 中的 options 为 { "name": "tesla", "color": "undefined", "price": "30" }
- 按照规范,预期 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:

看了下,是 navigateTo 等路由接口调用时对 url 做的处理有些问题,会使实际用于跳转的路径中的这种空值被替换为 undefined;我另外试了下几个不走路由接口的场景,从开发者工具的编译模式或者 onShareAppMessage 分享时填这个 query,是能正常解析到空 value 的
考虑到线上可能已经有小程序依赖这个行为运行,现在修这个 url 处理实际上是个有点危险的 breaking change 了,如果没有必要,我们可能倾向于不去改动这个行为;可以考虑用 &color=& 来规避
沒有接到 你 color的值
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 });
没理解,不按规范传,要按规范解析?