cordova 配置与使用

主要介绍的是windows下的环境配置，Mac下的环境只需要安装最新的Xcode和nodejs、cordova即可。

一、环境准备

1.android sdk下载或android studio安装

参考详细的安装和配置链接android studio安装 android sdk下载与配置

环境配置：

ANDROID_HOME=C:\Users\molin\AppData\Local\Android\Sdk
ANDROID_NDK_HOME=C:\Users\molin\AppData\Local\Android\Sdk\ndk-bundle

2.配置其他环境

1.安装java SDK

环境配置：JAVA_HOME=C:\Program Files\Java\jdk1.8.0_77

2.安装ant，参考链接ant安装配置和实例

环境配置：ANT_HOME=C:\greensoft\apache-ant-1.9.7

3.安装gradle

环境配置：GRADLE_HOME=C:\greensoft\gradle-3.2

4.安装maven

环境配置：

MAVEN_HOME=C:\greensoft\apache-maven-3.5.3
M2_HOME=C:\greensoft\apache-maven-3.5.3

5.path配置

%ANDROID_HOME%\tools;
%ANDROID_HOME%\platform-tools;
%JAVA_HOME%\bin;
%ANT_HOME%\bin;
%GRADLE_HOME%\bin;
%MAVEN_HOME%\bin;

3.安装 Node.js

4.安装cordova

利用node.js安装cordova npm install -g cordova

检测是否安装成功运行 cordova命令

二、使用cordova

1.创建工程，在工程文件目录下运行 cordova create projectName

2.cordova 命令行界面cli创建项目

cordova cli提供了--copy-from参数，允许制定从某个文件夹复制已有的资源

如：cordova create testtwo --copy-from=/Users/ray/Dropbox/blankcordova

3.cordova help命令查阅某项特性

4.文件夹结构

①config.xml——工程编译时用到的配置文件。命令行中指定的ID和name值

②hooks文件夹——为高级开发者提供了更改CLI工作方式的途径。

③platforms文件夹——存放工程的原生代码。

④plugins文件夹——插件

⑤www文件夹——Cordova应用的核心所在，HTML，JavaScript和CSS代码。

5.cordova platforms 查看项目支持的平台

cordova platforms add android 添加新平台

cordova platforms remove android 从工程中移除对android平台的支持简短rm命令格式：cordova rm android

6.发送cordova应用程序到模拟器（设备）

①cordova prepare 将www文件夹复制到合适的平台文件夹下，cordova prepare android 只准备一个平台。如果不填写平台，cordova cli会添加所有的平台支持。

②cordova compile 将代码编译成能在设备上运行的二进制格式

③cordova build 合并了①②的指令一起执行，该命令可以在最后的步骤中针对某个平台来执行。

④cordova emulate 可以跳过cordova build命令，将会准备好平台，编译程序，并发送到模拟器。

⑤cordova run 发布程序对源代码进行修改后再次运行，在浏览器打开就可以看到修改的部分

7.插件访问设备

插件在 www.npmjs.com网站内搜索，使用ecosystem:cordova进行搜索cordova插件。

①cordova plugins 输出已使用插件的列表

②cordova plugin add pluginName 安装插件如果当前仅安装ios平台的插件，若添加android平台，则会自动添加android平台的插件。如cordova plugin add cordova-plugin-camera

③cordova plugin remove pluginName 移除插件

④插件访问设备，cordova应用会触发deviceready设备就绪时间，使用JS监听事件。

document.addEventListener('deviceready',function(){
    //ready to go 
},false);//如何出来里未捕获的事件，默认false

如果使用jQuery，可以使用$(document).ready来做延迟处理，等待DOM准备就绪后再执行代码。

html文件中会有cordova.js,但实际没有这个文件，在使用cordova cli命令行工具为特定平台编译时，才被注入加载进来。

DOM中绑定插件处理事件，如：具体使用插件要查看插件的开发文档

document.addEventListener('deviceready',init,false);
function init(){
   //listen for button clicks
   documrnt.quereySelector('#alertTest').addEventListener("touchend",function(){

        //do something
    },false);
}

8.移动应用UI框架

Ionic、jQuery Mobile、Ratchet、Kendo UI

三、cordova工程打包

1.config.xml配置文件自定义cordova工程

<?xml version='1.0' encoding='utf-8'?>
<!--应用程序id值-->
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<!--应用程序名称-->
    <name>HelloCordova</name>
<!--可选应用程序描述-->
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
<!--可选应用程序作者信息-->
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
<!--默认加载的页面-->
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
<!--指定访问资源的安全标签-->
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

ID值是用来标识应用程序的唯一值，应用程序的名称也是唯一的。如果在命令行中不指定这些值，会被设置为默认值。

config.xml中的配置项分类

①对所有平台都适用的通用首选项；

