uni-app页面通讯的基本使用

概要

本文主要介绍uni-app页面通讯的基本使用

页面间通讯

–方式一

- url查询字符串和EventChannel

 直接在url后面通过查询字符串的方式拼接

✓ 如url查询字符串出现特殊字符等格式，需编码

uni.navigateTo({
	url: '/pages/index/index?id="1"'
});

◼ EventChannel 对象的获取方式

 Options语法：this.getOpenerEventChannel()

 Composition语法：getCurrentInstance().proxy. getOpenerEventChannel()

- 正向传递数据

// demo页面
uni.navigateTo({
    url: '/pages/index/index',
    success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        // 向index传递数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
    }
});

//index页面
onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        console.log(data)
    })
}

• 当demo页面跳转到index页面时，index给demo页面传递数据

- 反向传递数据

// demo页面
uni.navigateTo({
    url: '/pages/index/index?id="1"',
    events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
            console.log(data)
        }
    }
});
// index页面
onLoad(options) {
    const app = getApp()
    console.log(options.id);

    const eventChannel = this.getOpenerEventChannel();
	// 向index页面发出数据，第一个参数是事件监听器名字
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
}

– 方式二

◼ 方式二：事件总线

 uni.$emit( eventName, OBJECT ) 触发全局的自定义事件。

 uni.$on( eventName, callback )监听全局的自定义事件。由 uni.$emit 触发。

 uni.$once( eventName, callback )只监听一次全局的自定义事件。由 uni.$emit 触发

 uni.$off( eventName, callback )

移除全局自定义事件监听器。

✓ 如果没有提供参数，则移除所有的事件监听器；

◼ 注意事项：

 需先监听，再触发事件，比如：你在A界面触发，然后跳转到B页面后才监听是不行的。

 通常on 和 off 是同时使用，可以避免多次重复监听

 适合页面返回传递参数、适合跨组件通讯，不适合界面跳转传递参数

- 只能用来反向传递数据

• 当demo页面跳转到index页面时，index给demo页面传递数据

// demo页面
// 页面的生命周期
onLoad(options) {
    // 监听触发的全局事件
    uni.$on('index触发', this.acceptData)
},
onUnload(){
     // 移除事件监听
     uni.$off('index触发', this.acceptData)
},
methods: {
     acceptData(value){
         console.log(value);
     }
}
// index页面
back(){
    uni.navigateBack({
        delta: 1,
    });
    // 触发一个全局事件，让demo页面监听
    uni.$emit('index触发', {
        data: { name: 'wuu' }
    })
}

小结

本文主要介绍uni-app页面通讯的基本使用
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，求关注 谢谢