Cordova整合筆記（for iOS）
Crodova使用總結
1.Mac機上Cordova環境配置
2.在已有iOS專案中整合Cordova
3.在Cordova中建立外掛，實現h5與原生互動（以自己公司網頁為例）
Mac機上Cordova環境配置
這部分網上有很多，但我寫這篇初衷是個人筆記，所以再簡單說一下
- 安裝cordova需要先安裝node.js。
- 如果你沒有安裝git client，需要下載並安裝一個git客戶端
- 使用node.js的依賴包管理工具npm來進行cordova安裝。
開啟終端輸入如下命令：
sudo npm install -g cordova
在iOS專案中整合Cordova
- 直接新建一個Cordova專案
開啟終端輸入如下命令，該命令可能需要一些時間來完成：
cordova create hello com.example.hello HelloWorld
| Parameter | Description | Notes |
|---|---|---|
| hello引數是必填 | 將為你的專案生成一個hello目錄 | www子目錄是應用程式的主頁，以及各種資源(css,js,img)，遵循共同的web開發檔案命名規範。這些資源將儲存在裝置上的本地檔案系統，而不是遠端服務。config.xml檔案包含重要的需要生成和分發應用程式的元資料。 |
| com.example.hello 引數可選 | App ID | 如果不填寫這個引數，第三個引數就要省略，預設值是 io.cordova.hellocordova，但建議你填寫一個適當的值。 |
| HelloWorld引數可選 | 應用程式的專案名 | 這個引數的預設值是 HelloCordova，但建議你填寫一個適當的值。 |
| [–template templatePath] 引數可選，一般不填寫 | 使用模板建立一個專案 | 所有檔案和資料夾的模板將被複制到新的專案。平臺和外掛可能包含在一個模板。這個引數是可選的。模板的路徑可以是一個本地路徑，NPM模組或Git URL |
2. 在已有專案中新增Cordova
在Cordova中建立外掛，實現h5與原生互動（以自己公司網頁為例）
先給大家看下我的專案目錄
index.html部分內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", yourCallbackFunction, false);
function buttonClick(){
Cordova.exec(successFunction, failFunction, "YourPluginName", "myMethod", ["回撥方法"]);
}
function successFunction(){
alert("successFunction");
}
function failFunction(){
alert("failFunction");
}
</script>
</head>
<body>
<p>ExampleObject</p>
<button onclick="buttonClick()">自定義外掛</button>
</body>
</html>上面的html內有一個自定義外掛按鈕，當點選按鈕是，網頁會發送一個事件
Cordova.exec(successFunction, failFunction, “YourPluginName”, “myMethod”, [“回撥方法”]);。
| 引數 | 說明 |
|---|---|
| successFunction | 成功後的回撥 |
| failFunction | 成功後的回撥 |
| YourPluginName（LogoutAndExit） | 下方自定義的外掛名稱 |
| myMethod（action_logout_exit） | 與OC該外掛類中的方法名保持一致 |
| parameter | 回撥傳遞的引數 |
1. 在Plugins下建立OC外掛類，這裡以我們專案中的退出登入的事件為例，建立了一個CDVLogout類
CDVLogout類，類定義一個方法，此方法的方法名要與html中此按鈕的點選事件下定義的方法名保持一致
方法內部就可以寫你收到html的點選通知以後想要在原生上做的事情
#import <Foundation/Foundation.h>
//#import <Cordova/Cordova.h>
#import <Cordova/CDVPlugin.h>
@interface CDVLogout : CDVPlugin
-(void)action_logout_exit:(CDVInvokedUrlCommand*)command;;
@end- 在config.xml檔案中加入外掛引用
<feature name="LogoutAndExit">
<param name="ios-package" value="CDVLogout" />
<param name="onload" value="true" />
</feature>LogoutAndExit: html中定義的外掛名稱
CDVLogout: OC原生外掛類
OK，至此該有的配置和程式碼都有了，應該就能測試了，因為程式碼裡面涉及公司資訊，所以不貼程式碼了
- 在cordova_plugins.js中引入自定義外掛
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
/*file:js檔案路徑
id:對應某外掛中的某個具體功能
clobbers:js通過它去呼叫js外掛中具體的方法
*/
{
"file": "plugins/org.apache.cordova.logoutandexit/www/LogoutAndExit.js",
"id": "org.apache.cordova.logoutandexit.LogoutAndExit",
"clobbers": [
"window.logoutandexit"
]
},
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.1",
"org.apache.cordova.logoutandexit": "0.1.0",
};
// BOTTOM OF METADATA
});其他：
- 常見Cordova終端命令
使用命令列工具，執行App的命令是：
cordova run
例如，我想在瀏覽器中執行 App，我就在終端裡輸入：
cordova run browser
然後，就會開啟瀏覽器，就會執行App。
當然，如果我們想要在iOS 上執行 App,我們也可以輸入：
cordova run ios
也可以到指定目錄下開啟iOS 工程檔案
檢視更多的關於執行App 的命令，可以輸入 cordova help run。