1.安装
在MAC中只需要安装Xcode、nodejs、cordova就可以进行Cordova打包ios安装包。
其中MAC 系统版本要在10.10+以上,Xcode版本要在7.0+以上。
如果出现xcode路径问题,需要在xcode界面的属性中重新设置。
2.打包
在MAC中如果要打包Android apk需要配置Android的环境,否则,只能打包ios。在windows中只能打包Android apk。
3.调试
在终端中,项目目录下运行cordova emulate,xcode会打开模拟器进行模拟调试,要选择机型需要在Xcode中打开cordova项目,项目文件夹 -> platforms -> ios。选择模拟机型后点击运行,会在选择的机型中进行模拟。
真机模拟,可以参考链接iOS 无证书真机调试
4.适配
主要是两个问题:
①iOS 7.0+的状态栏重合问题
cordova 使用插件cordova-plugin-statusbar 进行配置,但是在真机调试中,iPhone 5S没有作用
参考设置https://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap
②iphone X黑边和白边问题
主要是通过设置全屏起始页可以解决黑边问题,
<platform name="ios">
<!-- 这里只加了针对iphone x的尺寸 1125 * 2436 -->
<splash height="2436" src="res/screen/ios/qidong.png" width="1125" />
</platform>
白边问题(即安全区域问题)
<meta>标签中设置viewport-fit=cover,就可以消除白边
设置safe-area-inset-top,安全区域 具体可参考博客 关于H5页面在iPhoneX适配
Removing the White Bars in Safari on iPhone X
根据项目需求进行设置状态栏,如果有白边,状态栏刚好是白色时,看不清状态栏内容,此时就需要添加cordova-plugin-statusbar插件,在config.xml文件中配置<preference name="StatusBarStyle" value="styleDefault" /> 等
styleDefault
状态栏默认样式,也就是电池信号黑色;lightContent
状态栏内容浅色,貌似就是白色,适合深色背景;blackTranslucent
状态栏黑色半透明,跟上面一样的效果,电池时间都是白色的,适合深色背景;
查看源码https://github.com/jonathannaguin/org.apache.cordova.statusbar
5.发布