多页面应用、移动端混合开发H5通信解决方案实践

0. 背景介绍：

移动端混合开发，APP中90%的内容均为内嵌H5，由于种种原因，我在客户端内无法使用单页面路由跳转，只能新开窗口跳转页面，于是被迫形成了“多页面”的情形。（即使是连贯的页面）

1. 需求场景

例如当处于一个列表中，此时点击某一项跳转至详情进行操作，并改变了这一项的状态，那么列表也需要同步改变该项的状态。（此时列表与详情是两个webview）

最终实现效果：（使用两个标签页模拟真机情况）

2. 问题思考

既然是多页面，Vue中的各种通信方式就用不了了，首先想到的是小程序的onShow()生命周期，我们的APP也提供了类似的协议方法，意味着H5页面中可以监听到页面重回，但是该方式依赖原生，且正常情况下也无法做到数据通信，页面重回时直接重新请求新数据会导致整个页面刷新，方案pass。

3. 最终解决方案

localStorage是我前端开发中最常用到的数据持久储存方案没有之一，在同源情况下，完全可以作为多页面之间的数据通信桥梁，我决定采用发布订阅模式，编写一个eventBus，来解耦多页面之间的通信，使用window原生的事件监听充当事件总栈，监听localStorage的变动并广播触发对应操作。下面就一起看看我是如何实现的吧。

4. 实现代码

创建 storageBus.js 文件:

let effects = [];

function depend(obj) { // 收集依赖
  effects.push(obj);
}
function notify(key, params) { // 执行依赖
  const fnList = effects.filter(x => x.name === key);
  fnList.forEach(list => list.fn(JSON.parse(params).data)); // 这里只有data是我们需要的
}

export default {
  $emit(name, data) {
    // 目前定义的数据格式 { data: any but not function, timeStamp: xxx } // timeStamp是为了保持数据能正常监听到更新
    let item = localStorage.getItem(name) || "{}";
    try {
      item = JSON.parse(item);
      item.data = data
    } catch (e) {
      item = {};
    }
    item.timeStamp = new Date().getTime();
    localStorage.setItem(name, JSON.stringify(item));
  },
  $on(name, fn) {
    depend({ name, fn });
  }
};
// 事件总栈：
window.addEventListener(
  "storage",
  e => { // e.key 即为触发的方法，e.newValue 为更新的参数
    notify(e.key, e.newValue);
  }, false );

        

          
        
        
        

          

          AI 代码解读
        
      
      

在一个工具集文件 utils.js 中引入 storageBus

import storageBus from "./storageBus";
export default {
  install(myVue) {
      myVue.prototype.$bus = storageBus;
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

在Vue的入口文件(通常为main)中import这个工具集utils.js，配置 Vue.use(utils);

这样就可以在全局使用 this.$bus 调用我们上面编写的storageBus了；

5. 使用

List.vue 列表中注册事件：

mounted() {
    this.$bus.$on('effect', (data) => {
      // TODO ... data.id ...
    })
  },

        

          
        
        
        

          

          AI 代码解读
        
      
      

Detail.vue 列表跳转详情页某个条件下发送信息：

this.$bus.$emit('effect', { id: xxx })

        

          
        
        
        

          

          AI 代码解读
        
      
      

没错，使用方式和Vue自带的eventBus一致，事件广播，解耦的神。

6. 事件解绑

Vue的eventBus中提供了off方法用于解绑事件，我们也需要实现一个解绑方法，否则页面在多次进入后会重复注册事件，但是重复注册事件也是我们考虑的情况，那么删除特定的注册事件则需要两个判断条件：1. 事件名 2. 事件函数是否一致，这样导致的结果是off方法需要把on注册的匿名函数传递进去，这太麻烦了，为了优雅地解决这个问题，我们可以让on方法在调用过后，主动将off方法吐出，以此来注销对应事件。

storageBus.js 新增代码：

let effects = [];

function depend(obj) { // 收集依赖
  ...
}
function notify(key, params) { // 执行依赖
  ...
}

export default {
  $emit(name, data) { ... },
  
  $on(name, fn) {
    depend({ name, fn });
    return () => {
      this.$off(name, fn);
    };
  },
  
  $off(name, fn) {
    const fnList = effects.filter(x => x.name === name);
    effects = fnList.filter(x => x.fn !== fn);
    if (effects.findIndex(x => x.name === name) === -1) { // 完全不存在对应的函数了就清除数据
      localStorage.removeItem(name)
    }
  }
};

window.addEventListener(
  ...
);

        

          
        
        
        

          

          AI 代码解读
        
      
      

List.vue 列表中注册事件，并在页面销毁时解除：

mounted() {
    this.storageBusOff = this.$bus.$on('effect', (data) => {
      // TODO ... data.id ...
    })
  },
beforeDestroy() {
    this.storageBusOff(); // 销毁了
  }

        

          
        
        
        

          

          AI 代码解读
        
      
      

7. 真机兼容性

经过测试，Ios中storage的监听并不生效，这非常令人遗憾，不过在安卓系统中则正常，但是我在偶然中发现，Ios和Android的webview在页面跳转上并不相同，Ios的webview可以正常进行网页前进后退，安卓则是返回直接关闭了页面（不知道是不是安卓没做处理），总之最后我采用判断环境来使用不同的页面跳转与消息通信：

工具函数：

/**
 * 判断ios，整个生态，包括电脑手机平板
 */
export const isIOS = () => {
  var u = navigator.userAgent;
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  return isiOS;
};

        

          
        
        
        

          

          AI 代码解读
        
      
      

修改上面的工具集文件 utils.js :

myVue.prototype.$bus = utils.isIOS() ? new Vue() : storageBus; // vue事件广播 与 跨页面事件广播

        

          
        
        
        

          

          AI 代码解读
        
      
      

import router from "../router/index";
// 定义了自己的路由，使用方式与vue-router一致
myVue.prototype.$myRouter = (params, title = null) => {
      if (!utils.isIOS()) {
        const path = params.path ? params.path : params.name ? `/${params.name}` : "";
        let query = "?";
        for (const key in params.query) {
          if (Object.hasOwnProperty.call(params.query, key)) {
            query += `${key}=${params.query[key]}&`;
          }
        }
        query = query.substring(0, query.length - 1);
        xxxxx.appClient({ // 这是混合开发定义的打开页面协议
          type: "openPage",
          data: { url: baseUrl + "saas/dangjian/" + `#${path}` + query }
        });
      } else { // 走正常的路由
        router.push(params);
      }
    };

        

          
        
        
        

          

          AI 代码解读
        
      
      

Vue文件中：

// 使用上两种事件通信没有区别，唯一不同的地方是注销：
beforeDestroy() {
    this.$bus.$off('effect')
    this.storageBusOff instanceof Function && this.storageBusOff();
  }

        

          
        
        
        

          

          AI 代码解读
        
      
      

至此终于解决了使用Vue单页面开发混合app的页面遇到的深坑，在判断函数isIOS中判断的是整个苹果生态，苹果系统则走vue-router路由并且也不是跨页面通信方式，而我的开发电脑是mac，所以整个开发过程还是比较流畅的，网页调试开发的效果基本不用到原生再重新确认一遍，只管发布后提测。