Cordova安裝
安裝Cordova命令行工具,通過下面步驟:
1.下載和安裝Node.js,安裝完成后在命令行中使用node
和 npm
冠绢。
2.(可選)下載和安裝git client如果你沒有囤躁。安裝成功后,你可以在命令行中使用git福铅。 這個(gè)命令行使用下載git倉庫中的資源萝毛。
3.安裝cordova
模塊使用Nodejs的npm
工具。cordova
模塊會(huì)被npm工具自動(dòng)下載
- 在OS X和Linux上:
$ sudo npm install -g cordova
在OS X和Linux上, npm
命令加上前綴sudo
因?yàn)?code>cordova可能需要安裝在其他的受限制目錄比如 /usr/local/share
滑黔。如果你使用可選工具nvm/nave或者具有安裝目錄的寫權(quán)限笆包,那么你可以省略sudo
前綴。這里有更多提示 可用在使用 npm
沒有 sudo
前綴時(shí)略荡,如果你想那么做庵佣。
- 在Windows上:
C:\>npm install -g cordova
-g
標(biāo)志是告訴npm
我們?nèi)职惭b cordova
。否則我們將會(huì)安裝在當(dāng)前工作目錄的 node_modules
子目錄汛兜。
安裝完成后巴粪,你應(yīng)該能夠在命令行中運(yùn)行cordova
命令,在沒有任何參數(shù)的時(shí)候會(huì)打印一些幫助信息粥谬。
創(chuàng)建APP
首先我們創(chuàng)建一個(gè)HelloWorld項(xiàng)目添加ios
平臺(tái)肛根。
$ cordova create 路徑 bundle ID 工程名字
$ cd 工程路徑
給你的App添加目標(biāo)平臺(tái)。我們將會(huì)添加ios
和android
平臺(tái)帝嗡,并確保他們保存在了config.xml
中:
$ cordova platform add ios --save
$ cordova platform add android --save
檢查你當(dāng)前平臺(tái)設(shè)置狀況:
$ cordova platform ls
創(chuàng)建自定義插件
- 首先安裝
plugman,cordova
需要用它來創(chuàng)建插件,可使用node
命令來安裝
$ npm install -g plugman
-
plugman
安裝成功后就可以創(chuàng)建插件了,這里我們學(xué)習(xí)自定義一個(gè)Toast
插件晶通,基本學(xué)會(huì)之后,大部分插件都是一個(gè)套路了哟玷。
$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]
$ plugman create --name Toast --plugin_id toast_plugin --plugin_version 1.0.0
$ cd Toast
- 進(jìn)入
Toast
目錄下之后狮辽,我們添加插件支持的平臺(tái)
$ plugman platform add --platform_name android
$ plugman platform add --platform_name ios
- 到這一步,基本整個(gè)插件就已經(jīng)完成了巢寡,但是你在項(xiàng)目中添加插件時(shí)會(huì)提示你創(chuàng)建
package.json
文件喉脖,而plugman
沒有給我們創(chuàng)建這個(gè)的文件,所有就需要我們自己動(dòng)手去創(chuàng)建抑月,通過npm init
命令創(chuàng)建package.json
树叽,里面的參數(shù)從plugin.xml
拿來使用就好,也可以一路回車,這樣一個(gè)插件就完成了谦絮。
"name": "toast",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
安裝插件
$ cd 創(chuàng)建的工程文件路徑
$ cordova plugin add /Users/cordova/Toast
刪除插件
$ cordova plugin remove XXXXX(你的plugin_id)
查看所有插件
cordova plugin list
- 打開創(chuàng)建出來的插件文件 打開
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="toast_plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 模塊名稱-->
<name>Toast</name>
<js-module name="Toast" src="www/Toast.js"><!--js中間件相對(duì)文件地址(www目錄下的那個(gè)js)-->
<!--H5通過它調(diào)用js中間件方法(js調(diào)用方法的前綴)可自定義-->
<clobbers target="cordova.plugins.Toast" />
</js-module>
<!-- 添加的iOS平臺(tái)-->
<platform name="ios">
<config-file parent="/*" target="config.xml">
<feature name="Toast">
<param name="ios-package" value="Toast" />
</feature>
</config-file>
<source-file src="src/ios/Toast.m" />
</platform>
</plugin>
- 查看
index.js
文件
//showClick() 和html中按鈕點(diǎn)擊名一致
function showClick() {
console.log("1");
cordova.plugins.Toast.showT(onSuccess, onFail, "message");
}
function onSuccess(msg){
alert(msg);
}
function onFail(msg) {
alert(msg);
}
- 在打開
Toast.js
cordova.define("toast_plugin.Toast", function(require, exports, module) {
var exec = require('cordova/exec');
var device = function(){};
//showT與js中action一致
//device.prototype.方法名题诵,是對(duì)外部提供的方法
device.prototype.showT = function (success, error, arg0) {
/*
*Toast文件名稱
*showToast 文件中方法名稱
*[arg0] 傳遞的數(shù)據(jù)
*/
console.log("2");
exec(success, error, 'Toast', 'showToast', [arg0]);
}
//new一個(gè)device的類對(duì)象,并賦值給module.exports
var Toast = new device();
module.exports = Toast;
});
- js調(diào)用原生代碼
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:message];
//持續(xù)發(fā)送通知在需要持續(xù)回調(diào)的時(shí)候使用
[pluginResult setKeepCallbackAsBool:YES];
[self.commandDelegate sendPluginResult:pluginResult callbackId:callbackID];
- demo地址demo