cordova初体验

cordova初体验

首先，搞清楚一个概念，phonegap与cordova之间的区别。其实， phoneGap是原先的名字，Adobe将phoneGap捐给apache之后，起了另外的一个名字——apache cordova，phoneGap的名字也被保留了。
1）环境配置
在使用cordova之前，需要先进行环境的配置
现在cordova是利用nodeJS进行管理，所以需要先下载nodeJS。其中，就包含了npm管理器。下载地址：https://nodejs.org/，下载完后进行安装，安装完后打开cmd，输入命令 npm -version，如出现如下提示，则安装成功

接下来就是cordova的安装，在命令行输入npm install -g cordova过一段时间即可安装完毕，安装速度取决于网络情况.（有时候还可能失败，失败是一直卡在那里不动，而不会报错。。。）
等待安装完成后，输入命令 cordova -v,出现如下提示，则安装完成

接下来就是android环境的配置，安装jdk,下载android studio等就不详细说明了
最后还需要安装一下ant,下载地址：http://ant.apache.org/bindownload.cgi，下载完成后还需要配置一下环境变量
2）创建cordova项目
在cordova项目中需要各种各样的插件,也就是plugins，而这些插件最方便的下载方式是通过CLI下载，而且在后面的项目集成中需要用到的whitelist插件也是直接从创建的cordova项目中复制过去的，因此，在集成项目之前，需要先使用cmd命令创建一个cordova项目
create命令用来创建新项目。打开命令行窗口进入要创建项目的文件夹，输入以下命令：

cordova create project_name

这样就创建了一个简单的Cordova项目结构和一些Web内容文件。也可以用以下命令明确指定应用ID和应用的名字：

cordova create project_name app_id app_name

这个命令还把应用ID写进应用的配置文件，并且有了一个和项目名字不同的应用名字，如项目文件夹叫myapp而应用名字叫Hello，可以这么写：

cordova create myapp com.cordovaprogamming.hello hello

创建完成后查看一下目录：

config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面SplashScreen，还有平台的配置。
hooks：存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。
platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码，现在这个目录应该是空的。
plugins：插件目录，安装的插件会放在这里。
www：最重要的目录，存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。
说完了目录，接下来就是添加对应的平台支持，cd到项目目录，输入命令cordova platforms add android即可添加android平台支持，如果添加其他平台的支持只要替换命令中的平台名称即可，如要添加IOS的支持，只要在项目目录下执行cordova platforms add ios即可。
等待添加完成后，查看platforms目录，发现多了android文件夹，这里面装的就是cordova项目的android代码了

将项目导入android studio，运行，显示如下即说明项目创建完成

3）集成cordova到现有项目
首先，需要到官网下载集成项目所需的android代码，下载地址https://github.com/apache/cordova-android，下载完成后，解压，目录如下

按照官网提示，需要将framework进行ant jar打包成jar文件，但是在android studio中只需直接将framework以moudle形式导入即可，然后在assets文件夹下创建www文件夹，并将cordova-js-src文件夹复制到www文件夹下，最后需要将之前生成的工程的platforms\android\res\xml下的config.xml复制到自己工程的res\xml下，路径和名字都不要改，并进行相应的配置，至于为什么要复制之前生成的项目的config文件，是因为需要使用其中的whitelist插件，因为cordova默认没有这个插件是无法访问外网的。接下来就是插件的复制，将之前生成的项目中的whitelist插件复制到自己的项目中

将生成的项目中www文件夹下需要用到的文件复制到www文件夹下

这样cordova的集成就完成了
4）cordova的插件安装
cordova下载插件的方式是通过CLI命令下载的，而使用CLI命令时，工程必须符合cordova的工程格式，因此不能直接在集成的工程中安装插件，需要现在cordova生成的工程中下载，下载完毕后将文件复制到自己的工程中
下面是安装一个cordova dialog插件的具体步骤
(1)在cordova生成的工程的根目录下输入cmd命令

等待安装完成，接下来就是文件的复制了，具体有四处需要复制
(1)将android\src\org\apache\cordova下的插件cordova-plugin-dialogs文件夹复制到自己工程的E:\Present\app\src\main\java\org\apache\cordova目录下
(2)将android\assets\www\plugins下的插件cordova-plugin-dialogs文件夹复制到E:\Present\app\src\main\assets\www\plugins目录下
(3)将android\assets\www下的cordova_plugins.js文件复制到E:\Present\app\src\main\assets\www目录下覆盖
(4)将android\res\xml下的config.xml复制到E:\Present\app\src\main\res\xml目录下覆盖，然后修改包名（widget id）
5)cordova中一些有用的api
(1)connection
移动应用时常需要知道可用网络连接的类型。因为网络服务商在对超出的数据流量要收取费用，应用在进行数据量大的升级时建议使用收费低的Wifi而不要使用蜂窝移动网络。最佳实践是开发者对应用使用的数据使用类型做出分类，以便在写代码时使用数据流量费用最少。对于这种情况Cordova提供了connection对象用来识别当前可用的网络连接。
按照前面的步骤添加好插件，插件地址为

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

