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.$emit、uni.$on 、 uni.$once、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on注册监听，onUnload里边uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

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 全局变量的几种实现方式