解决uniApp 页面之间路由传递大量参数时,造成数据截断或者数据不全的问题

4 篇文章 1 订阅

1、常规的路由拼接传参方式

传递参数:

           let temporaryObj = {
				id:1,
				name:'名称',
				content:'这是一段文字描述'
			}
			
			uni.navigateTo({
				url: `/pages/addd?data=${JSON.stringify(temporaryObj)}`
			})

获取参数:

        onLoad(data) {
			if (data.data) {
				let initData = JSON.parse(data.data);
			}
		},

这种方式有一种缺陷,在传递大量参数时可能会造成数据截断或者数据不全的问题,导致接收数据页面无法正确拿到参数。以下的其中一种解决方式

           //使用 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
		   uni.navigateTo({
			   url: `/pages/addd?data=${encodeURIComponent(JSON.stringify(temporaryObj))}`
		   })


           //使用 decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
		   let initData = JSON.parse(decodeURIComponent(data.data));

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
UniApp 中,可以使用路由参数传递来在页面之间传递数据UniApp提供了多种传递参数的方式,下面列举了几种常用的方法: 1. Query 参数传递: 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中,可以通过 `url` 参数携带 Query 参数传递数据。示例代码如下: ```javascript uni.navigateTo({ url: '/pages/detail?id=1&name=example' }); ``` 在目标页面中,可以通过 `this.$route.query` 或 `uni.getStorageSync` 方法来获取 Query 参数的值。 2. URL 传参: 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中,可以通过在 URL 中拼接参数传递数据。示例代码如下: ```javascript uni.navigateTo({ url: '/pages/detail/1' }); ``` 在目标页面的 `pages.json` 中配置路由,可以使用动态路由来匹配 URL 参数。例如: ```json { "path": "/pages/detail/:id", "style": { "navigationBarTitleText": "详情页" } } ``` 在目标页面中,可以通过 `this.$route.params` 或 `uni.getStorageSync` 方法来获取 URL 参数的值。 3. Storage 传参: 使用 `uni.setStorageSync` 方法将数据存储在本地缓存中,然后在目标页面中使用 `uni.getStorageSync` 方法来获取存储的数据。示例代码如下: 在当前页面: ```javascript uni.setStorageSync('data', { id: 1, name: 'example' }); uni.navigateTo({ url: '/pages/detail' }); ``` 在目标页面: ```javascript const data = uni.getStorageSync('data'); console.log(data); ``` 以上是几种常用的 UniApp 路由参数传递方式。根据实际需求,选择合适的方式来传递数据。在目标页面中,可以通过 `this.$route.query`、`this.$route.params` 或 `uni.getStorageSync` 方法来获取传递参数值。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值