- 浏览: 3513829 次
- 性别:
- 来自: 大连
博客专栏
-
使用Titanium Mo...
浏览量:37477
-
Cordova 3.x入门...
浏览量:604288
-
常用Java开源Libra...
浏览量:678021
-
搭建 CentOS 6 服...
浏览量:87242
-
Spring Boot 入...
浏览量:399799
-
基于Spring Secu...
浏览量:69060
-
MQTT入门
浏览量:90463
文章分类
最新评论
-
afateg:
阿里云的图是怎么画出来的?用什么工具?
各云服务平台的架构图 -
cbn_1992:
博主,采用jdbctoken也就是数据库形式之后,反复点击获取 ...
Spring Security OAuth2 Provider 之 数据库存储 -
ipodao:
写的很是清楚了,我找到一份中文协议:https://mcxia ...
MQTT入门(6)- 主题Topics -
Cavani_cc:
还行
MQTT入门(6)- 主题Topics -
fexiong:
博主,能否提供完整源码用于学习?邮箱:2199611997@q ...
TensorFlow 之 构建人物识别系统
Cordova提供的功能能够满足一般应用,但是对于复杂的应用或者对性能要求比较严格的应用来说,并不是很理想的。所以就需要在某些场景下自己写代码来弥补这些不足,类似Titanium Module一样,Cordova也提供了Plugin功能。Cordova本身访问Native接口都是通过Plugin的方式提供的,可以参考官方Plugin代码,而且GitHub上也存在不少开源的Cordova Plugin,所以这些都是最好的教程。
Plugin的分类大概有两种:
(1)Plugin构成
plugin.xml : 必须。通知CLI哪个平台应该从什么地方Copy哪些文件到什么地方,以及CLI在生成config.xml时应该根据平台加入什么样的特殊设置。
JavaScript文件 : 必须。一个Plugin至少应该有一个JS文件,也可以引入其他的lib(比如:handlebars.js),定义为js-module,会被cordova.js会自动读入。
原生代码 :可选。
静态文件 : 可选。HTML、图像等
其中plugin.xml文件配置如下:
plugin -- 命名空间、ID、版本
name -- 名称
description -- 描述
keywords -- 关键字
engines -- Cordova版本
js-module -- js文件地址,会被默认加载到首页面(index.html),通过clobbers元素的定义把就是的module.exports自定赋给window对象。
platform -- 各个平台设置
(2)创建JS Plugin
文件夹结构:
plugin.xml:
hello_world.js:
创建工程测试Plugin:
修改index.html后启动测试即可。
(3)创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构:
plugin.xml:
CarrierPlugin.java:
carrier.js:
修改index.html后启动测试即可。
***Cordova device APIs从Cordova 3.0开始全Plugin的机制稍有变化,默认都不可用,需要什么添加什么:
Plugin的添加和删除也同时提供两种方式: Cordova CLI、Plugman。
但是不同的是Plugman一次只能为一个platform添加Plugin,而Cordova CLI是为所有平台都添加Plugin。
Cordova CLI内部实际上也是调用的Plugman。
安装plugman
添加Plugin
删除Plugin
详细参考:https://github.com/apache/cordova-plugman/
Cordova Plugin Registry有以下两个:http://plugins.cordova.io/、http://plugreg.com/plugins
***Plugin的js中直接写代码即可,CLI会包装你的代码:
比如:
参考:
Plugin Development Guide
Plugin Specification(plugin.xml)
Plugin的分类大概有两种:
- JavaScript-only Plugin:不需要写Native代码,不依赖平台的共通的JS代码
- Native Plugin:弥补Cordova提供的功能以外的Native调用,依赖各个平台写不同的Native代码
(1)Plugin构成
引用
|- plugin.xml
|- www
| +- hello_world.js
+- src
|- android
| +- com/rensanning/cordova/plugin/HelloWorldPlugin.java
+- ios
|- HelloWorldPlugin.h
+- HelloWorldPlugin.m
|- www
| +- hello_world.js
+- src
|- android
| +- com/rensanning/cordova/plugin/HelloWorldPlugin.java
+- ios
|- HelloWorldPlugin.h
+- HelloWorldPlugin.m
plugin.xml : 必须。通知CLI哪个平台应该从什么地方Copy哪些文件到什么地方,以及CLI在生成config.xml时应该根据平台加入什么样的特殊设置。
JavaScript文件 : 必须。一个Plugin至少应该有一个JS文件,也可以引入其他的lib(比如:handlebars.js),定义为js-module,会被cordova.js会自动读入。
原生代码 :可选。
静态文件 : 可选。HTML、图像等
其中plugin.xml文件配置如下:
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:rim="http://www.blackberry.com/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" id="org.apache.cordova.device" version="0.2.8"> <name>Device</name> <description>Cordova Device Plugin</description> <license>Apache 2.0</license> <keywords>cordova,device</keywords> <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git</repo> <issue>https://issues.apache.org/jira/browse/CB/component/12320648</issue> <js-module src="www/device.js" name="device"> <clobbers target="device" /> </js-module> <!-- android --> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="Device" > <param name="android-package" value="org.apache.cordova.device.Device"/> </feature> </config-file> <source-file src="src/android/Device.java" target-dir="src/org/apache/cordova/device" /> </platform> <!-- 其他平台的代码 --> </plugin>
plugin -- 命名空间、ID、版本
name -- 名称
description -- 描述
keywords -- 关键字
engines -- Cordova版本
js-module -- js文件地址,会被默认加载到首页面(index.html),通过clobbers元素的定义把就是的module.exports自定赋给window对象。
platform -- 各个平台设置
(2)创建JS Plugin
文件夹结构:
引用
sample
│ plugin.xml
│
└─www
hello_world.js
│ plugin.xml
│
└─www
hello_world.js
plugin.xml:
<?xml version="1.0" encoding="UTF-8"?> <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.rensanning.cordova.helloworld" version="0.0.1"> <name>HelloWorldPlugin</name> <description>HelloWorldPlugin Description</description> <author>rensanning</author> <license>Apache 2.0 License</license> <engines> <engine name="cordova" version=">=3.0.0" /> </engines> <js-module src="www/hello_world.js" name="helloworld"> <clobbers target="HelloWorld" /> </js-module> </plugin>
hello_world.js:
var HelloWorld = function() {}; HelloWorld.prototype.say = function() { alert("Hello World"); }; var helloWorld = new HelloWorld(); module.exports = helloWorld;
创建工程测试Plugin:
引用
cordova create simplePlugin com.rensanning.cordova.simplePlugin SimplePlugin
cd simplePlugin
cordova platform add android
cordova plugin add E:\plugins\sample
cd simplePlugin
cordova platform add android
cordova plugin add E:\plugins\sample
修改index.html后启动测试即可。
<button onclick="test();">Click me!</button> <script type="text/javascript"> function test() { HelloWorld.say(); } </script>
(3)创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构:
引用
carrier
│ plugin.xml
│
├─src
│ └─android
│ CarrierPlugin.java
│
└─www
carrier.js
│ plugin.xml
│
├─src
│ └─android
│ CarrierPlugin.java
│
└─www
carrier.js
plugin.xml:
<?xml version="1.0" encoding="UTF-8"?> <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.rensanning.cordova.carrier" version="0.0.1"> <name>CarrierPlugin</name> <description>CarrierPlugin Description</description> <author>rensanning</author> <license>Apache 2.0 License</license> <engines> <engine name="cordova" version=">=3.0.0" /> </engines> <js-module src="www/carrier.js" name="carrier"> <clobbers target="Carrier" /> </js-module> <platform name="android"> <source-file src="src/android/CarrierPlugin.java" target-dir="src/com/rensanning/cordova/carrier" /> <config-file target="res/xml/config.xml" parent="/*"> <feature name="CarrierPlugin"> <param name="android-package" value="com.rensanning.cordova.carrier.CarrierPlugin"/> </feature> </config-file> <config-file target="AndroidManifest.xml" parent="/*"> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> </config-file> </platform> </plugin>
CarrierPlugin.java:
public class CarrierPlugin extends CordovaPlugin { public static final String TAG = "CarrierPlugin"; public static final String ACTION_GET_CARRIER_CODE = "getCarrierCode"; public TelephonyManager tm; public void initialize(CordovaInterface cordova, CordovaWebView webView) { super.initialize(cordova, webView); Context context = this.cordova.getActivity().getApplicationContext(); tm = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE); } @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (ACTION_GET_CARRIER_CODE.equals(action)) { String carrier = tm.getSimCountryIso(); Log.d(TAG, carrier); callbackContext.success(carrier); return true; } return true; } }
carrier.js:
var cordova = require('cordova'); var Carrier = function() {}; Carrier.prototype.getCarrierCode = function(success, error) { cordova.exec(success, error, 'CarrierPlugin', 'getCarrierCode', []); }; var carrier = new Carrier(); module.exports = carrier;
修改index.html后启动测试即可。
<button onclick="test2();">Carrier Code!</button> <script type="text/javascript"> function test2() { Carrier.getCarrierCode(onSuccess, onFailure); } function onSuccess(result) { alert("Result: " + result); } function onFailure(err) { alert("Failure: " + err); } </script>
***Cordova device APIs从Cordova 3.0开始全Plugin的机制稍有变化,默认都不可用,需要什么添加什么:
Plugin的添加和删除也同时提供两种方式: Cordova CLI、Plugman。
但是不同的是Plugman一次只能为一个platform添加Plugin,而Cordova CLI是为所有平台都添加Plugin。
Cordova CLI内部实际上也是调用的Plugman。
安装plugman
引用
npm install plugman -g
plugman -v
plugman help
plugman -v
plugman help
添加Plugin
引用
plugman --platform android --project <directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www <directory>] [--variable <name>=<value>]
删除Plugin
引用
plugman --uninstall --platform android --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]
详细参考:https://github.com/apache/cordova-plugman/
Cordova Plugin Registry有以下两个:http://plugins.cordova.io/、http://plugreg.com/plugins
***Plugin的js中直接写代码即可,CLI会包装你的代码:
比如:
cordova.define("com.rensanning.cordova.helloworld.helloworld", function(require, exports, module) { var HelloWorld = function() {}; HelloWorld.prototype.say = function() { alert("Hello World"); }; var helloWorld = new HelloWorld(); module.exports = helloWorld; });
参考:
Plugin Development Guide
Plugin Specification(plugin.xml)
- SimplePlugin-debug-unaligned.rar (207.7 KB)
- 下载次数: 242
- plugins.rar (2.2 KB)
- 下载次数: 314
评论
4 楼
chenpenglong
2016-03-28
为什么不提供完整的工程呢
3 楼
jia_dojo
2015-07-24
楼主,我想请教一下,我是用的cordova3.4.1 这个 版本 为什么我的这个目录下没有 plugin.xml 文件呢?
2 楼
jia_dojo
2015-07-24
为什么我的就不成功能?
1 楼
jia_dojo
2015-07-24
你好,你这个是通过命令添加的插件么?
发表评论
-
如何制作一个发布版的ionic应用?
2015-04-23 11:27 16725如何为Android APK签名,已经在这里说过了。这里说说如 ... -
Cordova各版本的不同
2015-04-12 17:26 31112Cordova每次大版本的发布都会带来系统架构很大的变化,很多 ... -
把CordovaWebView嵌入到自己的应用(Embedding WebViews)
2015-04-07 10:56 25053以下以Android为例。 (1)下载最新版的Cordova ... -
完整配置的Cordova-Phonegap-Ionic-Android环境
2015-01-22 17:01 9531搭建开发环境是程序员的基本功,虚拟机技术(VMware、Vir ... -
Cordova 3.x 入门 - 目录
2014-12-06 21:32 59237这个系列是基于Cordova 3. ... -
Awesome PhoneGap/Cordova
2014-12-03 22:23 3423A curated list of amazingly awe ... -
把Crosswalk打包到Cordova应用中
2014-10-09 16:02 4800(1)从Crosswalk官网下载Cordova Androi ... -
Eclipse开发ionic应用
2014-09-19 11:10 22066(1)首先下载最新版的Eclipse 4.4 (Luna) ... -
Cordova 3.x 实用插件(6) -- 检查APP是否被安装
2014-09-12 11:17 10000应用中经常要启动其他应用,比如:打开市场为自己的应用打分、强制 ... -
Cordova 3.x 实用插件(5) -- 通过自定义URL Scheme启动你的APP
2014-09-11 14:45 7446通过URL Scheme来启动APP是一种很常见的做法,比如: ... -
Cordova 3.x 实例开发 -- 基于Ionic的Todo应用
2014-05-27 13:04 31879基于Ionic的Todo应用,以下为Android截图,代码在 ... -
PhoneGap和Cordova的区别
2014-05-15 10:56 9963Cordova历史发展 ・2009年 通过iPhoneDevC ... -
Cordova Android中ShowTitle的问题
2014-04-28 13:34 3934根据官方文档的描述,要想显示TitleBar需要在config ... -
Cordova 3.x 源码分析(7) -- CordovaLib概要
2014-04-25 17:16 10191在http://rensanning.iteye.com/bl ... -
Cordova 3.x 源码分析(6) -- cordova.js本地交互JS<->Native
2014-04-24 12:11 15671src/android/android/nativeapipr ... -
Cordova 3.x 源码分析(5) -- cordova.js导入、初始化、启动、加载插件
2014-04-22 16:44 27005执行cordova.js的入口就以下2行代码: // 导入co ... -
Cordova 3.x 源码分析(4) -- cordova.js事件通道pub/sub
2014-04-22 15:40 4251作为观察者模式(Observer)的一种变形,很多MV*框架( ... -
Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define
2014-04-16 13:21 6443类似于Java的package/import,在JavaScr ... -
Cordova 3.x 源码分析(2) -- cordova.js概要
2014-04-16 13:14 11443前提环境: 引用Platform: android Versi ... -
Cordova 3.x 源码分析(1) -- Cordova CLI
2014-04-15 15:07 6145(1)Node.js的使用 Cordova CLI基于node ...
相关推荐
注意:此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ,它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档: : :megaphone: 支持/问题? 有关常规支持...
要安装当前版本: cordova create wkwvtest my.project.id wkwvtestcd wkwvtestcordova platform add ios@4cordova plugin add cordova-plugin-wkwebview-engine要测试开发版本: cordova create wkwvtest my....
相依性节点js 12.x产品特点移相器3.x TypeScript + ESLint 带有实时服务器的Webpack4(根据更改生成并重新加载浏览器) 资产管理器和带有进度条的加载器BGM播放器(Howler.js) 移动平台支持(cordova) Firebase...
Turbo下载管理器(itdmanager) Turbo Download Manager是具有多线程支持的开源多平台下载管理器 有关此项目的常见问题... cordova-plugin-background-mode , cordova-plugin-x-toast , cordova-plugin-admobpro
连接SDK Cordova / PhoneGap插件Connect SDK是...Cordova / PhoneGap 5.x的安装1.创建一个新的Cordova应用程序(可选) cordova create sample_app com.example.sample_app SampleAppcd sample_appcordova platform ad
该插件是通过 npm 而不是 Cordova Plugin Registry 分发的,可以使用cordova命令行客户端 5.0 或更高版本进行安装。 要为 iOS 开发,您需要运行 XCode 6.x 或更高版本的 Mac。 生成的应用程序需要 iOS 8.x。 要为 ...
WiFi向导2-3.1.1目录安装掌握发行版流星错误/拒绝通用抛出错误例子离子/角度示例(用户提供) 变更日志: 关于WifiWizard2在Cordova / Phonegap项目中为Android和iOS应用程序启用Wifi管理。 该项目是WifiWizard插件...
phonegap调用activity与数据交互 Phonegap 调用本地的Activity插件 ... 查看我上一篇插件开发的文章: ... 本节主要记录调用Activity的方式;...插件开发4个步骤: ...1 在assents 目录下的 cordova-plugins.js文件...3 在res/x