1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序-页面间通信

微信小程序-页面间通信

时间:2022-09-23 18:02:41

相关推荐

微信小程序-页面间通信

当前测试的基础库版本为 2.17.0

页面分类

tabBar页面 - app.json中配置的tabBar页面

page页面 - 其他的 非tabBar 页面,后面称为page页面

跳转页面时进行数据传递

目标页面为tabBar页面

// 当前页面wx.reLaunch({url: '/pages/tab1/index?id=123'})// tab1页面Page({onLoad (option) {console.log('query', options); // { id: 123 }}})

目标页面为page页面

// 当前页面 - 第一种wx.reLaunch({url: '/pages/page1/index?id=123'})// 当前页面 - 第二种wx.redirectTo({url: '/pages/page1/index?id=123'})// 当前页面 - 第三种wx.navigateTo({url: '/pages/page1/index?id=123'})// 三种方法有所区别,使用的时候根据需要使用其中一个// tab1页面Page({onLoad (option) {console.log('query', options); // { id: 123 }}})

触发事件进行通信

EventChannel- 页面间事件通信通道

const eventChannel = this.getOpenerEventChannel();// 触发一个事件eventChannel.emit(string eventName, any args)// 持续监听一个事件eventChannel.on(string eventName, EventCallback fn)// 监听一个事件一次,触发后失效eventChannel.once(string eventName, EventCallback fn)// 取消监听一个事件。// 给出第二个参数时,只取消给出的监听函数,否则取消所有监听函数eventChannel.off(string eventName, EventCallback fn)

list页面跳转info页面触发事件监听

// list 页面Page({goToInfo(){wx.navigateTo({url: '/pages/info/index',success(res){res.eventChannel.emit('eventName', {param1: 'value1' });}})}})// info 页面Page({eventAction(params){console.log(params); // { param1: 'value1' }},onLoad: function (options) {const eventChannel = this.getOpenerEventChannel();eventChannel.on('eventName', this.eventAction);},})

add页面新增完毕返回list页面触发事件监听

// list 页面Page({goToAdd(){wx.navigateTo({url: '/pages/add/index',events: {backRefresh(params){console.log(params);// { status: 'ok' }// do something ...// refresh list data}},success(res){// success callback}})}})// add 页面Page({saveItem(data){saveService.save(data, () => {// success save ...const eventChannel = this.getOpenerEventChannel();eventChannel.emit('backRefresh', {status: 'ok' });})},})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。