開發原生安卓cordova插件（基礎）

cordova應用若是須要調用原生安卓接口，方法是使用cordova插件，cordova官方提供了主流原生功能的插件，但若是還不能知足需求，也能夠本身開發cordova插件

 

如下介紹開發一個最簡單的插件，功能是調用原生的toast彈出信息

 

首先先用as建立新工程，用於編寫插件的代碼

PS：開發cordova插件其中一個坑是沒有一個好的編寫代碼環境，甚至插件的全部類文件都要手動添加到配置文件，這點後面會有體驗

 

項目名叫plug1，包（package）名要倒着寫

默認添加empry activity

配置完成後等待一段時間，待進度條消失後，build一下，沒報錯就說明成功

 

建名爲org.apache.cordova的包，步驟以下：

 

回到capp1，能夠看到有org.apache.cordova包，把此包下全部文件，拷到上一步新建的包，目的是讓plug1擁有cordova的類（使得能夠開發cordova插件）

 

拷後效果圖

用於開發cordova插件時編碼的plug1項目到此創建完成，後續若是還有多個插件開發均可以重用此項目

此項目不是必須的（由於最終編譯不在此），理論上能夠用記事原本編碼

 

而後開始插件的編碼，首先新建包com.cesc.ewater.cordovaPlugin

 

新建類ToastPlugin，此類內容在下面有提供，能夠直接拷進去

package com.cesc.ewater.cordovaPlugin;

 

import android.widget.Toast;

 

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaArgs;

import org.apache.cordova.CordovaPlugin;

import org.apache.cordova.PluginResult;

import org.json.JSONArray;

import org.json.JSONException;

 

/**

 * Toast插件

 */

public class ToastPlugin extends CordovaPlugin {

    @Override

    public boolean execute(String action, String rawArgs, CallbackContext callbackContext) throws JSONException {

        return super.execute(action, rawArgs, callbackContext);

    }

 

    @Override

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

        return super.execute(action, args, callbackContext);

    }

 

    /**

     * js調用插件方法後，會進入到此方法

     *

     * @param action          插件的方法名，若是一個插件有多個方法，經過此值區分

     * @param args            js傳入的參數，用於插件外給插件傳值，數組類型，能夠傳入多個參數

     * @param callbackContext The callback context used when calling back into JavaScript.

     * @return 插件是否正常執行，bool類型。還會影響到js調用的回調，若是是true就執行success的回調，false執行fail的回調

     * @throws JSONException

     */

    @Override

    public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {

        //經過action判斷調用哪一個方法

        if (action.equals("showToast")) {

            //這裏能夠實現一些你的原生邏輯功能

            //args.getString(0)意思是讀取第1個傳入參數，且類型是string

            Toast.makeText(cordova.getActivity(), args.getString(0), Toast.LENGTH_SHORT).show();

 

            //插件給外部js返回值的實現，PluginResult構造函數參數1表明執行結果狀態，參數2是返回的值

            PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, "插件返回的值");

            pluginResult.setKeepCallback(true);

            callbackContext.sendPluginResult(pluginResult);

            return true;

        }

        return false;

    }

}

 

最終效果

 

而後回到capp1

 

首先用npm安裝plugman（全局安裝），命令以下：npm install -g plugman，在此沒有截圖

PS：只要在第一次使用安裝

 

命令行進入capp1目錄，執行如下命令建立插件，插件命名爲toast-plugin

plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0

PS：其中—name後面是插件名，--plugin_id後面是插件id，--plugin_version後面是版本

 

成功後生成此目錄

 

在此目錄下，新建文件夾android

 

把剛纔在plug1編輯的ToastPlugin類文件拷到android文件夾裏

PS：原則上要把此插件全部的文件都放到此目錄，此例只拷一個文件由於此例的插件確實只有一個類文件，很是簡單

PS：此目錄下的文件的目錄結構不須要跟包匹配，全部文件都放根目錄均可以，由於後面還會有配置文件配置類文件和包名

 

而後開始編輯plugin.xml

修改爲如下的內容（提供全文內容能夠直接複製）

<?xml version='1.0' encoding='utf-8'?>

<plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

    <!--插件名-->

       <name>toast-plugin</name>

       <!--js部分配置-->

    <js-module name="ToastPlugin" src="www/toast-plugin.js">

              <!--js調用的對象名-->

        <clobbers target="ToastPlugin" />

    </js-module>

      

       <!--添加安卓平臺-->

    <platform name="android">

        <config-file target="res/xml/config.xml" parent="/*"> 

                     <!--js調用的對象名-->

            <feature name="ToastPlugin">

                            <!-- value=java類名全路徑-->

                <param name="android-package" value="com.cesc.ewater.cordovaPlugin.ToastPlugin"/>

            </feature> 

        </config-file> 

              <!-- src:java源文件的路徑， target-dir:插件安裝好後，源文件的位置，要和上面的包名對應 -->

        <source-file src="src/android/ToastPlugin.java" target-dir="src/com/cesc/ewater/cordovaPlugin" />         

    </platform>

</plugin>

 

PS：此文件的詳細說明，也能夠先跳過不看

 

此文件是插件注入js的對象，根目錄在插件目錄

 

這幾個都是js調用插件的對象名，應該是同樣的

 

插件全部的文件（包括類文件，layout的xml文件，引用的jar包文件等等）都要配置到此

plugin.xml說明到此爲止

 

而後開始編輯此文件

內容以下，能夠直接複製進去，

var exec = require('cordova/exec');

 

//一個exports.XXX表明插件的一個方法，exports後面和exec方法的參數4都是方法名稱（此例都是showToast）

var exec = require('cordova/exec');

 

//一個exports.XXX表明插件的一個方法，exports後面和exec方法的參數4都是方法名稱（此例都是showToast）

exports.showToast = function (arg0, success, error) {

       //參數1和參數2分別是調用插件成功和失敗的回調方法（js）

       //參數3是插件名

       //參數4是方法名

       //參數5是js的傳參

    exec(success, error, 'ToastPlugin', 'showToast', [arg0]);

};

 

打開控制檯，進入插件目錄，執行npm init

 中間有不少輸入項，直接回車便可，成功的效果

 

完成後插件目錄多了個package.json文件，開始編輯他

 

添加此部分，下面有文本內容

PS：id是插件名稱

    "cordova": {

    "id": "toast-plugin",

    "platforms": [

      "android"

    ]

  },

 

插件修改到此結束，開始把插件添加到cordova應用

 

控制檯進入capp1的安卓平臺目錄，輸入如下命令cordova plugin add E:\project\201712cordovaTest\code\capp1\toast-plugin，命令中的路徑是插件的目錄

PS：此命令意思是把某個目錄的插件添加capp1的cordova應用

成功的效果

成功後capp1會多了以下文件，能夠見到插件的ToastPlugin.java類文件

 

到此完成添加插件到cordova應用

 

接下來開始修改h5應用代碼，在h5應用中使用js調用插件

 

打開已經被遺忘的vue1

找到主頁的js文件

添加代碼：ToastPlugin.showToast("hello world");

意思是調用名稱爲ToastPlugin的插件的showToast方法，並傳入參數」hello world」

 

修改代碼完畢，npm build一下

PS：從這段操做開始，在以前的 使用cordova把h5應用打包成apk 已經有說明，也就是h5應用修改後，經過一系列操做把他打包成apk，但在此也重複說明一次

 

打開www（用webstrom打開，以前有說過），把剛纔生成的文件拷過去

PS：注意每次build生成的文件都會有一堆隨機數，若是隨機數變了就說明該文件內容有修改因此從新生成，反之就沒變

 

而後修改indel.html文件裏引用文件的文件名

 

而後開始cordova打包apk，命令行進入capp1的目錄，運行命令cordova build android

build成功後，回到capp1，插上手機，開始調試

 

成功的話，點擊左上角的【功能1】按鈕，會彈出消息「hello world」

 

追加小章節：

插件修改後如何使修改生效：

假設把彈出的文本內容加上123

 

代碼修改完後，控制檯進入capp1目錄，執行命令：cordova plugin rm toast-plugin，意思是刪除插件

 

而後再執行添加插件的命令

成功後，在capp1的as build一下，再運行可看到修改後的效果

 

PS：雖然有插件更新的命令cordova plugin update xxx，然而使用過發現無效，所以只能刪除再添加