最近一段时间做了两个混合开发APP的项目，分别使用了‘Ionic’和‘Quasar’进行开发，‘Cordova’进行移动应用构建

Cordova是一个开发跨平台Web App的工具, 将Web开发项目构建成移动应用，基于浏览器进行开发，同时可以依赖各种Cordova插件进行原生APP的操作，这里就主要写一下用到的一些插件

切换到iOS WkWebView

Ionic和Quasar默认使用的都是UIWebView，但是在iOS 12.0中已弃用，在开发时就需要做一下切换，推荐使用cordova-plugin-wkwebview-engine插件

1

cordova plugin add cordova-plugin-wkwebview-engine

安装完成后在config.xml中platform ios部分添加添加

1
2
3

<platform name="ios">
    <preference name="WKWebViewOnly" value="true" />
</platform>

详见‘https://github.com/apache/cordova-plugin-wkwebview-engine’

状态栏设置

推荐使用cordova-plugin-statusbar，可以对状态栏字体，背景色等作出调整
比如iOS状态栏字体默认是黑色的，想要修改成白色，在config.xml添加

1

<preference name="StatusBarStyle" value="lightcontent" />

详见‘https://github.com/apache/cordova-plugin-statusbar’

状态栏高度

由于不同型号手机状态栏高度不一致，我们有时候需要去获取到状态栏高度，可以使用cordova-plugin-statusbar-height插件
详见‘https://github.com/wangjunget/cordova-plugin-statusbar-height’

启动图

推荐使用cordova-plugin-splashscreen，配置启动图和相关设置
需要注意加入一下配置，避免安卓启动图显示比例出现问题

1

<preference name="SplashMaintainAspectRatio" value="true" />

详见‘https://github.com/apache/cordova-plugin-splashscreen’

需要注意的坑点

1. iOS启动图名字需要严格按照文档中来，否则不会生效
2. 安卓启动图不能只设置横屏或者竖屏，否则安装包解析会出错

横竖屏

Cordova应用默认是可以切换横竖屏显示，如果想要固定一种显示，可以添加配置

1
2
3
4

// 固定竖屏
<preference name="Orientation" value="portrait" />
// 固定横屏
<preference name="Orientation" value="landscape" />

如果想要动态的去设置的话，可以安装cordova-plugin-screen-orientation插件来操作

1
2
3
4

// 固定横屏
screen.orientation.lock('landscape');
// 取消固定
screen.orientation.unlock();

config.xml中的配置和cordova-plugin-screen-orientation是可以结合使用的
详见‘https://github.com/apache/cordova-plugin-screen-orientation’

未完待续