uni-app 页面间正反向传值

目录

• 正向传值
• 反向传值

正向传值

A页面向B页面传值

userInfo 为 Object  {'name':'张三','sex':'男'}
// 这里转换成 字符串
let navData = JSON.stringify(this.userInfo); 
console.log("字符串",navData);
//跳转传值
uni.navigateTo({
        url:`/pages/Controller/My/UserInfo/updateName?userInfo=${navData}`
})

B页面接收A页面的值

onLoad(param) {
     // 字符串转对象 console.log("获取数据",data)
     let data = JSON.parse(param.userInfo)；
    console.log("获取数据",data)
    //赋值 
    this.userInfo = data;
 }

上面这种传值的方式有一个局限性如果navData数据内容比较多，那么转成jsonString之后接在路由的url上面，会导致url过长而传参失败 可以通过下面两种常见的方式解决
1.将参数encodeURIComponent/

userInfo 为 Object  {'name':'张三','sex':'男'}
let navData=encodeURIComponent(JSON.stringify(userInfo))
uni.navigateTo({
        url:`/pages/Controller/My/UserInfo/updateName?userInfo=${navData}`
})

onLoad(option) {
    let userInfo=JSON.parse(decodeURIComponent(option.userInfo))  //先转码，再JSON.parse转对象
  
}

2.通过将要传递的参数缓存起来 等到下个页面在把缓存起来的变量拿到并刷新页面显示

//给uni绑定一个全局的db对象
uni.db={}
let userInfo = {'name':'张三','sex':'男'}
//把对象保存在db中
uni.db.userInfo = userInfo

//在下一个页面需要访问的时候 
onload(){
let userInfo = uni.db.userInfo
//刷新显示
}

反向传值

1.通过通知的方式
页面A跳转到页面B前注册一个事件监听

//监听事件
uni.$on('fire', function(data) {
    // data即为传过来的值
    console.log("data", data);
    //清除监听，不清除会消耗资源
    uni.$off('fire');
});
uni.navigateTo({
    url: "page_b"
})

页面B返回页面A前将需要返回的值通过emit("fire")传递出去

uni.$emit('fire', {
    data1: "object1",
    data2: "string1"
});
uni.navigateBack({ });

这是一种方式，通过通知方式传参的一定要注意 如果多个面都监听了相同fire，那么多个页面会同时接收到对应的消息，然后使用完成后一定要记得关闭通知监听uni.$off('fire')

2.通过页面绑定数据传参

B页面
backToA(obj){
   // 获取当前页上的栈（数组形式）
   var pages = getCurrentPages()
   //上一页面 
   var prevPage = pages[pages.length - 2] // （pages.length - 3 上上页 pages.length - 1当前页，以此类推）
    prevPage.$vm.backData(obj)   /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
   // 返回上一页
   uni.navigateBack()	
}

A页面
backData(obj) {
  if(!!obj){
    /// 如果返回的对象有值 则做对应的数据处理
     consolg.log(obj)
  }
}

针对backToA方法做了一个封装可以放在全局的路由中 通过动态的传入方法名和返回参数来返回上一页

/// 返回上一个页面 并传参
/// obj 	返回参数 可选 
/// func    上级接收方法   不传默认为otherFun方法
backToPrePage(obj, myfunc) {
	var func = myfunc || 'otherFun'
	var pages = getCurrentPages();
	/// try catch一下 防止数组越界 或者 func方法没有实现卡在这里
	try {
		var prevPage = pages[pages.length - 2]; //上一个页面
		prevPage.$vm[func](obj); //重点$vm  func是动态的， 需要返回的页面实现func变量对应的函数才可以正常接收到返回值
		   // prevPage.setData({
		   //     //直接给上一个页面赋值
		   //     chooseName: name // 注意： name必须是A页面data定义过得字段
		   // })
	} catch (e) {
		//TODO handle the exception
		console.log(e)
	}
	uni.navigateBack();
}

使用：

B页面返回时调用
let userInfo = {'name':'张三','sex':'男'}
///调用全局方法传入需要返回的参数userInfo 和 A页面接收方法backUserInfo
backToPrePage(userInfo,'backUserInfo')

A页面
backUserInfo(obj){
if(!!obj){
  this.userInfo = obj
    console.log(obj.name)
  }
}