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

};