导语
页面之间通讯也是项目的必要需求,今天说一说页面通讯的方式。我能想到的就四种。1、在地址后面拼接参数 2、使用storage存在本地来实现 3、BroadcastChannel(不过这个是实例之间,所以很多时候没法使用) 4、vue传至原生再传回vue(就不介绍这个了)
1. 地址拼接的方式
其中z=1 就是我们需要传递下去的参数,比较适合简单参数的传递。
navigator.push({
url: 'http://192.168.2.164:8081/dist/next.js?z=1',
animated: 'true'
})
拿到地址进行解析,就可以直接拿到传递的参数了
weex.config.bundleUrl
getUrlParam() {
var name, value;
var str = weex.config.bundleUrl; //取得整个地址栏
var num = str.indexOf("?");
str = str.substr(num + 1); //取得所有参数
var arr = str.split("&"); //各个参数放到数组里
for (var i = 0; i < arr.length; i++) {
num = arr[i].indexOf("=");
if (num > 0) {
name = arr[i].substring(0, num);
value = arr[i].substr(num + 1);
this.paramsDic[name] = value;
}
}
}
2. storage模块存储在本地
具体操作无非就是以键值的形式存在本地,不过呢 ,因为是传值所有不需要有保存本地,所有统一使用一个键,每次都能替代掉之前存在本地的值。当然这是我个人能想到的方式,如有不对欢迎大神指出。
storage请看这篇
3. BroadcastChannel
具体例子
a页面中的发送和接收
const aPost = new BroadcastChannel("zzz");
aPost.postMessage('a_a_a');
aPost.onmessage = function(event) {
console.log("aaa" + event.data); //b页面发送的消息
};
b页面中的发送和接收
var bPost = new BroadcastChannel("zzz");
bPost.onmessage = function(event) {
console.log("aaa" + event.data); //a页面发送的消息
};
bPost .postMessage("s_s_s");
其实很好理解通讯过程,就跟我们的iOS中的通知是一个意思,一处发送通知,可以多处接收通知。
我们看下面这种官方文档上的图