fix(runtime): align URL query serialization with browser behavior

packages/taro-runtime/src/bom/URL.ts

@@ -1,7 +1,7 @@
 import { isString, isUndefined } from '@tarojs/shared'
 
 import env from '../env'
-import { URLSearchParams } from './URLSearchParams'
+import { TaroURLSearchParams, URLSearchParams } from './URLSearchParams'
 
 class TaroURL {
   static createObjectURL () {
@@ -19,6 +19,8 @@ class TaroURL {
   #port = ''
   #protocol = ''
   #search: URLSearchParams
+  #searchModified = false
+  #searchRaw = ''
 
   constructor (url: string, base?: string) {
     if (!isString(url)) url = String(url)
@@ -31,7 +33,7 @@ class TaroURL {
     this.#pathname = pathname || '/'
     this.#port = port
     this.#protocol = protocol
-    this.#search = new URLSearchParams(search)
+    this.#setSearch(search)
   }
 
   /* public property */
@@ -90,14 +92,16 @@ class TaroURL {
   }
 
   get search () {
+    if (!this.#searchModified) return this.#searchRaw
+
     const val = this.#search.toString()
     return (val.length === 0 || val.startsWith('?')) ? val : `?${val}`
   }
 
   set search (val: string) {
     if (isString(val)) {
       val = val.trim()
-      this.#search = new URLSearchParams(val)
+      this.#setSearch(val)
     }
   }
 
@@ -157,6 +161,19 @@ class TaroURL {
     return this.toString()
   }
 
+  #setSearch (val: string) {
+    const search = val ? (val.startsWith('?') ? val : `?${val}`) : ''
+
+    this.#searchRaw = search
+    this.#searchModified = false
+    this.#search = new URLSearchParams(search)
+    if (this.#search instanceof TaroURLSearchParams) {
+      this.#search._setOnChange(() => {
+        this.#searchModified = true
+      })
+    }
+  }
+
   // convenient for deconstructor
   _toRaw () {
     return {

packages/taro-runtime/src/bom/URLSearchParams.ts

@@ -36,8 +36,9 @@ function encode (str: string) {
   return encodeURIComponent(str).replace(findReg, replacer)
 }
 
-export const URLSearchParams = process.env.TARO_PLATFORM === 'web' ? env.window.URLSearchParams : class {
+export class TaroURLSearchParams {
   #dict = Object.create(null)
+  #onChange?: () => void
 
   constructor (query) {
     query ??= ''
@@ -81,12 +82,18 @@ export const URLSearchParams = process.env.TARO_PLATFORM === 'web' ? env.window.
     }
   }
 
+  _setOnChange (onChange?: () => void) {
+    this.#onChange = onChange
+  }
+
   append (name: string, value: string) {
     appendTo(this.#dict, name, value)
+    this.#onChange?.()
   }
 
   delete (name: string) {
     delete this.#dict[name]
+    this.#onChange?.()
   }
 
   get (name: string) {
@@ -109,6 +116,7 @@ export const URLSearchParams = process.env.TARO_PLATFORM === 'web' ? env.window.
 
   set (name: string, value: string) {
     this.#dict[name] = ['' + value]
+    this.#onChange?.()
   }
 
   forEach (callback, thisArg) {
@@ -136,3 +144,5 @@ export const URLSearchParams = process.env.TARO_PLATFORM === 'web' ? env.window.
     return query.join('&')
   }
 }
+
+export const URLSearchParams = process.env.TARO_PLATFORM === 'web' ? env.window.URLSearchParams : TaroURLSearchParams

packages/taro-runtime/tests/location.spec.ts

@@ -197,6 +197,17 @@ describe('location', () => {
       expect(url.toString()).toBe('http://taro.com/?a=1&b=2&c=3&d=4')
     }
 
+    {
+      const url = new URL('https://example.test/?name=|aaa')
+      expect(url.search).toBe('?name=|aaa')
+      expect(url.toString()).toBe('https://example.test/?name=|aaa')
+      expect(url.searchParams.get('name')).toBe('|aaa')
+      expect(url.searchParams.toString()).toBe('name=%7Caaa')
+
+      url.searchParams.append('age', '18')
+      expect(url.toString()).toBe('https://example.test/?name=%7Caaa&age=18')
+    }
+
     // setters
     {
       const url = new URL('http://taro.com')