uniapp的支付宝小程序的跳转页面传参方式

Wether or not

已于 2022-10-11 09:13:52 修改

阅读量1.7k

点赞数 1

分类专栏： uni-app vue uniapp 文章标签：小程序前端 javascript

于 2022-07-07 20:56:44 首次发布

本文链接：https://blog.csdn.net/wehter/article/details/125666793

版权

vue 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

uni-app

3 篇文章 0 订阅

订阅专栏

uniapp

3 篇文章 0 订阅

订阅专栏

本文介绍了uniapp中页面间参数传递的两种常见方法：通过URL拼接和使用getCurrentPages API。在URL拼接中，正常参数直接传递，特殊情况下需要对参数进行encodeURIComponent和decodeURIComponent处理。利用getCurrentPages API，可以从栈中获取当前页面及前一页的参数。

摘要由CSDN通过智能技术生成

一、onLoad(options){} `接触一点点uniapp后，常用`

vue传参和uniapp的传参（页面之间的传参，不是请求传参）有些许不同，但其实uniapp的传参方式也挺简单的

1、正常的参数

通过url拼接的方式传参，通过options来接收

//父
this.$util.navigateTo({
    url: `/pages/orderDetail?cOrderSn=${itemChild.cOrderSn}&cOrderId=${itemChild.orderProductId}`,
})
//子
onLoad(options){
    console.log('oooooooooooooooooooooooooooooooooooooooooooooooooooooooooo',options)
},

打印出来的参数（传的是什么就接收到）：
在这里插入图片描述

2、不正常的参数

通过encodeURIComponent 和decodeURIComponent来进行编码和解码传参

// 父
uni.navigateTo({
	url: './fishinfo/fishinfo?pic='+this.watchimg+ '&info='+ encodeURIComponent(JSON.stringify(this.answer)  )
});
// 子
onLoad(option) {
	this.video = JSON.parse(decodeURIComponent(option.video));
	console.log(this.video); //打印出上个页面传递的参数。
	// this.selectid = option.id
	setTimeout(()=>{
		this.playvideo()
	},20)
},

二、 getCurrentPages() `内置API，牛逼`

uniapp提供了API来获取： getCurrentPages

//父
this.$util.navigateTo({
	url: `/pages/orderDetail?cOrderSn=${itemChild.cOrderSn}&cOrderId=${itemChild.orderProductId}`,
})
// 子
onShow() {
  let opt = getCurrentPages();
  console.log('pppppppppppppppppppppppppppppppppppppppppppppppppppppppppp',opt)
  
  /*
  *  参数：——>
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  *  let _query = opt[opt.length - 1].options;
  */

},