我之前曾經(jīng)寫(xiě)過(guò)一篇文章使用Cordova將您的前端JavaScript應(yīng)用打包成手機(jī)原生應(yīng)用，介紹了如何使用Cordova框架將您的用JavaScript和HTML開(kāi)發(fā)的前端應(yīng)用打包成某個(gè)手機(jī)平臺(tái)(比如Android，iOS）的原生應(yīng)用。

那么，您也許會(huì)有一些需求，需要在您的前端應(yīng)用里使用到手機(jī)平臺(tái)的一些原生API，比如使用手機(jī)Mobile操作系統(tǒng)提供的傳感器(Sensor)。這些任務(wù)是JavaScript不能直接完成的，必須借助Cordova里Custom Plugin（自定義插件）來(lái)完成。注意看下圖紅色高亮的Custom Plugin，起到了一個(gè)橋梁的作用，溝通了Cordova應(yīng)用中的前端JavaScript代碼和手機(jī)操作系統(tǒng)中的原生API。

我們現(xiàn)在就來(lái)做一個(gè)實(shí)際的例子，我們選擇Android平臺(tái)為例。我在Android平臺(tái)用Java實(shí)現(xiàn)兩個(gè)整數(shù)相加，來(lái)模擬Android平臺(tái)上的native API。我將會(huì)在我的前端應(yīng)用里用JavaScript代碼來(lái)調(diào)用我在Android平臺(tái)上用Java實(shí)現(xiàn)的這個(gè)加法器。

1. 先使用npm安裝Cordova插件管理器。

命令行：npm -g install plugman

插件管理器成功下載后，就可以用它創(chuàng)建一個(gè)自定義插件了。

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

這個(gè)命令會(huì)自動(dòng)創(chuàng)建一個(gè)名叫Adder的插件，插件id為jerry.adder, 版本號(hào)為1.0.0。

plugman會(huì)自動(dòng)生成很多插件能夠工作的資源文件，全部放在名為Adder的文件夾內(nèi)。

2. 我希望這個(gè)Adder插件在安卓平臺(tái)上工作，因此進(jìn)入Adder文件夾，添加該插件對(duì)Android平臺(tái)的支持：plugman platform add –platform_name android

執(zhí)行完畢后，Adder文件夾下自動(dòng)生成子文件夾src/android和插件實(shí)現(xiàn)文件Adder.java。現(xiàn)在我可以在里面開(kāi)始寫(xiě)代碼了。

用Java實(shí)現(xiàn)兩個(gè)整數(shù)的加法運(yùn)算。操作數(shù)都是通過(guò)JavaScript用參數(shù)args傳入的，計(jì)算結(jié)果通過(guò)回調(diào)上下文CallbackContext返回給JavaScript端。

public class Adder extends CordovaPlugin {@Overridepublic 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. 插件實(shí)現(xiàn)完畢，可以開(kāi)始打包了。使用命令行plugman createpackagejson ./

這個(gè)命令會(huì)自動(dòng)生成一個(gè)package.json文件。

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

把這個(gè)自定義的插件安裝到Cordova應(yīng)用去，命令行：cordova plugin add Adder。

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

如何用前端應(yīng)用的JavaScript消費(fèi)這個(gè)Java實(shí)現(xiàn)的插件呢？

在你Cordova項(xiàng)目文件夾/platforms/android/assets/www/js的index.js里，將下列JavaScript代碼粘貼進(jìn)去：

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();

關(guān)鍵代碼就這一句：Cordova.exec(success, null, “Adder”, “performAdd”, [10,20]);

意思是調(diào)用名為Adder的插件，執(zhí)行插件暴露的performAdd方法，傳入兩個(gè)參數(shù)10和20進(jìn)去。Java插件的計(jì)算結(jié)果通過(guò)JavaScript回調(diào)函數(shù)success返回到前端應(yīng)用中，用alert打印出結(jié)果。

使用cordova compile打包Cordova應(yīng)用，生成APK文件。執(zhí)行該應(yīng)用，能觀察到10和20兩個(gè)操作數(shù)傳入到Java實(shí)現(xiàn)的插件中，結(jié)果30返回到前端并通過(guò)alert彈窗顯示，我們的自定義插件開(kāi)發(fā)成功！

最后一步就是命令行cordova compile, 生成了最終的APK文件，然后就可以安裝到安卓手機(jī)上了。

如果大家想查看包含了這個(gè)Java插件實(shí)現(xiàn)源代碼的完整Cordova項(xiàng)目實(shí)現(xiàn)，請(qǐng)從我的github倉(cāng)庫(kù)下載完整源代碼：https://github.com/i042416/Cordova

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:

總結(jié)

以上是生活随笔為你收集整理的使用JavaScript调用手机平台上的原生API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。