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文件，也非常簡單，在這裏就不多說了。

plugin.xml的Cordova官方說明：https://cordova.apache.org/docs/en/8.x/plugin_ref/spec.html