Hybird App开发中的兼容性问题以及解决方案

       本文主要记录我在Hybird App混合开发App中遇到的一些问题以及解决方案，希望对您有用。

一、解决Android沉浸式布局带来的样式问题

       在android4.4之后引入了沉浸式布局，开发者可以改变状态栏的透明度、改变状态栏的颜色或者背景。但是在进行混合开发的时候，这种布局会影响到web页面顶部设置了置顶元素的展示效果。如下图：

状态栏和web页面的顶部重叠在一起了
       当前，解决问题的方案很简单，就是给我们页面中NavigationBar组件添加padding-top的值。如下：

.nav-bar {
         ...
        // 适配手机 stateBar 
        padding-top: $stateBarHeight;
}

二、解决IOS中的样式问题

       问题1、在IOS设备中，网页滚动卡顿。

       解决方案：需要指定滑动元素使用IOS原生滑动方式

html,body{
    /* IOS 下的滑动卡顿问题 */
    -webkit-overflow-scrolling: touch;
}

       问题2、点击按钮出现高亮效果。

       默认情况下，点击按钮会出现如图所示的效果。

按钮出现高亮效果
解决的方案仍然是在html,body添加ios原生的一些样式

html,body{
  /* IOS 下点击取消默认高亮效果 */
  -webkit-tap-highlight-color:rgba(0,0,0,0) 
}

       问题3、超出屏幕安全区块

       在iphoneX上面会出现页面超出安全区的情况。如下图所示：

顶部和底部内容超出安全区域
iphone各型号的安全区间
我们可以针对iphoneX特性行解决这个问题。下面以vue中的使用方式为例。
       1、判断当前运行环境是否为iphoneX，并将判断结果挂载到window对象下面
IsIphoneX.js

 const isIphonex = () => {
    if (typeof window !== 'undefined' && window) {
        // g    全局搜索。
        // i    不区分大小写搜索。
      return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
    }
    return false;
  };

  window.isIphoneX = isIphonex();

       2、在main.js中执行IsIphoneX.js

import '@js/IsIphoneX';

       3、设置安全样式

.iphonex-top {
    padding-top: 44px !important;
}

.iphonex-bottom {
    padding-bottom: 34px;
}

       有时会碰到margin失效的问题,所以我们推荐使用padding.
       4、使用vuex同步是否为iphoneX的状态
       store.js

export default new Vuex.Store({
  state: {
    // 当前设备是否为 IphoneX
    isPhoneX: false
  },
  mutations: {
    /*
    * 修改 isIphoneX
    */
   setIsIphone(state,isIphoneX){
      state.isIphone = isIphoneX
   }
  }
})

       使用iphone适配方案
       在顶部导航（navigationBar）中使用

  <div class="nav-bar z-index-max" :class="[{'iphonex-top' : isIphoneX}, {'bottom-line' : pageName}]" :style="navBarStyle">

data: function () {
    return {
       isIphoneX: window.isIphoneX
    }
}

       在底部菜单栏（toolBar）中使用

<div class="tool-bar" :class="{'iphonex-bottom' : isIphoneX}">

data(){
  return{
      isIphoneX: window.isIphoneX
  }
}