Cordova插件导出规则

Cordova插件导出规则

模块说明:cordova插件开发完成后需要进行拆分成能够被前端人员实用的cordova标准插件,拆分过程大体分为如下几步:
1)拆分原生代码,例如android(ios)下的代码
2)拆分www下的js代码
3)添加libs下的动态库或者jar
4)最后一步是配置plugin.xml文件

cordova插件添加以及使用过程

.我们封装完成后的插件交给前端人员后,会通过 cordova plugin add * 命令进行插件安装,add的过程相当于把我们在plugin.xml中配置的文件全部拷贝到使用插件的主工程中.
.使用插件是通过我们定义的clobbers对象进行调用.

cordova插件的文件结构

1)上图中就是一个插件中需要包含的内容,插件的最外层文件夹名称一般与插件中的pluginid相同.

2)绿色箭头指向的是需要添加的lib(包含jar和动态库文件)

3)蓝色箭头指向的是原生代码所在的位置,包含多个平台的代码(例如android,ios)

4)黄色箭头指向的是js调用文件,对应的是asset下对应的js文件

5)黑色箭头指向的是整个插件的配置文件,包含所有与插件相关的东西

拆分原生代码

首先第一步是拆分原生代码,具体操作是把android工程中的代码迁移到插件中来.

把android工程中与插件有关的所有代码按照原路径拷贝到src/android路径下:
例如:原生的工程中com.cordova.toast下的代码都是与插件相关的代码,我们就要把com.cordova.toast下的代码都拷贝到插件中的src/android/目录下.
如果插件中用到了res下的文件,我们要根据文件路径复制到相应的src/android/res下面,与原生代码的拷贝是一样的.

拆分www下的js代码

在插件开发的过程中我们会在assets/www/plugins/cordova-plugin-card/www/toast.js中定义域插件的参数以及回调,相应的我们要把toast.js文件拷贝到插件的www目录下.

拷贝的时候需要修改js中的内容,一般的toast.js文件定义如下:

cordova.define("cordova-plugin-toast.toast", function(require, exports, module) {
	var exec = require('cordova/exec');
	exports.showToast= function(success, error,args) {
    exec(success, error, "Plugin_Toast", "showToast", [args]);
		};
	});

我们需要把最外层的插件定义层去掉,因为在插件add的时候cordova帮我们添加了这层定义,修改后的文件如下:

var exec = require('cordova/exec');
	exports.showToast= function(success, error,args) {
    exec(success, error, "Plugin_Toast", "showToast", [args]);
		};

把修改后的js文件拷贝到www目录下就可以了.

添加libs

插件开发中可能会用到第三方的jar或者so文件,相应的我们要把用到的lib都拷贝到插件的libs下面. 动态库文件需要放在内层文件夹路径armeabi下.

配置plugin.xml文件

最后一步就是进行xml文件的配置.一个完整的plugin.xml文件如下:

<?xml version='1.0' encoding='utf-8'?>
	<plugin id="xxx-xxx" version="0.0.1" 
	xmlns="http://apache.org/cordova/ns/plugins/1.0" 
xmlns:android="http://schemas.android.com/apk/res/android">
 <name>xxxx</name>
 <js-module name="cordova-toast" src="www/toast.js">
	<clobbers target="cordova.toast" />
 </js-module>
 
 <platform name="android">
 	<config-file target="res/xml/config.xml" parent="/*">
       <feature name="ShowToastPlugin">
          <param name="android-package" value="com.cordova.showtoast.ShowToastPlugin" />
       </feature>
    </config-file>
	<config-file parent="/manifest" target="AndroidManifest.xml" >
		<uses-permission android:name="android.permission.INTERNET" />
		<uses-permission android:name="android.permission.READ_PHONE_STATE" />
		<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
		<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
		<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
		<uses-permission android:name="android.permission.BLUETOOTH" />
		<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
		<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
	</config-file> 

	<config-file parent="/manifest/application/activity" target="AndroidManifest.xml" >
	 <intent-filter>
            <action android:name="android.nfc.action.TECH_DISCOVERED" />
        </intent-filter>
        <meta-data android:name="android.nfc.action.TECH_DISCOVERED" android:resource="@xml/nfc_tech_filter" />
	
	</config-file>
	
    <source-file src="src/android/com/cordova/xxxx" target-dir="src/com/cordova/"/>
	<source-file src="src/android/res/values/strings-xx.xml" target-dir="res/values/"/>

    <source-file src="libs/armeabi/libxx.so" target-dir="libs/armeabi/"/>
	<source-file src="libs/armeabi/libxxx.so" target-dir="libs/armeabi/"/>

    <source-file src="libs/xxxx.jar" target-dir="libs/"/>

</platform>

第一行的id就是我们工程中给插件定义的pluginId.

plugin id="xxx-xxx"

第二行的name是插件定义的name

<name>xxxx</name>

js-module中的src是对应的我们的插件中的platforms/android/assets/www/plugins/cordova-plugin-xxx/www/下的js文件,clobbers是对应的platforms/android/assets/www/cordova_plugins.js中的clobbers中的定义. clobbers 定义的target就是调用我们插件中接口的对象.

<js-module name="cordova-toast" src="www/toast.js">
    <clobbers target="cordova.toast" />
</js-module>

plarform标签是对应的多平台配置,有android,ios,等等

<platform name="android">
...
</platform>

platform中的config-file标签是xml复制命令,targer是需要修改的xml所在的位置,parent是需要修改的具体标签.

<config-file parent="/*" target="res/xml/config.xml">
    <feature name="ShowToastPlugin">
        <param name="android-package" value="com.cordova.showtoast.ShowToastPlugin" />
        <param name="onload" value="true" />
    </feature>
</config-file>

如图:权限是在AndroidManifest.xml中的/manifest标签下添加config-file标签中的所有权限.

<config-file parent="/manifest" target="AndroidManifest.xml" >
    <uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.NFC"/>
<uses-permission android:name="android.permission.SET_WALLPAPER"/>
<uses-permission android:name="android.permission.ACCES_MOCK_LOCATION"/>
<uses-permission android:name="android.permission.WRITE_APN_SETTINGS"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.VIBRATE"/>

</config-file>  

source-file标签是文件复制命令,我们的代码拷贝和libs拷贝都要用到.

src是文件的来源地,target-dir是拷贝的目的地.

<source-file src="src/android/com/cordova/xxx" target-dir="src/com/cordova/xxx/"/>
<source-file src="src/android/res/xml/nfc_tech_filter.xml" target-dir="res/xml/"/>

<source-file src="libs/armeabi/libxx.so" target-dir="libs/armeabi/"/>
<source-file src="libs/armeabi/libxxx.so" target-dir="libs/armeabi/"/>

<source-file src="libs/xx.jar" target-dir="libs/"/>

plugin.xml文件配置完成后,我们的插件导出就基本完成了.再接下来就是进行插件测试了,建议本地再新建一个cordova工程,专门用来测试已经导出的插件. 然后将ReadMe.md插件使用说明文档编写好，一个完整的插件就制作完成了.
新版本的cordova还要求添加package.json文件，也非常简单，在这里就不多说了。