混合式开发在魅族手机上遇到的坑

Switzerland
Switzerland

魅族手机可能是很多开发的噩梦，不仅仅是native（ios ，android）开发人员，就像我一个前端开发人员也是被他坑惨。下面我们来聊一下我遇到的坑。

开发模式

架构模式：Hybrid

h5框架：Vue

魅族手机webView中最多只能保留一条浏览器历史记录

  1. 在开发过程中，我在设计某些一连串的关联页面时候使用了大家都很常用的vue-router，但是在这个时候我发现一个问题，就是：魅族手机webView中最多只能保留一条浏览器历史记录，这导致我的路由没法连续返回，最多只能返回一次。
    这时候我果断使用了vue-router的勾子函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Router.prototype.goBack = function(){
    this.isBack = true;
    let path = this.pathArr[this.pathArr.length - 2];
    this.push(path);
    this.pathArr.splice(this.pathArr.length - 1, 1);
}
Router.prototype.enter = function(path){
    this.pathArr.push(path);
    this.push(path);
}
const router =  new Router({
    routes,
})

router.pathArr = ['/'];
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if(to.meta.title != ''){
        document.title = to.meta.title
    }
    if(to.name == 'jobDescription'){
        if(from.name == 'fullSalary' || from.name == 'partSalary'){
            to.meta.isUseCache = true;
        }else{
            to.meta.isUseCache = false;
        }
    }
    next()
})

没有历史记录我们就自我创建路由的历史记录，
首先我为路由实例添加一个新的属性，pathArr来保存我们的路由历史记录，然后我为vueRouter的原型对象添加了两个方法：

  1. enter方法，是当使用路由进入下一个路由时候使用的方法，很简单就是在在puth方法的基础上做了个中间层在这其中我将每条路由的历史记录保存在pathArr中，
  2. goBack方法，同样道理我为原型对象添加了goBack方法为了在返回时候从pathArr中取出路由进行跳转同时删除这一条

总结

我们在日常开发过程中会遇到这种情况，只种模式被称为桥接模式，就是用做中间层的方法来处理问题。