logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Cordova 3.x 基础（12）

 飞鹰飞龙飞天 2014-11-24
     Cordova提供的功能能够满足一般应用，但是对于复杂的应用或者对性能要求比较严格的应用来说，并不是很理想的。所以就需要在某些场景下自己写代码来弥补这些不足，类似Titanium Module一样，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文件配置如下：
Xml代码  收藏代码
  1. <plugin xmlns="http:///cordova/ns/plugins/1.0"  
  2.     xmlns:rim="http://www./ns/widgets"  
  3.     xmlns:android="http://schemas./apk/res/android"  
  4.     id="org.apache.cordova.device"  
  5.     version="0.2.8">  
  6.     <name>Device</name>  
  7.     <description>Cordova Device Plugin</description>  
  8.     <license>Apache 2.0</license>  
  9.     <keywords>cordova,device</keywords>  
  10.     <repo>https://git-wip-us./repos/asf/cordova-plugin-device.git</repo>  
  11.     <issue>https://issues./jira/browse/CB/component/12320648</issue>  
  12.   
  13.     <js-module src="www/device.js" name="device">  
  14.         <clobbers target="device" />  
  15.     </js-module>  
  16.   
  17.     <!-- android -->  
  18.     <platform name="android">  
  19.         <config-file target="res/xml/config.xml" parent="/*">  
  20.             <feature name="Device" >  
  21.                 <param name="android-package" value="org.apache.cordova.device.Device"/>  
  22.             </feature>  
  23.         </config-file>  
  24.   
  25.         <source-file src="src/android/Device.java" target-dir="src/org/apache/cordova/device" />  
  26.     </platform>  
  27.   
  28.     <!-- 其他平台的代码 -->  
  29. </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代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <plugin xmlns="http:///cordova/ns/plugins/1.0"  
  3.     id="com.rensanning.cordova.helloworld"  
  4.     version="0.0.1">  
  5.     <name>HelloWorldPlugin</name>  
  6.     <description>HelloWorldPlugin Description</description>  
  7.     <author>rensanning</author>  
  8.     <license>Apache 2.0 License</license>  
  9.     <engines>  
  10.         <engine name="cordova" version=">=3.0.0" />  
  11.     </engines>  
  12.     <js-module src="www/hello_world.js" name="helloworld">  
  13.         <clobbers target="HelloWorld" />  
  14.     </js-module>  
  15. </plugin>  


hello_world.js：
Js代码  收藏代码
  1. var HelloWorld = function() {};  
  2.   
  3. HelloWorld.prototype.say = function() {  
  4.     alert("Hello World");  
  5. };  
  6.   
  7. var helloWorld = new HelloWorld();  
  8. 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后启动测试即可。
Html代码  收藏代码
  1. <button onclick="test();">Click me!</button>  
  2. <script type="text/javascript">  
  3.   function test() {  
  4.       HelloWorld.say();  
  5.   }  
  6. </script>  



（3）创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构：
引用
carrier
│  plugin.xml
│
├─src
│  └─android
│          CarrierPlugin.java
│
└─www
        carrier.js


plugin.xml：
Xml代码  收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <plugin xmlns="http:///cordova/ns/plugins/1.0"  
  3.     id="com.rensanning.cordova.carrier"  
  4.     version="0.0.1">  
  5.     <name>CarrierPlugin</name>  
  6.     <description>CarrierPlugin Description</description>  
  7.     <author>rensanning</author>  
  8.     <license>Apache 2.0 License</license>  
  9.     <engines>  
  10.         <engine name="cordova" version=">=3.0.0" />  
  11.     </engines>  
  12.     <js-module src="www/carrier.js" name="carrier">  
  13.         <clobbers target="Carrier" />  
  14.     </js-module>  
  15.     <platform name="android">  
  16.         <source-file src="src/android/CarrierPlugin.java" target-dir="src/com/rensanning/cordova/carrier" />  
  17.         <config-file target="res/xml/config.xml" parent="/*">  
  18.             <feature name="CarrierPlugin">  
  19.                 <param name="android-package" value="com.rensanning.cordova.carrier.CarrierPlugin"/>  
  20.             </feature>  
  21.         </config-file>  
  22.         <config-file target="AndroidManifest.xml" parent="/*">  
  23.             <uses-permission android:name="android.permission.READ_PHONE_STATE" />  
  24.         </config-file>  
  25.     </platform>  
  26. </plugin>  


CarrierPlugin.java：
Java代码  收藏代码
  1. public class CarrierPlugin extends CordovaPlugin {  
  2.     public static final String TAG = "CarrierPlugin";  
  3.     public static final String ACTION_GET_CARRIER_CODE = "getCarrierCode";  
  4.     public TelephonyManager tm;  
  5.   
  6.     public void initialize(CordovaInterface cordova, CordovaWebView webView) {  
  7.         super.initialize(cordova, webView);  
  8.         Context context = this.cordova.getActivity().getApplicationContext();  
  9.         tm = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);  
  10.     }  
  11.   
  12.     @Override  
  13.     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
  14.         if (ACTION_GET_CARRIER_CODE.equals(action)) {  
  15.             String carrier = tm.getSimCountryIso();  
  16.             Log.d(TAG, carrier);  
  17.             callbackContext.success(carrier);  
  18.             return true;  
  19.         }  
  20.         return true;  
  21.     }  
  22. }  


carrier.js：
Js代码  收藏代码
  1. var cordova = require('cordova');  
  2.   
  3. var Carrier = function() {};  
  4.   
  5. Carrier.prototype.getCarrierCode = function(success, error) {  
  6.     cordova.exec(success, error, 'CarrierPlugin', 'getCarrierCode', []);  
  7. };  
  8.   
  9. var carrier = new Carrier();  
  10. module.exports = carrier;  


修改index.html后启动测试即可。
Html代码  收藏代码
  1. <button onclick="test2();">Carrier Code!</button>  
  2. <script type="text/javascript">  
  3.   function test2() {  
  4.     Carrier.getCarrierCode(onSuccess, onFailure);  
  5.   }  
  6.   function onSuccess(result) {  
  7.     alert("Result: " + result);  
  8.   }  
  9.   function onFailure(err) {  
  10.     alert("Failure: " + err);  
  11.   }  
  12. </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

添加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./、http:///plugins

***Plugin的js中直接写代码即可，CLI会包装你的代码：
比如：
Js代码  收藏代码
  1. cordova.define("com.rensanning.cordova.helloworld.helloworld", function(require, exports, module) { var HelloWorld = function() {};  
  2.   
  3. HelloWorld.prototype.say = function() {  
  4.     alert("Hello World");  
  5. };  
  6.   
  7. var helloWorld = new HelloWorld();  
  8. module.exports = helloWorld;  
  9. });  


参考：
Plugin Development Guide
Plugin Specification（plugin.xml）

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 飞鹰飞龙飞天 > 《Cordova》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多