我之前曾经写过一篇文章使用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 {@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. 插件实现完毕,可以开始打包了。使用命令行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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

使用JavaScript调用手机平台上的原生API 1相关推荐

  1. 使用JavaScript调用手机平台上的原生API

    我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...

  2. 影响主题(六):手机平台上的影响

    概述 尽管影响 iPhone 3GS或第三代的iPod的 4和iPad的无法与之抗衡3GS的速度,因为他们有更多的像素画. 性能-移动平台仍然相当缓慢,但与一些技巧,你可以几乎总是achive的良好的 ...

  3. 在 Android* 平台上设置原生 OpenGL ES*

    Setting up Native OpenGL ES* on Android* Platforms final.docx BSD2.0.txt ParticleSystemNDK.zip READM ...

  4. atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97

    atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...

  5. java swing调用H5_atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97...

    atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1.实现html5化界面的要解决的策略 1.1.Js交互 Firefox与Chro ...

  6. 在Ubuntu手机平台上创建一个HTML 5的应用

    无论你是互联网世界的一个高手或是一个从来没有接触过互联网的新手,这篇文章将给你带来完整的在Ubuntu平台上开发HTML 5的应用.我们将慢慢地通过这个练习让你很自然地进入并熟悉整个的HTML 5应用 ...

  7. 无法加载服务器指定地图,用javascript调用iserver服务器上的地图不显示

    我用javascript调用我自己在iserver上发布的地图不显示,但是调用官网教程上的原始地图实例可以显示,代码使用的是教程中快速入门的代码,我修改了地图的目标坐标系为EPSG:3857,并且在调 ...

  8. taobao平台上关键字的API接口接入说明

    淘宝API接口是一个丰富的接口库,提供了各种各样的接口供开发者使用.满足多语言开发.以下是一些常见的淘宝API接口及其代码示例. 1. 搜索商品API接口 该API提供了关键字搜索淘宝商品的功能,可以 ...

  9. 微信公众平台上可以使用的API接口

    001. 天气预报 [20130901] city:城市名,传递时须做urlencode http://api100.duapp.com/weather/?appkey=trialuser&c ...

  10. 把SAP云平台上创建的API proxy添加到API product里去

    在API Portal里创建一个新的product: 切换到这个新建product的API面板里,点击Add,添加新的API: 从API列表里选择GWSAMPLE_BASIC, 点击publish按钮 ...

最新文章

  1. LruCache缓存处理及异步加载图片类的封装
  2. 鼠标悬停事件_Red语言-GUI-事件和参与者
  3. oracle sqlplus 常用命令大全
  4. 安卓升级固件update.zip解析
  5. STM32L0系列串口重定义的方法
  6. Java16-day07【Map(概述、特点、功能、遍历)、HashMap集合练习、集合嵌套、Collections、模拟斗地主升级版】
  7. Mac OS X下安装和配置Maven
  8. 服务器实际显示内存,服务器实际显示内存大小
  9. 安装ae显示安装程序无法初始化_adobe CC 2015/2017安装失败(adobe cc安装不了的解决办法)...
  10. cf黑机器多久解除_“黑电镀厂”偷排工业废水被捣毁,老板被警方刑拘
  11. hmac sha256安全吗_全面普及HTTPS有意义吗?
  12. 细说嵌入式Linux文件系统的制作方法
  13. grid@m3#39;s password: Permission denied, please try again.
  14. oracle查询创建视图语句
  15. windows搭建共享文件服务器,利用Windows共享搭建文件服务器
  16. 嵌入式系统多媒体框架分析
  17. Xposed的框架的使用
  18. windows 10最新版 电脑共享WIFI
  19. 塞规公差带图_塞规和卡规公差表
  20. win10怎么打开网络计算机,Win10怎么启用网络发现?

热门文章

  1. 哥,我跟你讲,我想创业
  2. iOS 指纹识别常见问题汇总
  3. python 给定n,返回n以内的斐波那契数列
  4. 进度条(5.16-5.22)
  5. javascript之事件模型
  6. 让Windows 2003 Server支持ASP程序
  7. 2018.06.30 BZOJ1857: [Scoi2010]传送带(三分套三分)
  8. MyBatis学习总结(三)---映射文件及引入方式
  9. idea 设置代码的颜色
  10. Failed to load VMMR0.r0 (VERR_SUPLIB_OWNER_NOT_ROOT)