[Phonegap+Sencha Touch] 移动开发64 Phonegap/Cordova 插件开发
2015-09-21 14:52
447 查看
原文:《Cordova 3.x 基础(12) -- Plugin开发》
Cordova提供的功能能够满足一般应用,但是对于复杂的应用或者对性能要求比较严格的应用来说,并不是很理想的。所以就需要在某些场景下自己写代码来弥补这些不足,Cordova也提供了Plugin功能。Cordova本身访问Native接口都是通过Plugin的方式提供的,可以参考官方Plugin代码,而且GitHub上也存在不少开源的Cordova
Plugin,所以这些都是最好的教程。
Plugin的分类大概有两种:
JavaScript-only Plugin:不需要写Native代码,不依赖平台的共通的JS代码
Native Plugin:弥补Cordova提供的功能以外的Native调用,依赖各个平台写不同的Native代码
(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后启动测试即可
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/047314b04c4e96bb0adfcbfd722a9290.png)
(3)创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构:
plugin.xml:
CarrierPlugin.java:
carrier.js:
修改index.html后启动测试即可
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/2370bffb812fb6cb309f11f57cd204d7.png)
***Plugin的js中直接写代码即可,CLI会包装你的代码:
比如:
会自动包装为:
参考:
Plugin Development Guide
Plugin Specification(plugin.xml)
Cordova提供的功能能够满足一般应用,但是对于复杂的应用或者对性能要求比较严格的应用来说,并不是很理想的。所以就需要在某些场景下自己写代码来弥补这些不足,Cordova也提供了Plugin功能。Cordova本身访问Native接口都是通过Plugin的方式提供的,可以参考官方Plugin代码,而且GitHub上也存在不少开源的Cordova
Plugin,所以这些都是最好的教程。
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
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:
<?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
修改index.html后启动测试即可
<button onclick="test();">Click me!</button> <script type="text/javascript"> function test() { HelloWorld.say(); } </script>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/047314b04c4e96bb0adfcbfd722a9290.png)
(3)创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构:
carrier │ 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>
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/2370bffb812fb6cb309f11f57cd204d7.png)
***Plugin的js中直接写代码即可,CLI会包装你的代码:
比如:
var HelloWorld = function() {}; HelloWorld.prototype.say = function() { alert("Hello World"); }; var helloWorld = new HelloWorld(); module.exports = helloWorld;
会自动包装为:
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)
相关文章推荐
- 互联网术语
- Android:改变Activity切换方式
- Android Studio如何发布APK
- 谈谈我对sku的理解(2)----数据库设计
- Android 百度地图 SDK v3.0.0 (一)
- 现在准备看《金赛性学报告》
- 数据库group by 用法
- 谈谈我对sku的理解(2)----数据库设计
- Go http server
- 【计算机网络】广播和多播
- 适配器模式
- 观察者模式
- Unity3D之Mecanim动画系统学习笔记(一):认识Mecanim动画系统
- IOS折线图二
- Android:dimen尺寸资源文件的使用
- 为什么使用HttpUrlConnection时候,用available方法不准确
- 谈谈我对sku的理解(2)----数据库设计
- 小小的数据库讲解
- 移动端web开发经验分享与技巧
- ES权威指南(中文版)学习_聚合_3