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 );
在一个工具集文件 utils.js 中引入 storageBus
import storageBus from "./storageBus";
export default {
install(myVue) {
myVue.prototype.$bus = storageBus;
}
}
在Vue的入口文件(通常为main)中import这个工具集utils.js，配置 Vue.use(utils);
这样就可以在全局使用 this.$bus 调用我们上面编写的storageBus了；
5. 使用
List.vue 列表中注册事件：
mounted() {
this.$bus.$on('effect', (data) => {
// TODO ... data.id ...
})
},
Detail.vue 列表跳转详情页某个条件下发送信息：
this.$bus.$emit('effect', { id: xxx })
没错，使用方式和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(
...
);
List.vue 列表中注册事件，并在页面销毁时解除：
mounted() {
this.storageBusOff = this.$bus.$on('effect', (data) => {
// TODO ... data.id ...
})
},
beforeDestroy() {
this.storageBusOff(); // 销毁了
}
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;
};
修改上面的工具集文件 utils.js :
myVue.prototype.$bus = utils.isIOS() ? new Vue() : storageBus; // vue事件广播 与 跨页面事件广播
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);
}
};
Vue文件中：
// 使用上两种事件通信没有区别，唯一不同的地方是注销：
beforeDestroy() {
this.$bus.$off('effect')
this.storageBusOff instanceof Function && this.storageBusOff();
}
至此终于解决了使用Vue单页面开发混合app的页面遇到的深坑，在判断函数isIOS中判断的是整个苹果生态，苹果系统则走vue-router路由并且也不是跨页面通信方式，而我的开发电脑是mac，所以整个开发过程还是比较流畅的，网页调试开发的效果基本不用到原生再重新确认一遍，只管发布后提测。
