使用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

這個指令會自動建立一個名叫Adder的插件，插件id為jerry.adder, 版本号為1.0.0。

plugman會自動生成很多插件能夠工作的資源檔案，全部放在名為Adder的檔案夾内。

2. 我希望這個Adder插件在安卓平台上工作，是以進入Adder檔案夾，添加該插件對Android平台的支援：plugman platform add –platform_name android

用Java實作兩個整數的加法運算。操作數都是通過JavaScript用參數args傳入的，計算結果通過回調上下文CallbackContext傳回給JavaScript端。

3. 插件實作完畢，可以開始打包了。使用指令行plugman createpackagejson ./

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

把這個自定義的插件安裝到Cordova應用去，指令行：cordova plugin add Adder。

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

如何用前端應用的JavaScript消費這個Java實作的插件呢？

在你Cordova項目檔案夾/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, 生成了最終的APK檔案，然後就可以安裝到安卓手機上了。

如果大家想檢視包含了這個Java插件實作源代碼的完整Cordova項目實作，請從我的github倉庫下載下傳完整源代碼：

https://github.com/i042416/Cordova