Cordova安装
安装Cordova命令行工具,通过下面步骤:
1.下载和安装Node.js,安装完成后在命令行中使用node
和 npm
。
2.(可选)下载和安装git client如果你没有。安装成功后,你可以在命令行中使用git。 这个命令行使用下载git仓库中的资源。
3.安装cordova
模块使用Nodejs的npm
工具。cordova
模块会被npm工具自动下载
- 在OS X和Linux上:
$ sudo npm install -g cordova
在OS X和Linux上, npm
命令加上前缀sudo
因为cordova
可能需要安装在其他的受限制目录比如 /usr/local/share
。如果你使用可选工具nvm/nave或者具有安装目录的写权限,那么你可以省略sudo
前缀。这里有更多提示 可用在使用 npm
没有 sudo
前缀时,如果你想那么做。
- 在Windows上:
C:\>npm install -g cordova
-g
标志是告诉npm
我们全局安装 cordova
。否则我们将会安装在当前工作目录的 node_modules
子目录。
安装完成后,你应该能够在命令行中运行cordova
命令,在没有任何参数的时候会打印一些帮助信息。
创建APP
首先我们创建一个HelloWorld项目添加ios
平台。
$ cordova create 路径 bundle ID 工程名字
$ cd 工程路径
给你的App添加目标平台。我们将会添加ios
和android
平台,并确保他们保存在了config.xml
中:
$ cordova platform add ios --save
$ cordova platform add android --save
检查你当前平台设置状况:
$ cordova platform ls
创建自定义插件
- 首先安装
plugman,cordova
需要用它来创建插件,可使用node
命令来安装
$ npm install -g plugman
-
plugman
安装成功后就可以创建插件了,这里我们学习自定义一个Toast
插件,基本学会之后,大部分插件都是一个套路了。
$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]
$ plugman create --name Toast --plugin_id toast_plugin --plugin_version 1.0.0
$ cd Toast
- 进入
Toast
目录下之后,我们添加插件支持的平台
$ plugman platform add --platform_name android
$ plugman platform add --platform_name ios
- 到这一步,基本整个插件就已经完成了,但是你在项目中添加插件时会提示你创建
package.json
文件,而plugman
没有给我们创建这个的文件,所有就需要我们自己动手去创建,通过npm init
命令创建package.json
,里面的参数从plugin.xml
拿来使用就好,也可以一路回车,这样一个插件就完成了。
"name": "toast",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
安装插件
$ cd 创建的工程文件路径
$ cordova plugin add /Users/cordova/Toast
删除插件
$ cordova plugin remove XXXXX(你的plugin_id)
查看所有插件
cordova plugin list
- 打开创建出来的插件文件 打开
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中间件相对文件地址(www目录下的那个js)-->
<!--H5通过它调用js中间件方法(js调用方法的前缀)可自定义-->
<clobbers target="cordova.plugins.Toast" />
</js-module>
<!-- 添加的iOS平台-->
<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中按钮点击名一致
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.方法名,是对外部提供的方法
device.prototype.showT = function (success, error, arg0) {
/*
*Toast文件名称
*showToast 文件中方法名称
*[arg0] 传递的数据
*/
console.log("2");
exec(success, error, 'Toast', 'showToast', [arg0]);
}
//new一个device的类对象,并赋值给module.exports
var Toast = new device();
module.exports = Toast;
});
- js调用原生代码
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:message];
//持续发送通知在需要持续回调的时候使用
[pluginResult setKeepCallbackAsBool:YES];
[self.commandDelegate sendPluginResult:pluginResult callbackId:callbackID];
- demo地址demo