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