Android H5混合開發(fā)（2）：自定義Cordova插件

前言

Cordova雖然定義了很多基礎(chǔ)的插件，供H5端使用原生設(shè)備的功能。
但是，如果業(yè)務(wù)相關(guān)的功能，需要提供給H5端使用，那么，就需要我們自定義插件了。


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

模擬需求

插件信息：
      插件名稱：MyPlugin
      插件id: com.test.MyPlugin
      插件版本：1.0.0
      action: aaa

插件交互方式：當(dāng)h5調(diào)用時(shí)，原生toast彈出h5傳入的數(shù)據(jù)，并返回響應(yīng)的結(jié)果。

創(chuàng)建插件

使用上一篇文章的目錄（Android H5混合開發(fā)（1）：構(gòu)建Cordova 項(xiàng)目）

  1. 我們在TestCordova目錄下，創(chuàng)建存放自定義插件的目錄Plugins


    新建Plugins目錄.png

  2. 打開終端，輸入命令，進(jìn)入Plugins目錄


    進(jìn)入Plugins目錄.png
  3. 創(chuàng)建插件
    按照約定的插件參數(shù)，開始創(chuàng)建插件
plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0

創(chuàng)建成功，如下圖所示：


插件目錄結(jié)構(gòu).png

/src/目前是空目錄

  1. 查看www/MyPlugin.js文件


    MyPlugin.js.png

    'MyPlugin'指的是Android端實(shí)現(xiàn)該插件的.java類名
    'coolMethod'指的是action的名稱，此處我們需要修改成約定的 ‘a(chǎn)aa’
    修改后，如下圖：


    MyPlugin.js.png

  2. 查看配置文件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)用插件時(shí)的對象，字符串可簡化，此處我們改成“xyz”（真實(shí)項(xiàng)目中，此文本應(yīng)根據(jù)約定，去定義，此處為了突出演示，所以定義成 xyz）


    plugin.xml.png
  3. 根據(jù)配置文件，生成java代碼
    使用終端，輸入命令，進(jìn)入MyPlugin目錄
cd MyPlugin

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

plugman platform add --platform_name android
終端命令.png
創(chuàng)建的java代碼.png

查看默認(rèn)的模板腳本（具體實(shí)現(xiàn)，后續(xù)介紹），如下圖：


腳本.png
  1. build 插件
    通過終端，輸入命令，會創(chuàng)建package.json文件
npm init

根據(jù)需要，終端中填寫package.json的相關(guān)屬性。
因?yàn)椋薉emo只是演示，所以沒有填寫屬性，全部直接點(diǎn)擊了回車（即：默認(rèn)值）。


終端命令.png

創(chuàng)建的package.json文件，如下圖所示：


插件目錄.png

package.json

plugin.xml

至此，插件創(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 插件的本地路徑
執(zhí)行命令，結(jié)果報(bào)錯(cuò)了.png

問題原因：gradle版本權(quán)限的問題
解決辦法：設(shè)置gradle權(quán)限
終端命令：chmod +x platforms/android/gradlew


gradle問題解決，重新執(zhí)行命令，插件成功加入各平臺項(xiàng)目中.png

  1. 使用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描述了單個(gè)插件的具體信息（代碼沒什么變化，其實(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
  2. 安卓端插件功能開發(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/即可。但是，此處只是個(gè)簡單的Demo，所以沒必要麻煩H5端了，咱們自己寫代碼實(shí)現(xiàn)吧：
5.1首先打開assets/www/index.html文件，刪掉多余的注釋

index.html.png

5.2注釋掉<head>標(biāo)簽中的第一個(gè)<meta>
5.3<body>中加入一個(gè)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>

  1. 連上手機(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.itdecent.cn/p/058a0dd7f809

第二篇：Android H5混合開發(fā)（2）：自定義Cordova插件

http://www.itdecent.cn/p/8fcbf06a4c3a

第三篇：Android H5混合開發(fā)（3）：原生Android項(xiàng)目里嵌入Cordova

http://www.itdecent.cn/p/e306ae0f1f03

第四篇：Android H5混合開發(fā)（4）：構(gòu)建Cordova Jar包

http://www.itdecent.cn/p/447d41a1299d

第五篇：Android H5混合開發(fā)（5）：封裝Cordova View

http://www.itdecent.cn/p/13a0fbaa3227

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容