1.安装 Node.js
Cordova需要Node.js环境,访问https://nodejs.org 下载安装, LTS版本即可,不要最新版。
2.安装 Cordova
执行下述命令把Cordova做为全局模块安装,可在任何目录执行。
$ sudo npm install -g cordova
3.安装 XCode
XCode是Apple提供的开发工具,一般MAC系统都默认安装好了。如无或需要更新,请到MAC的App Store去下载或更新。
4.安装ios调试和部署支持模块
$ sudo npm install -g ios-sim //for 模拟器
$ sudo npm install --unsafe-perm=true -g ios-deploy //for 真机
5.检查所有需要安装的模块是否都已经安装
$ cordova requirements
如有需要的模块未安装则会打印醒目的红色提示。
6.创建APP工程
$ cordova create hello cn.reyo.hello HelloWorld
hello: 工程存放的路径名
cn.reyo.hello: ios app的bundle id, 要用这种反域名格式,并且要和之后提供的Provision File 匹配
HelloWorld: 项目称
以下的命令需要转到hello目录去执行。
7.添加IOS 平台
$ cordova platform add ios –save
iOS 中使用cordova 开发,但是状态栏总是白条,我想改成和页面统一的颜色
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验
设置设备状态栏背景颜色 StatusBar.backgroundColorByHexString('#11c1f3');//设置数值类型
StatusBar.backgroundColorByName("white"); //设置名称类型
可以去参考 StatusBar插件的js源代码,里面很多设置方法。 var namedColors = {
"black": "#000000",
"darkGray": "#A9A9A9",
"lightGray": "#D3D3D3",
"white": "#FFFFFF",
"gray": "#808080",
"red": "#FF0000",
"green": "#00FF00",
"blue": "#0000FF",
"cyan": "#00FFFF",
"yellow": "#FFFF00",
"magenta": "#FF00FF",
"orange": "#FFA500",
"purple": "#800080",
"brown": "#A52A2A"
}; var StatusBar = { isVisible: true, overlaysWebView: function (doOverlay) {
exec(null, null, "StatusBar", "overlaysWebView", [doOverlay]);
}, styleDefault: function () {
// dark text ( to be used on a light background )
exec(null, null, "StatusBar", "styleDefault", []);
}, styleLightContent: function () {
// light text ( to be used on a dark background )
exec(null, null, "StatusBar", "styleLightContent", []);
}, styleBlackTranslucent: function () {
// #88000000 ? Apple says to use lightContent instead
exec(null, null, "StatusBar", "styleBlackTranslucent", []);
}, styleBlackOpaque: function () {
// #FF000000 ? Apple says to use lightContent instead
exec(null, null, "StatusBar", "styleBlackOpaque", []);
}, backgroundColorByName: function (colorname) {
return StatusBar.backgroundColorByHexString(namedColors[colorname]);
}, backgroundColorByHexString: function (hexString) {
if (hexString.charAt(0) !== "#") {
hexString = "#" + hexString;
} if (hexString.length === 4) {
var split = hexString.split("");
hexString = "#" + split[1] + split[1] + split[2] + split[2] + split[3] + split[3];
} exec(null, null, "StatusBar", "backgroundColorByHexString", [hexString]);
}, hide: function () {
exec(null, null, "StatusBar", "hide", []);
StatusBar.isVisible = false;
}, show: function () {
exec(null, null, "StatusBar", "show", []);
StatusBar.isVisible = true;
} };