cordova 開發筆記

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;    }};