②只对一个平台起作用的首选项；

③图标和启动界面设置；

④插件的设置；

⑤只对一个平台起作用的设置，这与特定平台的设置有区别。通用的设置，在任何地方都适用，而不仅仅局限在某个特定平台。

2.通用（全局）的首选项

选项名	用途	适用平台
Fullscreen	决定应用程序是否全屏	除iOS之外的所有平台
Orientation	将应用程序锁定到一个方向	除iOS之外的所有平台
DisallowOverscroll	阻止应用程序移出屏幕	仅支持Android和iOS
BackgroundColor	指定应用程序的背景色	仅支持Android和Blackberry
HideKeyboardFromAccessoryBar	隐藏键盘上方的附加工具栏	仅支持iOS和Blackberry

使用需添加新标签：

如指定应用程序使用Fullscreen首选项

3.特定平台下的首选项详细说明

如果希望某个首选项仅适用于一个特定的平台，需要把首选项标签封装在<platform>标签中

其他首选项参考网址 http://docs.cordova.io 或 http://devgirl.org/files/config-app/

4.使用图标和启动界面

图标和启动页面详细配置可参考图标和启动页配置

设置图标和竖向启动界面

5.使用merges文件夹，方便编译不同的版本。（多平台时使用，单一平台可以忽略）

默认情况下，merges文件夹并不存在，当cordova cli创建工程师，会自动检查merges文件夹，以查看支持的每个平台。当merges文件夹下特定平台中的一个文件与www文件夹下的一个文件相匹配时，那么www文件夹下的文件会被merges文件夹下的文件替换，若www文件夹下没有该文件，则会添加该文件。

6.使用hooks

hooks能够改变cordova cli命令行的动作行为。在执行动作之前运行的脚本，在执行动作之后运行的脚本。

定义hooks：①默认情况下，cordova cli命令行工具会查找hooks子目录下的钩子脚本。②可以在config.xml进行配置，这就允许使用<platform>标签来指定钩子用于哪个特定平台。

hooks在命令行工具前置或后置起作用，有以下钩子可以使用：

before_build, after_build;

before_compile, after_compile;

before_emulate, after_emulate;

before_platform_add, before_platform_ls, before_platform_rm, after_platform_add, after_platform_ls, after_platform_rm;

before_plugin_add, before_plugin_ls, before_plugin_rm, before_plugin_install, before_plugin_search, before_plugin_uninstall, after_plugin_add, after_plugin_ls, after_plugin_rm, after_plugin_install, after_plugin_search;

before_prepare, after_prepare;

before_run, after_run;

before_serve, after_serve;

pre_package(只适用windows 8 和windows phone)

示例，hooks/after_platform_add/install_plugins.js,为平台添加插件的钩子，实现效果，当添加了一个新平台时，跟这个平台相关的插件就会被自动添加进来。钩子js文件必须要放在准确执行状态命名的文件夹下。

//为每个平台引入多个插件的列表
var pluginlist = [//为每个平台引入多个插件的列表
   "cordova-plugin-device",
   "cordova-plugin-device-motion",
   "cordova-plugin-device-orientation",
   "cordova-plugin-device-geolocation"
];

//加载类库，允许脚本做命令行调用
var exec = require('child_process').exec;

//当完成并输出结果后，回调函数开始运行
function puts(error, stdout, stderr){
    console.log(stdout);
}

//遍历每个插件，并添加进来
pluginlist.forEach(function (plug){
   exec("cordova plugin add "+plug, puts);
});

当想要自定义指定某个文件存放钩子或钩子只在某个特定的平台使用时，可以在config.xml文件中配置。

添加<hook type = "after_platform_add" src="myhooks/install_plugins.js" />即可，如要在特定平台使用则在<platform>中定义。

若是采用默认创建方式创建hooks，钩子脚本中会传递各种参数信息，数据是通过一系列的环境变量来传递的：CORDOVA_VERSION, CORDOVA_PLATFORMS, CORDOVA_PLUGINS, CORDOVA_HOOK和CORDOVA_CMDLINE.

使用参数如console.log(process.env.CORDOVA_HOOK);

第二种在config.xml中创建钩子的方法访问参数，需要进行模块化封装

module.exports = function (context){

console.log("This hook is "+context.hook);

}

7.为app做签名

通过命令行调用的方式对该应用程序进行签名。

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

上面的命令会创建密钥库，同时也会创建一个密钥。

-keystore 后的参数是密钥库的文件名。

-alias 后的参数是密钥库的别名。

在platforms文件夹下的Android文件夹下创建一个ant.properties文件。

文件中添加key.store = ../../mykeystore.keystore //密钥库文件存储位置

key.alias = mykeystore //密钥库别名

已经创建好密钥库和密钥后，运行cordova bulid --release，告知cordova生成应用程序的可发布版本。