微信小程序使用navigateTo跳转带参字符过长时被截掉怎么处理

棒棒@糖

已于 2024-09-23 13:55:39 修改

阅读量685

点赞数 4

分类专栏：微信小程序文章标签：微信小程序小程序

于 2024-09-23 13:54:37 首次发布

本文链接：https://blog.youkuaiyun.com/Sylviaswefa/article/details/142455963

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

微信小程序wx.navigateTo跳转带参的字符长度是受限制的，如果字符过长，会被截取掉，这个时候我们怎样来处理呢，下面给出我试过的几种方法。

方法一：使用`encodeURIComponent`和`decodeURIComponent`对字符进行编码和解码

<!-- 跳转页 -->
wx.navigateTo({
   url: `../home/home?data=${encodeURIComponent(JSON.stringify(data))}`
})

<!-- 接收页 -->
onLoad(options) {
   let { data } = options
   data = JSON.parse(decodeURIComponent(data))
}

方法二：如果你需要传递大量数据，可以考虑使用本地存储 `wx.setStorage` 或全局应用状态管理，然后在目标页面中读取这些数据。

<!-- 本地存储 -->
wx.setStorage({
  key: 'paramsKey',
  data: queryParams,
  success: function() {
    wx.navigateTo({
      url: '/home/home?key=paramsKey'
    });
  }
});

方法三：EventChannel页面间事件通信通道

<!-- 跳转页 -->
wx.navigateTo({
   url: `/home/home/`,
   success: (res) => {
      res.eventChannel.emit('sendQueryParams', data)
   },
})

vue2接收页写法：

<!-- 接收页 -->
onLoad(options) {
   let eventChannel = this.getOpenerEventChannel();
   eventChannel.once('sendQueryParams',(params)=>{
      console.log('上一页面传来的数据', params);
   })
},

vue3接收页写法：

<!-- 接收页 -->
<script lang="ts" setup>
   import { getCurrentInstance } from 'vue'
   const { proxy } = getCurrentInstance()
   onLoad((options = {}) => {
      const eventChannel = proxy.getOpenerEventChannel()
      eventChannel.on('sendQueryParams', (params) => {
         console.log('上一页面传来的数据', params);
      })
   })
<script>