宁波企业网站设计,哈尔滨做网站收费,企业建设网站策划案,主办单位性质与网站名称不符页面之间传参大概可分为以下几种情况#xff1a; 上级页面 → 下级页面#xff08;单向#xff09;上级页面 ← 下级页面#xff08;单向#xff09;上级页面 ↔ 下级页面#xff08;双向#xff09; 一、上级页面 → 下级页面#xff08;单向#xff09;
uni.naviga…页面之间传参大概可分为以下几种情况 上级页面 → 下级页面单向上级页面 ← 下级页面单向上级页面 ↔ 下级页面双向 一、上级页面 → 下级页面单向
uni.navigateTo:URL编程式传参 作为最常用也是最简单的跳转携带参数的API这里不多赘述想详细了解的朋友可以前往官方文档学习这里只做传参分享。 官方文档uni.navigateTo(OBJECT) 1、携带静态参数
//在起始页面跳转到test.vue页面并传递参数
//作用场景需要提供固定传参状态的页面一般和动态参数一起使用
uni.navigateTo({url: test?id1nameuniapp
});
2、携带动态参数
//在起始页面跳转到test.vue页面并传递参数
let uniapp {uniappItem: 0,
};
//当传递的参数是对象时必须先转化为JSON格式
uni.navigateTo({url: test?id1name JSON.stringify(uniapp),
});
3、页面接收 。注意是在onload方法中接收。
onLoad: function (option) { //option为object类型会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}
4、navigator标签传参 URL有长度限制太长的字符串会传递失败可改用窗体通信、全局变量另外参数中出现空格等特殊字符时需要对参数进行编码如下为使用encodeURIComponent对参数进行编码的示例。 //此处的 :URL 是动态载入参数是变量;
//当使用了 :URl 却使用了静态地址有可能不生效同样如果使用了变量却没有用 :URL 也会有问题
navigator :url/pages/test/test?item encodeURIComponent(JSON.stringify(item))
/navigator
页面接收
// 在test.vue页面接受参数
onLoad: function (option) {const item JSON.parse(decodeURIComponent(option.item));
}
二、上级页面 ← 下级页面单向 一般来说 uni.navigateTo 的参数传递可以满足页面的传递但遇到需要更新上级页面的需求时就需要使用uni.e m i t ( ) 和 u n i . emit()和uni.emit()和uni.on() 进行页面间通讯。 该方法一般运用在当你从下级页面或组件改变数据后通知上级页面进行刷新或其他操作实在不清楚也没关系当你需要时自然明白。 1、uni.$on(eventName,callback)监听事件 在上级页面设置 uni.$emit() 来监听下级页面的调用其中的eventName就是事件名称第二个参数是接受到函数后触发的回调函数。在监听事件结束后一定要移除监听事件不然会有重复监听的问题。 // 我的页面
onLoad(){ // 监听事件 uni.$on(login,(usnerinfo){ this.usnerinfo usnerinfo; })
},
onUnload() { // 移除监听事件 uni.$off(login);
},
2、触发事件 传递的参数一定是要在对象中的属性 uni.$emit(login, { avatarUrl: https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg, token: user123456, userName: unier, login: true
});
三、上级页面 ↔ 下级页面双向 在一般情况下单向传递已经可以满足我们的业务需求如向下级页面传递需要显示的参数、变动的状态向上级页面传递的需要更新的数据或是需要再次调用的函数。 但遇到两个联系十分紧密的页面时单向传递就无法满足我们的业务需求向下级页面传递参数和监听事件就会显得特别繁琐。在uniapp中它将上面两种传递方式加以结合提供了这样一个方法去实现双向传递uni.navigateTo({ event:{} }) 1、上级页面内代码
// 在起始页面跳转到test.vue页面并监听test.vue发送过来的事件数据
uni.navigateTo({url: pages/test?id1,// 调用通信事件对象events: {// 获取下级页面参数// 为指定事件添加一个监听器获取被打开页面传送到当前页面的数据// 注意看下级页面中所对应的函数名你可以定义多个方法去管理传递的参数acceptDataFromOpenedPage: function(data) {// 对数据做处理console.log(data)},someEvent: function(data) {// 对数据做处理console.log(data)}},// 发送通信方法success: function(res) {// 通过eventChannel向被打开页面传送数据// 其中含有两个参数第一个是接收的函数名第二个则是需要携带的参数res.eventChannel.emit(acceptDataFromOpenerPage, { data: data from starter page })}
})
2、下级页面内代码
// 在test.vue页面向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用哪里需要哪里调
onLoad: function(option) {// 此处声明只是为了显示看起来简洁一点const eventChannel this.getOpenerEventChannel();// emit 代表的就是向上一个页面传递需要更新的数据eventChannel.emit(acceptDataFromOpenedPage, {data: data from test page});eventChannel.emit(someEvent, {data: data from test page for someEvent});// 接收上个页面传递的数据// 监听acceptDataFromOpenerPage事件获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on(acceptDataFromOpenerPage, function(data) {// 对数据做处理console.log(data)})
}
