Merge pull request #2350 from didi/feat-router-lock-addpath-v2

优化onload返回参数

Author: hiyuki

docs-vitepress/api/composition-api.md

@@ -128,6 +128,67 @@ createComponent({
 `Function`
 
 小程序页面 onLoad 事件，监听页面加载。
+::: tip 注意
+在页面拼接参数时，不同平台对 URL 参数的处理方式存在差异：
+- **微信、QQ、字节跳动、RN**：参数透传，保持原始格式
+- **其他平台**：会自动对 encode 后的参数进行 decode
+
+为了提供统一的参数处理方式，`onLoad` 钩子额外提供了一个经过 encode 处理的参数对象，方便业务使用统一的参数格式，同时不影响各平台原有的参数返回。
+
+**微信、QQ、字节跳动、RN下的效果：**
+```js
+// A页面
+...
+createPage({
+  methods: {
+    jumpPage () {
+      mpx.navigateTo({
+        url: `./pages/test?name=${encodeURIComponent('我')}&encode=true`
+      })
+    }
+  }
+})
+...
+
+// test页面
+...
+createPage({
+  onLoad(rawQuery, decodedQuery) {
+    // rawQuery = {name: "%E6%88%91", encode: "true"}
+    // decodedQuery = {name: "我", encode: "true"}
+    ...
+  }
+})
+...
+```
+**其他平台的效果：**
+```js
+// A页面
+...
+createPage({
+  methods: {
+    jumpPage () {
+      mpx.navigateTo({
+        url: `./pages/test?name=${encodeURIComponent('我')}&encode=true`
+      })
+    }
+  }
+})
+...
+
+// test页面
+...
+createPage({
+  onLoad(rawQuery, decodedQuery) {
+    // rawQuery = {name: "我", encode: "true"}
+    // decodedQuery = {name: "我", encode: "true"}
+    ...
+  }
+})
+...
+```
+
+:::
 
 ### onShow
 `Function`

packages/api-proxy/src/platform/api/route/index.ios.js

@@ -43,7 +43,7 @@ function navigateTo (options = {}) {
     if (options.events) {
       eventChannel._addListeners(options.events)
     }
-    const { path, queryObj } = parseUrl(options.url)
+    const { path, queryObj } = parseUrl(options.url, true)
     const basePath = getBasePath(navigation)
     const finalPath = resolvePath(path, basePath).slice(1)
 
@@ -70,7 +70,7 @@ function redirectTo (options = {}) {
     return
   }
   if (navigation && navigationHelper) {
-    const { path, queryObj } = parseUrl(options.url)
+    const { path, queryObj } = parseUrl(options.url, true)
     const basePath = getBasePath(navigation)
     const finalPath = resolvePath(path, basePath).slice(1)
     navigation.replace(finalPath, queryObj)
@@ -120,7 +120,7 @@ function reLaunch (options = {}) {
     return
   }
   if (navigation && navigationHelper) {
-    const { path, queryObj } = parseUrl(options.url)
+    const { path, queryObj } = parseUrl(options.url, true)
     const basePath = getBasePath(navigation)
     const finalPath = resolvePath(path, basePath).slice(1)
     navigation.reset({

packages/core/src/platform/builtInMixins/pageStatusMixin.js

@@ -13,18 +13,18 @@ export default function pageStatusMixin (mixinType) {
       onResize (e) {
         this.__mpxProxy.callHook(ONRESIZE, [e])
       },
-      onLoad (query) {
-        if (__mpx_mode__ === 'wx') {
-          const loadParams = {}
-          // 此处单独处理微信与其他端保持一致，传入onload的参数都是经过decodeURIComponent处理过的
-          if (isObject(query)) {
-            for (const key in query) {
-              loadParams[key] = decodeURIComponent(query[key])
+      onLoad (rawQuery) {
+        if (__mpx_mode__ === 'wx' || __mpx_mode__ === 'qq' || __mpx_mode__ === 'tt') {
+          const decodedQuery = {}
+          // 处理以上平台直接透传encode的结果，给到onload第二个参数供开发者使用
+          if (isObject(rawQuery)) {
+            for (const key in rawQuery) {
+              decodedQuery[key] = decodeURIComponent(rawQuery[key])
             }
           }
-          this.__mpxProxy.callHook(ONLOAD, [loadParams])
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, decodedQuery])
         } else {
-          this.__mpxProxy.callHook(ONLOAD, [query])
+          this.__mpxProxy.callHook(ONLOAD, [rawQuery, rawQuery])
         }
       }
     }

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -314,7 +314,14 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   if (type === 'page') {
     const props = propsRef.current
-    proxy.callHook(ONLOAD, [props.route.params || {}])
+    const decodedQuery = {}
+    const rawQuery = props.route.params
+    if (isObject(rawQuery)) {
+      for (const key in rawQuery) {
+        decodedQuery[key] = decodeURIComponent(rawQuery[key])
+      }
+    }
+    proxy.callHook(ONLOAD, [rawQuery, decodedQuery])
   }
 
   Object.assign(proxy, {

packages/utils/src/url.js

@@ -80,7 +80,7 @@ const specialValues = {
   false: false
 }
 
-function parseQuery (query) {
+function parseQuery (query, noDecode = false) {
   if (query.slice(0, 1) !== '?') {
     throw new Error(
       "A valid query string passed to parseQuery should begin with '?'"
@@ -104,8 +104,8 @@ function parseQuery (query) {
     const idx = arg.indexOf('=')
 
     if (idx >= 0) {
-      let name = decode(arg.slice(0, idx))
-      let value = decode(arg.slice(idx + 1))
+      let name = noDecode ? arg.slice(0, idx) : decode(arg.slice(0, idx))
+      let value = noDecode ? arg.slice(idx + 1) : decode(arg.slice(idx + 1))
 
       // eslint-disable-next-line no-prototype-builtins
       if (specialValues.hasOwnProperty(value)) {
@@ -137,15 +137,15 @@ function parseQuery (query) {
   return result
 }
 
-function parseUrlQuery (url) {
+function parseUrlQuery (url, noDecode = false) {
   let path = url
   let query = ''
   const queryIndex = url.indexOf('?')
   if (queryIndex >= 0) {
     path = url.slice(0, queryIndex)
     query = url.slice(queryIndex)
   }
-  const queryObj = parseQuery(query || '?')
+  const queryObj = parseQuery(query || '?', noDecode)
   return {
     path,
     queryObj