六、weex页面间的通讯(传参)

导语

页面之间通讯也是项目的必要需求，今天说一说页面通讯的方式。我能想到的就四种。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中的通知是一个意思，一处发送通知，可以多处接收通知。
我们看下面这种官方文档上的图

E12361E9-D2B9-457A-8644-D1E2D0F243F0.png