我之前曾經寫過一篇文章使用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/Co...
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼: