使用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项目文件夹/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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

相关文章
|
12天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
33 3
|
16天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
16天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js搭建RESTful API的实践之旅
【8月更文挑战第31天】本文将带你踏上一次Node.js的探险之旅,通过实际动手构建一个RESTful API,我们将探索Node.js的强大功能和灵活性。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的实践经验和深刻的技术洞见。
|
23天前
|
JavaScript 前端开发 中间件
深入浅出Node.js:从零开始构建RESTful API
【8月更文挑战第24天】在数字化时代的浪潮中,后端开发作为支撑现代网络服务的骨架,扮演着至关重要的角色。本文将通过Node.js这一高效灵活的JavaScript运行环境,引领你步入后端开发的神秘世界。我们将从基础概念出发,逐步深入到实战操作,最终构建一个功能完备的RESTful API。无论你是编程新手还是前端开发者,这篇文章都将为你揭示后端开发的奥秘,让你轻松掌握使用Node.js进行API开发的实用技巧。
|
1月前
|
存储 JavaScript API
Node.js中的异步API
【8月更文挑战第16天】
27 1
|
14天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
16天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
16天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
27 0
|
16天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js打造简易Web API
【8月更文挑战第31天】本文旨在通过一个简单实例,引导读者快速入门Node.js并创建自己的Web API。我们将从零开始,一步步搭建起服务端应用,涉及环境搭建、基本语法、路由处理等关键知识点,最后以代码实例加深理解。无论你是前端开发者还是后端新手,这篇文章都能让你轻松上手,体验后端开发的乐趣。
|
16天前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
27 0

热门文章

最新文章