Cordova状态栏(cordova-plugin-statusbar)插件的使用,让webapp具备nativeapp的用户体验

1、前言

众所周知，webapp对比nativeapp而言，虽然具备跨平台的优点，可是在用户体验方面却比不上nativeapp，好比如何让webapp具有ios的惯性滚动和边缘回弹，又如如何让webapp具备和原生app同样的状态栏(透明、沉浸式)。对于前者，我采用的是better-scroll(一款重点解决移动端各类滚动场景需求的插件),对于后者，我采用的是Cordova状态栏插件--cordova-plugin-statusbar，由于我所在公司开发的webapp就是用vue进行开发，而后再用Cordova进行打包，这也是本文要和你们分享的内容。

2、正文

• Cordova-plugin-statusbar 插件的安装和使用

cordova plugin add cordova-plugin-statusbar
复制代码

安装完插件以后，在cordova工程的config.xml文件里面进行如下配置

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightContent" />
复制代码

StatusBarOverlaysWebView它决定了状态栏是否覆盖webview，值为布尔类型，为true时覆盖，具体表现就是和视图重叠，为false时不覆盖，默认是true。

StatusBarStyle它决定了状态栏的样式，可选值为default,lightcontent, blacktranslucent, blackopaque，值为default时，具体表现为状态栏字体颜色为黑色，而值为lightcontent、blacktranslucent、blackopaque，具体表现一致，状态栏字体颜色为白色。

须要注意的是，这里不须要配置StatusBarBackgroundColor，由于不设置值的时候，状态栏的背景颜色是透明的，也是本文想要达到的效果，可参见如下cordova官方文档

StatusBarBackgroundColor (color hex string, no default value). On iOS, set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent.

在配置完后进行打包，这里先对ios进行调试，可参见如下效果图，

能够发现，并无达到咱们想要的效果，这看起来就好像是状态栏没有覆盖webview，而是占据着必定的位置，并且从第二张图能够发现固定定位top为0的元素竟然是在状态栏的下方而不是和状态栏重叠在一块儿，这是为何呢？接下来就要说说ios的状态栏和安全区了。

• 状态栏和安全区

在早期版本的iOS上，状态栏只是一个固定屏幕上方的黑色条带，而且是不可触摸的。它属于系统UI的一部分，你的app运行在它的下方空间中。随着iOS7的推出，状态栏变成了透明的，它的颜色取自应用程序导航栏的颜色。对于运用在webview中的app好比Cordova，一般要判断iOS的版本而后在固定的导航栏上方预留20px的边距，以便正确的填充导航栏。而对于iOS 11与早期版本的不一样在于，webview内容区超出了安全区。这也就是说，若是你有一个头部导航条使用fixed定位元素而且使用top: 0，那么它会在屏幕顶部20px的下方渲染：对齐到状态栏的底部。

既然如今知道了缘由，那有没有办法解决呢，答案是固然有，苹果给咱们一种方式来控制这种形式，经过meta标签。更幸运的是，这种新的视口行为也适用于老的版本，包括弃用的UIWebView，这个视口选项就是viewport-fit！

因此咱们只要在index.html的meta标签加上viewport-fit=cover,而且预留出20px或着更多的高度(具体可自由调整，但不低于20px)给状态栏便可。

关于更多状态栏和安全区的具体内容可参见cordova iOS11 webView适配(转)

接下来继续打包调试，效果图以下

如今已经达到咱们想要的效果了，可是完了吗？其实并无，由于上图中状态栏的字体颜色是白的的，背景图片是深色的，可是若是遇到背景色也是白色的视图，那么状态栏就会看不见了，因此接下来就是根据路由或者经过事件动态改变状态栏的样式，

这里就要用到StatusBar.styleLightContent()和StatusBar.styleDefault()这两个方法了。

在app.vue文件里面侦听路由

methods: {
    onDeviceReady () {
        // 根据路由动态改变状态栏样式
        // 我给状态栏字体色为白色的路由都设置了一个路由元meta,属性statusBgc为1
        this.$route.meta.statusBgc ? StatusBar.styleLightContent() : StatusBar.styleDefault()
    }
},
watch: {
    $route (to, from) {
        // cordova插件会定义一个StatusBar对象，当它只能在deviceready后才能使用
        document.addEventListener("deviceready", this.onDeviceReady, false)
    }
  }
复制代码

• iphoneX的适配

因为iphoneX齐刘海的设计，以前预留出的20px仍会致使视图会被刘海锁覆盖，不过好在苹果添加了一种方法，将安全区域布局指南暴露给CSS。他们添加相似一个CSS的变量概念，叫做CSS constant。能够考虑这样的CSS变量，这些变量是由系统设计的，不能被覆盖。它们能够经过CSS的constant()函数来完成。

因此只要加上

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);  

复制代码

constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素） constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素） constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素） constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

• 安卓的适配

在ios调试完了以后，我发现

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarStyle" value="lightContent" />
复制代码

这两配置在安卓好像并不起做用，具体表现就是状态栏不覆盖webview并且背景色是黑色的，后来看了下cordova文档发现安卓须要使用StatusBar.overlaysWebView(true)这个方法。对以前的app.vue进行修改以下：

methods: {
    onDeviceReady () {
        // 根据路由动态改变状态栏样式
        // 我给状态栏字体色为白色的路由都设置了一个路由元meta,属性statusBgc为1
        this.$route.meta.statusBgc ? StatusBar.styleLightContent() : StatusBar.styleDefault()
    }
},
watch: {
    $route (to, from) {
        // cordova插件会定义一个StatusBar对象，当它只能在deviceready后才能使用
        if (cordova.platformId == 'android') { // 安卓须要特殊处理，参见 cordova 官方文档
        StatusBar.overlaysWebView(true)
      }
        document.addEventListener("deviceready", this.onDeviceReady, false)
    }
  },
created () {
    // 保证安卓第一次进入状态栏能覆盖webview
    document.addEventListener("deviceready", this.onDeviceReady, false)
  }
复制代码

3、结束语

好啦，以上就是本文所要分享的所有内容，感谢阅读～

4、参见

cordova-plugin-statusbar

cordova iOS11 webView适配(转)

iPhone X的缺口和CSS