使用JavaScript呼叫手機平臺上的原生API

我之前曾經寫過一篇文章使用Cordova將您的前端JavaScript應用打包成手機原生應用，介紹瞭如何使用Cordova框架將您的用JavaScript和HTML開發的前端應用打包成某個手機平臺(比如Android，iOS）的原生應用。

那麼，您也許會有一些需求，需要在您的前端應用裡使用到手機平臺的一些原生API，比如使用手機Mobile作業系統提供的感測器(Sensor)。這些任務是JavaScript不能直接完成的，必須藉助Cordova裡Custom Plugin（自定義外掛）來完成。注意看下圖紅色高亮的Custom Plugin，起到了一個橋樑的作用，溝通了Cordova應用中的前端JavaScript程式碼和手機作業系統中的原生API。

我們現在就來做一個實際的例子，我們選擇Android平臺為例。我在Android平臺用Java實現兩個整數相加，來模擬Android平臺上的native API。我將會在我的前端應用裡用JavaScript程式碼來呼叫我在Android平臺上用Java實現的這個加法器。

1. 先使用npm安裝Cordova外掛管理器。

命令列：npm -g install plugman

外掛管理器成功下載後，就可以用它建立一個自定義外掛了。

命令列：plugman create -name Adder -plugin_id jerry.adder -plugin_version 1.0,0

這個命令會自動建立一個名叫Adder的外掛，外掛id為jerry.adder, 版本號為1.0.0。

plugman會自動生成很多外掛能夠工作的資原始檔，全部放在名為Adder的資料夾內。

2. 我希望這個Adder外掛在安卓平臺上工作，因此進入Adder資料夾，新增該外掛對Android平臺的支援：plugman platform add –platform_name android

執行完畢後，Adder資料夾下自動生成子資料夾src/android和外掛實現檔案Adder.java。現在我可以在裡面開始寫程式碼了。

用Java實現兩個整數的加法運算。運算元都是透過JavaScript用引數args傳入的，計算結果透過回撥上下文CallbackContext返回給JavaScript端。

public class Adder extends CordovaPlugin {    @Override
    public Boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {        if (action.equals("performAdd")) {            int arg1 = args.getint(0);            int arg2 = args.getint(1);            int result = arg1 + arg2;
            callbackContext.success("result calculated in Java: " + result);            return true;
        }        return false;
    }
}

3. 外掛實現完畢，可以開始打包了。使用命令列plugman createpackagejson ./

這個命令會自動生成一個package.json檔案。

Once done, the package.json file is generated within plugin folder.

把這個自定義的外掛安裝到Cordova應用去，命令列：cordova plugin add Adder。

一切正常的話，能看到BUILD SUCCESSFUL的提示。

如何用前端應用的JavaScript消費這個Java實現的外掛呢？

在你Cordova專案資料夾<project folder>/platforms/android/assets/www/js的index.js裡，將下列JavaScript程式碼貼上進去：

var app = {initialize: function() {    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
}
,onDeviceReady: function() {    this.receivedEvent('deviceready');
}
,receivedEvent: function(id) {    function success(result){        debugger;
        alert("Jerry plugin result: " + result);
    }
    ;
    setTimeout( function(){
        Cordova.exec(success, null, "Adder", "performAdd", [10,20]);
    }
    , 10000);
}
}
;
app.initialize();

關鍵程式碼就這一句：Cordova.exec(success, null, "Adder", "performAdd", [10,20]);

意思是呼叫名為Adder的外掛，執行外掛暴露的performAdd方法，傳入兩個引數10和20進去。Java外掛的計算結果透過JavaScript回撥函式success返回到前端應用中，用alert列印出結果。

使用cordova compile打包Cordova應用，生成APK檔案。執行該應用，能觀察到10和20兩個運算元傳入到Java實現的外掛中，結果30返回到前端並透過alert彈窗顯示，我們的自定義外掛開發成功！

最後一步就是命令列cordova compile, 生成了最終的APK檔案，然後就可以安裝到安卓手機上了。

如果大家想檢視包含了這個Java外掛實現原始碼的完整Cordova專案實現，請從我的github倉庫下載完整原始碼：

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: