ionic 使用了 crosswalkwebview 所产生的bug 及 解决方案

一、问题产生：

在ionic app 优化方案中，我在前之前的博文中提到使用 --crosswalkwebview；

使用了crosswalkwebview后，app的显示及兼容效果确实很不错，虽然app大小多了20m左右，但是，当时想着，没所谓了，只要体验提升了即可；

但是在之后，我突然发现了一个bug：

“当ionic的键盘弹出的瞬间，整个视图会出现迷之闪动，貌似那一瞬间，整个视图被压缩得剩下一半了”

这个bug特别是在有背景图片的视图的情况下，显得特别的恶心，也就是整个背景图片在那一瞬间被无情的压缩，显得特别难看；

在网上各种搜索，并不能找到相应的解决方案，浑身难受~~~

 

二、思考：

后来自己在研究这个bug原因的时候，发现了，当app处于全屏的时候，这个bug就不复存在了；

这个发现让我突然想到了状态栏，statusBar，肯定和它有关系；

于是，我把状态栏设置为：

StatusBar.overlaysWebView(true)，也就是悬浮状态；

在打包尝试的时候，确实，这个bug没有出现，因此这里，我想到了个解决方案，就是将状态栏设置成悬浮，然后，header 和 ion-content 都给个margin-top ，值为状态栏的高度；

 

三、解决

1、确定装了2个cordova插件

cordova plugin add cordova-plugin-statusbar

cordova plugin add ionic-plugin-keyboard

2、在入口页面 index.html ，为ion-nav-view 添加 id="adjustHeightAfterKeyboard"

 

3、在app.js里面添加一下代码

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    cordova.plugins.Keyboard.disableScroll(true);
    //动态计算最外层 ion-nav-view 的高度，使键盘弹出时不会挡住内容
    window.addEventListener('native.keyboardshow', keyboardShowHandler);
    window.addEventListener('native.keyboardhide', keyboardHideHandler);
    var viewDom = document.getElementById('adjustHeightAfterKeyboard')
    function keyboardShowHandler(e){
        var viewHight = document.body.clientHeight - e.keyboardHeight;
        viewDom.style.height = viewHight + 'px'; 
    }
    function keyboardHideHandler(e){
        viewDom.style.height = document.body.clientHeight + 'px'; 
    }
}

if (window.StatusBar) {
  //将手机状态栏设置成悬浮
  StatusBar.overlaysWebView(true);
  StatusBar.backgroundColorByHexString("#2e2b36");
}

4、给header-bar 和ion-content 加上上边距

.bar-header{
  box-shadow: 0 1px 1px 0 #eee;
  margin-top:23px;
}
.scroll-content{
  margin-top:23px;
}

 

ok，到此，假装以为可以了，运行了下，好像确实可以，但是，又出现了一个bug，心好累！！

app 在splashscreen 消失，进入首页的时候，状态栏并不悬浮，导致了明显的空白上边距，而其他页面都不会，且从其他页面再切回来首页的时候，bug就消失了。

 

因此，我只能又加了个判断，在首页的controller.js写上以下代码

//修复首次进来头部有margin 的bug;(判断历史的view个数并且判断其他视图是否被点击缓存着)
var childViews = Object.keys($ionicHistory.viewHistory().views).length; //视图里面历史view个数
var sblingsViews = $('.tab-content').length; //tab视图的个数
if(childViews == 1 && sblingsViews == 1){
    $scope.isFirstTimeHome = true;
}else{
    setTimeout(function(){
      $scope.isFirstTimeHome = false;
    },300)
}

　根据 $scope.isFirstTimeHome 来控制是否让margin-top 为0，也即是说如果是首次进来$scope.isFirstTimeHome =true，让margin-top为0，就解决了该bug

　

 

 

ok，到此为止，算是解决了；

但是我想着，是否有更好的方法能解决啊，好烦，ionic的bug真心难解决，重点是搜索不到和我这个问题类似的解决方案，一个都没有，目前只能这样解决；

如果有更好的建议的朋友希望能给我回复下，感谢！