在代码适当的位置，通过以下js代码确定连接类型：

var ct = navigator.connection.type;

接下来可以把ct的值和预定义的连接类型属性的做值对比：
Connection.CELL
Connection.CELL_2G
Connection.CELL_3G
Connection.CELL_4G
Connection.ETHERNET
Connection.NONE
Connection.UNKOWN
Connection.WIFI 应用使用网络前要确定是否有网络连接，可以这么写：

ct = navigator.connection.type;
if (ct != Connection.None) {
    console.log("You have a connection");
    // 使用网络的代码

} else {
    // 警告用户没有网络连接无法进行
}          

Device

device对象可以用来确定设备的有限数量的信息。可用的设备属性如下：
device.name
device.cordova
device.platform
device.uuid
device.verson
device.model

5）自定义插件
自定义的插件主要有js插件和包含Android代码的Native插件两种，可以根据自己的需求编写
在构建之前先解析下插件的结构。Cordova有大量的关于如何构建插件的文档。”Plugin Development Guide”说明了如何为插件创建js接口，还有为每个移动平台创建native插件组件各自的指南。
Cordova插件是一组扩展或提升Cordova应用功能的文件。开发者向项目中添加插件，通过提供的js接口和插件交互。插件中包括一个叫plugin.xml的配置文件，一个或多个js文件，加上一些native代码文件(可选)，库文件，和相关的内容(HTML, CSS和其他内容文件)。
plugin.xml文件描述了插件并且告诉CLI复制哪些部分的文件，这些文件在每个平台上都不一样。plugin.xml中还有配置，由CLI用来设置平台方面的config.xml配置。plugin.xml文件中有许多可用选项。
一个插件中至少有一个js源文件，用来定义插件公开的方法、对象和属性。可以把所有的都封装到一个文件或多个。也可以把其他js类库打包(如jQuery)。
除了上述两种文件，剩下的文件主要用来定义插件。一般来说，插件要有每个支持平台的一个或多个native源码文件。它们上面还包括其他native文件(源码或预编译的)或内容(图像文件，样式表，HTML文件)。
构建插件的一个好参考是有大量的可用的示例。项目中下载的插件是zip包，可以解压并分析如何构建。一个方法是修改现有插件来满足需求。
我编写的是一个简单的andorid native插件carrier，主要功能为将android平台的字符串传递到cordova的html5页面中并将其显示出来，其主要步骤为：
(1)编写carrier.js，这是一个插件的入口，其主要代码如下：

cordova.define(“com.learningplugin.carrier.carrier”, function(require, exports, module) { var cordova = require(‘cordova’);

var carrier = {
    getCarrierName : function(successCallback, errorCallback) {
        cordova.exec(successCallback, errorCallback, 'CarrierPlugin', 'getCarrierName', []);
    },

    getCountryCode : function(successCallback, errorCallback) {
        cordova.exec(successCallback, errorCallback, 'CarrierPlugin', 'getCountryCode', []);
    }
};

module.exports = carrier; 
});

它开始用声明了一个cordova对象，指向加载的公开exec方法的cordova js库。接下来创建carrier对象，定义两个方法。每个方法都调用了cordova.exec并传入了cordova对象必要的函数名、对象和方法名，用来定位正确的完成功能的native对象和方法。文件最后是module.exports赋值，让carrier对象向Cordova应用公开。
然后是编写插件的android代码，其主要代码如下：

public class CarrierPlugin extends CordovaPlugin {
public static final String ACTION_GET_CARRIER_NAME = "getCarrierName";
public static final String ACTION_GET_COUNTRY_CODE = "getCountryCode";

public TelephonyManager tm;

public void initialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);

        Context context = this.cordova.getActivity().getApplicationContext();
tm = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);
    }

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
try {
if (ACTION_GET_CARRIER_NAME.equals(action)) {
                callbackContext.success("哈哈哈哈哈哈哈哈");
return true;
            } else {
if (ACTION_GET_COUNTRY_CODE.equals(action)) {
                    callbackContext.success(tm.getSimCountryIso());
return true;
                }
            }
            callbackContext.error("Invalid Action");
return false;
        } catch (Exception e) {
            System.err.println("Exception: " + e.getMessage());
            callbackContext.error(e.getMessage());
return false;
        }
    }
} 

然后只需在配置文件中添加相关配置，即可在html页面中调用native方法，具体需要配置的文件是xml文件夹下的config,xml和www文件夹下的cordova_plugin.js文件
config.xml中主要是添加特性描写和插件的具体位置

<feature name="CarrierPlugin">
    <param name="android-package" value="com.brlite.present.myplugins.carrier.CarrierPlugin" />
</feature>

而cordova_plugin.js文件主要是添加插件的js文件入口

{
"file": "plugins/com.learningplugin.carrier/carrier.js",
"id": "com.learningplugin.carrier.carrier",
"pluginId": "com.learningplugin.carrier",
"clobbers": [
"carrier"
]
}
module.exports.metadata = 
// TOP OF METADATA
{
"com.learningplugin.carrier": "1.0.0"
}