uniapp的navigateTo页面跳转参数传递问题

最新推荐文章于 2024-04-20 05:55:11 发布

小甜儿_49160916

最新推荐文章于 2024-04-20 05:55:11 发布

阅读量2.1k

点赞数 1

文章标签： javascript 前端 vue.js web app

本文链接：https://blog.csdn.net/weixin_49160916/article/details/125634846

版权

uniapp的navigateTo页面跳转参数传递问题

URL直接传递

例如：uni.navigateTo({ url: '/pages/salemanManage/my/myorder/particulars?id=' + this.orderInfo.id })
弊端：url有长度限制，太长的字符串会传递失败。
处理方式：使用encodeURIComponent进行编码。
参数传递：先JSON再编码

detail(item) {
	uni.navigateTo({
		url: '/pages/salemanManage/homePage/salesReturn/detail?data=' + encodeURIComponent(JSON.stringify(item)),
	})
},

参数接收：先解码再JSON

onLoad(option) {
	this.dataList = JSON.parse(decodeURIComponent(option.data))
},

注意：如果传递参数的字符串中存在特殊字符（如 #，%，？，&，=），则在接收参数之前需要先处理特殊字符，将其改为十六进制，否则会报错
解决方法：
在methods中添加方法：

// 因为decodeURIComponent参数参数传递在接收时有特殊字符会报错，所以在接收前要处理特殊字符为十六进制
encodeSearchKey(key) {
	const encodeArr = [{
		code: '%',
		encode: '%25'
	},{
		code: '?',
		encode: '%3F'
	},{
		code: '#',
		encode: '%23'
	},{
		code: '&',
		encode: '%26'
	},{
		code: '=',
		encode: '%3D'
	}]
	return key.replace(/[%?#&=]/g, ($, index, str) => {
		for(const k of encodeArr) {
			if(k.code === $) {
				return k.encode
			}
			}
	})
},

在获取参数时：

onLoad(option) {
	// 处理特殊字符
	let options = this.encodeSearchKey(option.data)
	this.dataList = JSON.parse(decodeURIComponent(options))
},

使用eventChannel

传递参数时：

uni.navigateTo({
  url: 'pages/test?id=1',
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('变量参数名', { data: 'data from starter page' })
  }
})

获取参数时：

onLoad: function(option) {
  let self = this
  // APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取
  // #ifdef APP-NVUE
  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
  // #endif
  // #ifndef APP-NVUE
  const eventChannel = this.getOpenerEventChannel();
  // #endif
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('变量参数名', function(data) {
    console.log(data.data) // 'data from starter page'
    self.a = data.data
  })
}