Cordova專案建立與外掛的簡單教程
環境
下載和安裝Node.js :
安裝完成後你可以在命令列中使用node 和 npm
安裝cordova 模組使用Nodejs的npm工具。cordova模組會被npm工具自動下載:
sudo npm install -g cordova
建立專案
cordova create hello com.example.hello HelloWorld
hello為資料夾
com.example.hello為應用程式的id名,與Xcode中類似,可以在 config.xml 中修改,如果不指定的話預設為 io.cordova.hellocordova
HelloWorldApp的名稱,也可在 config.xml 中修改
增加可用平臺
cordova platform add ios --save (--save會更新config.xml中的資訊)
檢查平臺設定狀況
cordova platform ls
部署
安裝:sudo npm install -g ios-deploy --unsafe-perm=true
(OS X 10.11以上需要加上--unsafe-perm=true )
為所有新增的平臺構建:(構建會把最外層的www資料夾中的改動複製到staging中)
cordova build
為單個平臺構建
cordova build ios
執行
cordova run ios
模擬器開啟
cordova emulate ios
cordova emulate ios --target iPhone-6s
cordova emulate ios --target iPhone-6s-Plus
外掛
搜尋命令:cordova plugin search camera
新增外掛:cordova plugin add cordova-plugin-camera
當前使用的外掛:cordova plugin ls
自定義外掛
ios端
在Plugins 資料夾下建立 service類,繼承自CDVPlugin,同時要引入CDVPlugin.h。
service類中建立方法
- (void)action:(CDVInvokedUrlCommand*)command;
在方法中寫原生程式碼
config.xml 配置檔案
widget 節點下新增如下內容:
<feature name="service"> <param name="ios-package" value="service" /> <param name="onload" value="true" /> </feature>
html中呼叫
cordova.exec(function(winParam) {}, function(error) {}, "service", "action", ["firstArgument", "secondArgument", 42, false]);
以下是每個引數的描述:
function(winParam) {} 成功回撥函式。假設你的 exec呼叫成功完成,這個函式和你傳遞給它的引數一起執行。
function(error) {} 錯誤回撥函式。如果操作未成功完成,則此函式使用可選的錯誤引數執行。
service 在本機平臺呼叫的服務名稱,對應於本地的同名類。
action 在本機端呼叫的方法名稱。這通常對應於上述類的同名方法。
[/* arguments */] 傳入本地環境的引數陣列。
這只是外掛的簡單使用,還有一種建立多平臺外掛的方法,稍微複雜一些
封裝多平臺外掛
安裝plugman:
sudo npm install -g plugman
//sudo 是為獲取 `/usr/local/lib/node_modules` 的寫入許可權
使用版本命令檢查安裝:
plugman -v
plugman的使用幫助:
plugman -help
建立一個外掛
命令格式如下:
$ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
如:
plugman create --name iPaynowTestPlugin --plugin_id iPaynowTestPlugin --plugin_version 1.0.0
為外掛新增支援的平臺,這裡新增iOS和android
cd到外掛的根目錄下執行:
plugman platform add --platform_name android
plugman platform add --platform_name ios
到外掛資料夾src/ios/ 路徑下的ios檔案中新增想要的方法,如:
- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
再去www資料夾的js檔案新增想要的方法
exports.operations = {
coolMethod(arg0, success, error) {
exec(success, error, 'bussinessPlugin', 'coolMethod', [arg0]);
}
}
上面兩個方法都是建立後系統自帶的,根據它們的格式寫就好了
配置 package.json 檔案,package.json 是npm的一個描述檔案,用於管理
npm init
然後根據自己的資訊輸入完即可
如果沒有這個檔案在我們新增外掛的時候,可能會出現needs a valid package.json 錯誤而無法安裝外掛。
將外掛新增到專案
進入專案的根目錄執行命令:
cordova plugin add 【外掛路徑】
這樣就新增成功了
解除安裝拆件使用 :
cordova plugin rm 【外掛名】
(可選)上傳外掛到npm平臺
在本地進行開發使用時用上面的步驟就可以了,如果想上傳到npm平臺需要進行以下步驟
現將外掛上傳到github,然後完善package.json檔案內容,同時需要npm賬戶,如果沒有註冊使用者,先執行:
npm addUser
已有使用者執行登入操作:
npm login
最後執行釋出:
npm publish
然後在npm中就可以找到自己上傳的包,便可以通過cordova plugin add 【包名】進行外掛的安裝了。
參考部落格:https://blog.csdn.net/csdn100861/article/details/78585333#31-建立專案