前言
Cordova雖然定義了很多基礎(chǔ)的插件，供H5端使用原生設(shè)備的功能池户。
但是咏雌，如果業(yè)務(wù)相關(guān)的功能凡怎，需要提供給H5端使用，那么赊抖，就需要我們自定義插件了统倒。
這個“自定義”不是指由Android端任意定義，一般需要各端（H5氛雪、原生）討論來決定房匆，如：插件的名稱、action等报亩。
模擬需求
插件信息：
插件名稱：MyPlugin
插件id: com.test.MyPlugin
插件版本：1.0.0
action: aaa
插件交互方式：當(dāng)h5調(diào)用時浴鸿，原生toast彈出h5傳入的數(shù)據(jù)，并返回響應(yīng)的結(jié)果弦追。
創(chuàng)建插件
使用上一篇文章的目錄（Android H5混合開發(fā)（1）：構(gòu)建Cordova 項(xiàng)目）
-
我們在TestCordova目錄下岳链，創(chuàng)建存放自定義插件的目錄Plugins
新建Plugins目錄.png -
打開終端，輸入命令劲件，進(jìn)入Plugins目錄
進(jìn)入Plugins目錄.png - 創(chuàng)建插件
按照約定的插件參數(shù)掸哑，開始創(chuàng)建插件
plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0
創(chuàng)建成功，如下圖所示：
/src/目前是空目錄
-
查看www/MyPlugin.js文件
MyPlugin.js.png
'MyPlugin'指的是Android端實(shí)現(xiàn)該插件的.java類名
'coolMethod'指的是action的名稱寇仓，此處我們需要修改成約定的 ‘a(chǎn)aa’
修改后举户，如下圖：
MyPlugin.js.png -
查看配置文件plugin.xml
plugin.xml.png
id="com.test.MyPlugin" 是指插件id；
version="1.0.0" 是指插件版本遍烦；
<name>MyPlugin</name> 是指插件名稱俭嘁；
<js-module 標(biāo)簽指定公共JavaScript接口的路徑；（即描述H5與原生的接口對應(yīng)關(guān)系）
<clobbers 標(biāo)簽指定了H5端調(diào)用插件時的對象服猪，字符串可簡化供填，此處我們改成“xyz”（真實(shí)項(xiàng)目中，此文本應(yīng)根據(jù)約定罢猪，去定義近她，此處為了突出演示，所以定義成 xyz）
plugin.xml.png - 根據(jù)配置文件膳帕，生成java代碼
使用終端粘捎，輸入命令，進(jìn)入MyPlugin目錄
cd MyPlugin
使用終端危彩，輸入命令攒磨，生成java代碼
plugman platform add --platform_name android
查看默認(rèn)的模板腳本（具體實(shí)現(xiàn)，后續(xù)介紹）汤徽，如下圖：
- build 插件
通過終端娩缰，輸入命令，會創(chuàng)建package.json文件
npm init
根據(jù)需要谒府，終端中填寫package.json的相關(guān)屬性拼坎。
因?yàn)楦√海薉emo只是演示，所以沒有填寫屬性泰鸡，全部直接點(diǎn)擊了回車（即：默認(rèn)值）债蓝。
創(chuàng)建的package.json文件，如下圖所示：
至此盛龄，插件創(chuàng)建完成惦蚊。
將插件導(dǎo)入Cordova工程的安卓項(xiàng)目中
1.通過終端，執(zhí)行命令讯嫂，進(jìn)入cordova工程目錄/TestPlugin/myapp/
cd cordova項(xiàng)目目錄路徑
2.通過終端蹦锋，執(zhí)行命令，將插件加入到各平臺的項(xiàng)目中
cordova plugin add 插件的本地路徑
問題原因：gradle版本權(quán)限的問題
解決辦法：設(shè)置gradle權(quán)限
終端命令：chmod +x platforms/android/gradlew
-
使用AndroidStuido打開安卓項(xiàng)目千扔，目錄：/myapp/platforms/android/
項(xiàng)目目錄.png
經(jīng)過了cordova plugin add命令憎妙，我們可以看到，在/assets/www下面曲楚，已經(jīng)包含了我們導(dǎo)入的插件信息厘唾。
3.1 cordova_plugins.js 的module.exports（數(shù)組） 描述了插件列表的信息（用到的插件都需要在module.exports數(shù)組里面配置）：
插件描述文件.png
3.2 Myplugin.js描述了單個插件的具體信息（代碼沒什么變化，其實(shí)就是直接拷貝過來的）：
Myplugin.js.png
3.3 /res/xml/config.xml 也導(dǎo)入了該插件的相關(guān)信息：
config.xml.png
3.4 /src/下自動導(dǎo)入了Java模板代碼MyPlugin.java：
MyPlugin.java.png - 安卓端插件功能開發(fā)
其實(shí)龙誊，也就是在MyPlugin.java類中按照需求實(shí)現(xiàn)相關(guān)的功能：
import android.widget.Toast;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
public class MyPlugin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("aaa")) {
String message = args.getString(0);
this.aaa(message, callbackContext);
return true;
}
return false;
}
private void aaa(String message, CallbackContext callbackContext) {
//彈框
Toast.makeText(cordova.getActivity(),"aaa",Toast.LENGTH_LONG).show();
//h5端傳給我什么參數(shù)抚垃，此處再傳回去
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
5.H5端開發(fā)測試頁面，然后同步（或拷貝）給安卓項(xiàng)目使用
直白點(diǎn)趟大，就是H5端做好開發(fā)鹤树，將WWW目錄的內(nèi)容同步給我們的/assets/www/即可。但是逊朽，此處只是個簡單的Demo罕伯，所以沒必要麻煩H5端了，咱們自己寫代碼實(shí)現(xiàn)吧：
5.1首先打開assets/www/index.html文件叽讳，刪掉多余的注釋
5.2注釋掉<head>標(biāo)簽中的第一個<meta>
5.3<body>中加入一個button追他，設(shè)置點(diǎn)擊事件
5.4編寫javascript，h5端調(diào)用我們自定義插件的方式：xyz.aaa(...)
index.html完整代碼：
<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
--><meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<br><br><br>
<button onclick="test()">aaa click</button><br><br><br>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script >
function test(){
xyz.aaa("AAA",function(msg){
alert('原生返回了：'+msg);
},function(e){
alert(e);
})
}
</script>
</body>
</html>
-
連上手機(jī)岛蚤，運(yùn)行androidstudio邑狸，點(diǎn)擊【aaa click】按鈕，如下圖：
運(yùn)行結(jié)果.jpg
總結(jié)
本篇文章灭美，主要演示了cordova插件的自定義過程和插件的使用推溃，比較基礎(chǔ)昂利，沒有涉及過多復(fù)雜的事情届腐，如果有不明白的地方铁坎，建議去官網(wǎng)多查查資料。
https://cordova.apache.org/docs/en/latest/
需要使用Cordova童鞋犁苏，最好先跟著例子多練習(xí)幾遍硬萍，熟能生巧。
后續(xù)會介紹更多的Cordova使用技巧围详。
本次Demo的源碼下載地址：https://pan.baidu.com/s/1YmMw2zO7goF7MDViB1wZ2Q
第一篇：Android H5混合開發(fā)（1）：構(gòu)建Cordova 項(xiàng)目
http://www.reibang.com/p/058a0dd7f809
第二篇：Android H5混合開發(fā)（2）：自定義Cordova插件
http://www.reibang.com/p/8fcbf06a4c3a
第三篇：Android H5混合開發(fā)（3）：原生Android項(xiàng)目里嵌入Cordova
http://www.reibang.com/p/e306ae0f1f03
第四篇：Android H5混合開發(fā)（4）：構(gòu)建Cordova Jar包
http://www.reibang.com/p/447d41a1299d
