Cordova 3.x 基础（12） -- Plugin开发

逃离我推掉我的手 2022-08-08 12:55 6阅读 0赞

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 ： 必须。通知CLI哪个平台应该从什么地方Copy哪些文件到什么地方，以及CLI在生成config.xml时应该根据平台加入什么样的特殊设置。   
JavaScript文件 : 必须。一个Plugin至少应该有一个JS文件，也可以引入其他的lib（比如：handlebars.js），定义为js-module，会被cordova.js会自动读入。   
原生代码 ：可选。   
静态文件 ： 可选。HTML、图像等   
  
其中plugin.xml文件配置如下：

Xml代码  ![收藏代码][icon_star.png]

1.  **<****plugin** xmlns="http://apache.org/cordova/ns/plugins/1.0"  
2.      xmlns:rim="http://www.blackberry.com/ns/widgets"  
3.      xmlns:android="http://schemas.android.com/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.apache.org/repos/asf/cordova-plugin-device.git**</****repo****>**  
11.     **<****issue****>**https://issues.apache.org/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.       
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代码  ![收藏代码][icon_star.png]

1.  **<?****xml** version="1.0" encoding="UTF-8"**?>**  
2.  **<****plugin** xmlns="http://apache.org/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代码  ![收藏代码][icon_star.png]

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代码  ![收藏代码][icon_star.png]

1.  **<****button** onclick="test();"**>**Click me!**</****button****>**  
2.  **<****script** type="text/javascript"**>**  
3.    function test() \{  
4.        HelloWorld.say();  
5.    \}  
6.  **</****script****>**

![23916c43-a9ff-39d8-badf-00e0d80e5059.png][]   
  
（3）创建Native Plugin   
以Android下获取Carrier Code为例。   
文件夹结构：

引用

carrier   
│  plugin.xml   
│   
├─src   
│  └─android   
│          CarrierPlugin.java   
│   
└─www   
        carrier.js

plugin.xml：

Xml代码  ![收藏代码][icon_star.png]

1.  **<?****xml** version="1.0" encoding="UTF-8"**?>**  
2.  **<****plugin** xmlns="http://apache.org/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代码  ![收藏代码][icon_star.png]

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代码  ![收藏代码][icon_star.png]

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代码  ![收藏代码][icon_star.png]

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****>**

![0e52bf08-91bb-3030-a065-e3a4e799f5d8.png][]   
  
\*\*\*Cordova device APIs从Cordova 3.0开始全Plugin的机制稍有变化，默认都不可用，需要什么添加什么：   
![6a2a0477-1855-3746-9c77-be289789caad.png][]   
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/][https_github.com_apache_cordova-plugman]   
Cordova Plugin Registry有以下两个：[http://plugins.cordova.io/][http_plugins.cordova.io]、[http://plugreg.com/plugins][http_plugreg.com_plugins]   
  
\*\*\*Plugin的js中直接写代码即可，CLI会包装你的代码：   
比如：

Js代码  ![收藏代码][icon_star.png]

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.  \});

源引：http://rensanning.iteye.com/blog/2029362

[icon_star.png]: /images/20220805/680645e45243491da297957bbc046767.png
[23916c43-a9ff-39d8-badf-00e0d80e5059.png]: /images/20220805/22a023bdd4b342bb9148393f817116fa.png
[0e52bf08-91bb-3030-a065-e3a4e799f5d8.png]: /images/20220805/044bb8cf6b1b4db5a699d94a220a5ed0.png
[6a2a0477-1855-3746-9c77-be289789caad.png]: /images/20220805/14fb0d4090bd4331a37c3ac242588bf6.png
[https_github.com_apache_cordova-plugman]: https://github.com/apache/cordova-plugman/
[http_plugins.cordova.io]: http://plugins.cordova.io/
[http_plugreg.com_plugins]: http://plugreg.com/plugins