Android H5混合開發（2）：自定義Cordova外掛

Cordova · 發表 2018-09-21 18:50:29

摘要：前言 Cordova雖然定義了很多基礎的外掛，供H5端使用原生裝置的功能。但是，如果業務相關的功能，需要提供給H5端使用，那麼，就需要我們自定義外掛了。這個“自定義”不是指由Android端任意定義，一般需要各端（H5、原生）討論來決定，如：外掛的名稱、action等。模...

前言

Cordova雖然定義了很多基礎的外掛，供H5端使用原生裝置的功能。

但是，如果業務相關的功能，需要提供給H5端使用，那麼，就需要我們自定義外掛了。

這個“自定義”不是指由Android端任意定義，一般需要各端（H5、原生）討論來決定，如：外掛的名稱、action等。

模擬需求

外掛資訊：
外掛名稱：MyPlugin
外掛id: com.test.MyPlugin
外掛版本：1.0.0
action: aaa

外掛互動方式：當h5呼叫時，原生toast彈出h5傳入的資料，並返回響應的結果。

建立外掛

使用上一篇文章的目錄（Android H5混合開發（1）：構建Cordova 專案）

我們在TestCordova目錄下，建立存放自定義外掛的目錄Plugins

新建Plugins目錄.png
開啟終端，輸入命令，進入Plugins目錄

進入Plugins目錄.png
建立外掛
按照約定的外掛引數，開始建立外掛

plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0

建立成功，如下圖所示：

外掛目錄結構.png

/src/目前是空目錄

檢視www/MyPlugin.js檔案

MyPlugin.js.png

'MyPlugin'指的是Android端實現該外掛的.java類名

'coolMethod'指的是action的名稱，此處我們需要修改成約定的 ‘aaa’

修改後，如下圖：

MyPlugin.js.png
檢視配置檔案plugin.xml

plugin.xml.png

id="com.test.MyPlugin" 是指外掛id；

version="1.0.0" 是指外掛版本；

<name>MyPlugin</name> 是指外掛名稱；

<js-module 標籤指定公共JavaScript介面的路徑；（即描述H5與原生的介面對應關係）

<clobbers 標籤指定了H5端呼叫外掛時的物件，字串可簡化，此處我們改成“xyz”（真實專案中，此文字應根據約定，去定義，此處為了突出演示，所以定義成 xyz）

plugin.xml.png
根據配置檔案，生成java程式碼
使用終端，輸入命令，進入MyPlugin目錄

cd MyPlugin

使用終端，輸入命令，生成java程式碼

plugman platform add --platform_name android

終端命令.png

建立的java程式碼.png

檢視預設的模板指令碼（具體實現，後續介紹），如下圖：

指令碼.png

build 外掛

通過終端，輸入命令，會建立package.json檔案

npm init

根據需要，終端中填寫package.json的相關屬性。

因為，此Demo只是演示，所以沒有填寫屬性，全部直接點選了回車（即：預設值）。

終端命令.png

建立的package.json檔案，如下圖所示：

外掛目錄.png

package.json.png

至此，外掛建立完成。

將外掛匯入Cordova工程的安卓專案中

1.通過終端，執行命令，進入cordova工程目錄/TestPlugin/myapp/

cd cordova專案目錄路徑

2.通過終端，執行命令，將外掛加入到各平臺的專案中

cordova plugin add 外掛的本地路徑

執行命令，結果報錯了.png

問題原因：gradle版本許可權的問題

解決辦法：設定gradle許可權

終端命令：chmod +x platforms/android/gradlew

gradle問題解決，重新執行命令，外掛成功加入各平臺專案中.png

使用AndroidStuido開啟安卓專案，目錄：/myapp/platforms/android/

專案目錄.png

經過了cordova plugin add命令，我們可以看到，在/assets/www下面，已經包含了我們匯入的外掛資訊。

3.1 cordova_plugins.js 的module.exports（陣列）描述了外掛列表的資訊（用到的外掛都需要在module.exports數組裡面配置）：

外掛描述檔案.png

3.2 Myplugin.js描述了單個外掛的具體資訊（程式碼沒什麼變化，其實就是直接拷貝過來的）：

Myplugin.js.png

3.3 /res/xml/config.xml 也匯入了該外掛的相關資訊：

config.xml.png

3.4 /src/下自動匯入了Java模板程式碼MyPlugin.java：

MyPlugin.java.png
安卓端外掛功能開發
其實，也就是在MyPlugin.java類中按照需求實現相關的功能：

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端傳給我什麼引數，此處再傳回去
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}

5.H5端開發測試頁面，然後同步（或拷貝）給安卓專案使用

直白點，就是H5端做好開發，將WWW目錄的內容同步給我們的/assets/www/即可。但是，此處只是個簡單的Demo，所以沒必要麻煩H5端了，咱們自己寫程式碼實現吧：

5.1首先開啟assets/www/index.html檔案，刪掉多餘的註釋

index.html.png

5.2註釋掉<head>標籤中的第一個<meta>

5.3<body>中加入一個button，設定點選事件

5.4編寫javascript，h5端呼叫我們自定義外掛的方式：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>

連上手機，執行androidstudio，點選【aaa click】按鈕，如下圖：

執行結果.jpg

總結

本篇文章，主要演示了cordova外掛的自定義過程和外掛的使用，比較基礎，沒有涉及過多複雜的事情，如果有不明白的地方，建議去官網多查查資料。

ofollow,noindex">http://cordova.axuer.com/docs/zh-cn/latest/guide/overview/index.html

需要使用Cordova童鞋，最好先跟著例子多練習幾遍，熟能生巧。

後續會介紹更多的Cordova使用技巧。

本次Demo的原始碼下載地址： https://pan.baidu.com/s/1YmMw2zO7goF7MDViB1wZ2Q

Android H5混合開發（2）：自定義Cordova外掛

前言

模擬需求

建立外掛

將外掛匯入Cordova工程的安卓專案中

總結

您可能也會喜歡…