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檔案，也非常簡單，在這裡就不多說了。