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
网友评论