cordova 環境配制和創建插件

環境配制

英文網站：http://cordova.apache.org/

中文網站：http://cordova.axuer.com/

安裝Cordova

Cordova的命令行運行在Node.js 上面並且可以通過NPM安裝。 根據 平台具體指導 安裝相應平台的依賴。打開命令提示符或終端，然后鍵入npm install -g cordova.

創建一個項目

使用命令行創建一個空的Cordova項目。導航到你希望創建項目的目錄，然后鍵入 cordova create <path>。

要知道這個命令完整的選項，鍵入cordova help create。

cordova create <PATH> [ID [NAME [CONFIG]]] [options]

例如：cordova create hello com.wrs.helloworld HelloWorld

cordova create 路徑 BundleID/PackageID 名稱

添加一個平台

在創建完一個Cordova項目后，導航到項目目錄。在項目目錄中，你需要添加你想構建app的平台

為了添加平台， 鍵入 cordova platform add <platform name>。

為了知道你可以添加的平台，你可以運行cordova platform。

例如：cordova platform ios android

運行App

在命令中,鍵入cordova run <platform name>。

例如：cordova run ios

 

常用命令：

cordova prepare:將項目根目錄下www文件替換到各個平台下的對應目錄，並配制各個平台的插件、修改各平台下config.xml文件及相關配置

cordova requirements:檢查是否滿足構建平台要求

cordova build:為所有添加平台構建www/js/index.js文件中的deviceready事件

cordova emulate:重新構建APP並運行，如:cordova emulate android

cordova plugin search 插件名:搜索插件，如:cordova plugin search camera

cordova plugin add 插件名:添加插件，如:cordova plugin add camera

cordova plugin rm 插件名:刪除插件，如:cordova plugin rm camera

cordova plugin ls:查看已安裝插件

 

創建插件

安裝plugman

npm install -g plugman

創建插件模板

plugman create --name JSBridge --plugin_id com.wrs.plugin --plugin_version 1.0.0
 

進入目錄cd JSBridge

添加支持平台

plugman platform add --platform_name android
plugman platform add --platform_name ios 

修改模板內容
plugin.xml修改為:

<?xml version='1.0' encoding='utf-8'?> <plugin id="JSBridge" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>JSBridge</name> <js-module name="JSBridge" src="www/JSBridge.js"> <clobbers target="cordova.plugins.JSBridge" /> </js-module> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="JSBridge"> <param name="android-package" value="com.wrs.plugin.JSBridge" /> </feature> </config-file> <config-file parent="/*" target="AndroidManifest.xml" /> <source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" /> </platform> <platform name="ios"> <config-file parent="/*" target="config.xml"> <feature name="JSBridge"> <param name="ios-package" value="JSBridge" /> </feature> </config-file> <source-file src="src/ios/JSBridge.m" /> </platform> </plugin>

將

<source-file src=”src/android/JSBridge.java” target-dir=”src/com/wrs/plugin/JSBridge” />
修改為：

 <source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" />

target-dir:將JSBridge.java拷貝到此目錄下，對應的是目錄名

clobbers：前段通過這個clobbers來調用www/JSBridge.js的導出方法
feature:定義服務名，feature會被注冊到平台下的config.xml文件中，www/JSBridge.js里實際上是通過這個服務名來調用原生方法的：
 exec(success, error, "JSBridge", "coolMethod", [arg0]);

<param name="android-package" value="com.wrs.plugin.JSBridge" />定義android的原生調用方法，value為包名+類名

<param name="ios-package" value="JSBridge" />定義ios的原生調用方法，value為類名

<source-file src="src/android/JSBridge.java" target-dir="src/com/wrs/plugin" />:聲明Android源碼路徑，target-dir:聲明Android源碼安裝的時候將被拷貝到Android項目的哪個文件夾下

JSBridge.js:
var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "JSBridge", "coolMethod", [arg0]);
};
前端業務調用方法：

cordova.plugins.JSBridge.coolMegthod(arg0, success, error);

整個調用流程為：
js調用
cordova.plugins.JSBridge.coolMegthod(arg0, success, error);
底層為
cordova調用exec(success, error, "JSBridge", "coolMethod", [arg0]);

模式為：exec(success, error, Service, Action, []);
Service是各自平台下config.xml里定義的feature名
Action對iOS來說是執行對應的方法，對Android來說作為方法入參action

在插件目錄調用打包插件命令：

sudo plugman createpackagejson . 

可以生成一個 package.json，防止安裝插件時出現:
Error: Invalid Plugin! xxxxx needs a valid package.json

如果不是以插件的方式，前段與原生需要互相調用的話，可以這樣配置：
在iOS平台下的config.xml，即：Staging/wwww/config.xml添加：

 <feature name="JSBridge">
 <param name="ios-package" value="JSBridge" />
 </feature>

android平台下的config.xml,即:res/xml/config.xml添加：

<feature name="JSBridge">
    <param name="android-package" value="com.wrs.plugin.JSBridge" />
</feature>
兩個平台都不能執行cordova prepare命令，否則會覆蓋掉上面的配置信息，
前段調用方式：
 <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function btnClick() {

 　cordova.exec(successCallback, failCallback, "JSBridge", "coolMethod", actionArgs);
}

</script>

如果iOS工程需要使用cocopods，需要添加cordova-plugin-cocoapod-support插件：

cordova plugin add cordova-plugin-cocoapod-support --save

在comfit.xml里面添加配置庫，代碼如下：

<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="pods_ios_min_version" value="9.0" />
        <preference name="pods_use_frameworks" value="true" />
        <pod branch="4.2.0" git="https://github.com/Alamofire/Alamofire" name="Alamofire" />
    </platform>

執行ionic build iOS，會自動生成cocoa pods的庫文件，
但是由於cocoa pods版本及oc與swift的問題，需要自己在生成工程后，重新使用自己的cocoa pods，更改pod file文件，執行pod install,這樣生成的工程才會對應版本，正常編譯。