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

一、前言

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

二、正文

• 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,