使用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倉庫下載完整源代碼：https://github.com/i042416/Cordova

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