uniapp的几种通信方式

URL传参

字符串拼接

通过uni.navigateTo()跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 path?key=value&key2=value2,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数

encodeURIComponent

url有长度限制,太长的字符串会传递失败,可以使用encodeURIComponent对参数进行编码

uni.navigateTo({
    url: 'test?id=1&name=uniapp&json='+ 
    encodeURIComponent(
            JSON.stringify({
              name: '张三',
              age: "18",
            })
          ),
});

// 在test.vue页面接受参数
onLoad: function (e) {
    const info = JSON.parse(decodeURIComponent(e.json));
}

窗体通信(类似VUE的Event Bus)

uniapp官网

uni.e m i t 、 u n i . emit、 uni.emituni.on 、 uni.o n c e 、 u n i . once 、uni.onceuni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.o n 注 册 监 听 , o n U n l o a d 里 边 u n i . on 注册监听,onUnload 里边 uni.ononUnloaduni.off 移除,或者一次性的事件,直接使用 uni.$once 监听

uni.e m i t ( ) 、 u n i . emit()、uni.emit()uni.on()

// 触发全局的自定事件。附加参数都会传给监听器回调。
uni.$emit('update',{msg:'页面更新'})

//监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
uni.$on('update',function(data){
        console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
    })

uni.$once()

监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器

uni.$once('update',function(data){
        console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
    })

uni.$off()

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

// 如果没有提供参数,则移除所有的事件监听器;
// 如果只提供了事件,则移除该事件所有的监听器;
// 如果同时提供了事件与回调,则只移除这个回调的监听器;
// 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
uni.$off('update',function(data){
        console.log('移除事件名:update');
    })

全局变量

uni-app 全局变量的几种实现方式