zoukankan      html  css  js  c++  java
  • 微信小程序页面跳转时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
      }
    
  • 相关阅读:
    外面下雨了,凉快了
    无聊,听说wow五区开放了,注册个人物去玩玩
    草原游记二大青山上
    终于拿到钥匙了
    刚看到一个论坛的帖子,一位大哥说到真是话糙理不糙,佩服
    草原随感录武川印象
    第一次网上买点卡
    看到小说<搜神新记>里面巨搞笑的一段,是共工和太章打完架后,把事先被昏迷的人叫醒的事情
    昨天晚上很生气很生气。。。。
    感于"一生所爱"
  • 原文地址:https://www.cnblogs.com/sk-3/p/15433653.html
Copyright © 2011-2022 走看看