微信小程序頁面跳轉時URL參數丟失問題

最近在小程序開發過程中，發現之前可用的某個功能字段展示為了undefined，后來查看參數發現頁面跳轉時參數丟失了導致的

  // group/index.js
  handleJump() {
    const { id, cover, title = '123' } = this.data
    wx.navigateTo({
      url: `/pages/group/result?id=${id}&cover=${cover}&title=${title}`
    })

    // cover參數url地址'https://test.baidu.com/20210926/f91e96d8ef22988d26e63c13bf1d3068_99x93x27.png'
  }

  // group/result.js
  onLoad(options) {
    console.log(options) // id, cover, title = 123
  }

此時獲取到的參數都是正常的，在上線一段時間后，其它同學在圖片后面加上了oss參數，結果發現title字段為undefined了，導致了展示錯誤

  const { id, cover, title = '123' } = this.data
  wx.navigateTo({
    url: `/pages/group/result?id=${id}&cover=${cover}&title=${title}`
  })
  // cover參數url地址'https://test.baidu.com/20210926/f91e96d8ef22988d26e63c13bf1d3068_99x93x27.png?x-oss-process=image/resize,m_mfit,h_360,w_360/format,jpg/quality,Q_70'

  // group/result.js
  onLoad(options) {
    console.log(cover) // https://test.baidu.com/20210926/f91e96d8ef22988d26e63c13bf1d3068_99x93x27.png
    console.log(title) // undefined
  }

會發現在跳轉的url參數中添加了包含特殊字符?的情況下，會出現參數丟失的情況

解決方案：使用encodeURIComponent()與decodeURIComponent()對url參數進行編碼與解碼

  const { id, cover, title = '123' } = this.data
  wx.navigateTo({
    url: `/pages/group/result?id=${id}&cover=${encodeURIComponent(cover)}&title=${title}`
  })
  // cover參數url地址'https://test.baidu.com/20210926/f91e96d8ef22988d26e63c13bf1d3068_99x93x27.png?x-oss-process=image/resize,m_mfit,h_360,w_360/format,jpg/quality,Q_70'

  // group/result.js
  onLoad(options) {
    console.log(decodeURIComponent(cover)) // https://test.baidu.com/20210926/f91e96d8ef22988d26e63c13bf1d3068_99x93x27.png?x-oss-process=image/resize,m_mfit,h_360,w_360/format,jpg/quality,Q_70
    console.log(title) // 123
  }