在移动平台使用JavaScript调用原生API

我在使用Cordova将你的前端JavaScript应用打包成移动原生应用之前写过一篇文章，介绍了如何使用Cordova框架来打包你开发的前端用JavaScript和HTML将应用程序打包成移动平台（如Android、iOS）的原生应用程序。然后，你可能会有一些需求，你需要在你的前端应用中使用手机平台的一些原生API，比如使用手机移动操作系统提供的传感器（Sensor）。这些工作不能直接用JavaScript来完成，必须借助Cordova中的CustomPlugin（自定义插件）来完成。注意下图中红色标出的CustomPlugin，它起到了沟通Cordova应用中前端JavaScript代码和移动操作系统原生API的桥梁作用。下面我们来做一个实际的例子，我们选择Android平台作为例子。我在Android平台上用Java实现两个整数相加，模拟Android平台原生API。我将在我的前端应用程序中使用JavaScript代码来调用我在Android平台上用Java实现的这个加法器。1.首先使用npm安装Cordova插件管理器。命令行：npm-ginstallplugman一旦成功下载了插件管理器，就可以使用它来创建自定义插件。命令行：plugmancreate-nameAdder-plugin_idjerry.adder-plugin_version1.0,0该命令会自动创建一个名为Adder的插件，插件id为jerry.adder，版本号为1.0.0。plugman会自动生成很多插件可以使用的资源文件，并将它们都放在一个名为Adder的文件夹中。2、我想让这个Adder插件在Android平台上运行，所以进入Adder文件夹，添加插件对Android平台的支持：plugmanplatformadd–platform_nameandroid执行完成后，子文件夹src/androidAdder文件夹下会自动生成插件实现文件Adder.java。现在我可以开始在其中编写代码了。用Java实现两个整数的加法运算。操作数全部通过JavaScript传入参数args，计算结果通过回调上下文CallbackContext返回给JavaScript端。publicclassAdderextendsCordovaPlugin{@OverridepublicBooleanexecute(Stringaction,JSONArrayargs,CallbackContextcallbackContext)throwsJSONException{if(action.equals("performAdd")){intarg1=args.获取整数（0）；intarg2=args.getint(1);int结果=arg1+arg2;callbackContext.success("Java计算结果："+result);返回真；}返回假；使用命令行plugmancreatepackagejson./这个命令会自动生成一个package.json文件。完成后，将在插件文件夹中生成package.json文件。将此自定义插件安装到Cordova应用程序，命令行：cordovapluginaddAdder。如果一切正常，可以看到BUILDSUCCESSFUL的提示。如何使用前端应用的JavaScript来消费这个Java实现的插件呢？在Cordova项目文件夹/platforms/android/assets/www/js的index.js中，将以下JavaScript代码粘贴到其中：varapp={initialize:function(){document.addEventListener('deviceready',this.onDeviceReady.bind(this),false);},onDeviceReady:function(){this.receivedEvent('deviceready');},receivedEvent:function(id){functionsuccess(result){调试器；alert("Jerry插件结果："+result);};setTimeout(function(){Cordova.exec(success,null,"Adder","performAdd",[10,20]);},10000);}};app.初始化（）;关键代码就是这一句：Cordova.exec(success,null,"Adder","performAdd",[10,20]);意思是调用名为Adder的插件，执行插件暴露的performAdd方法，将10和20两个参数Enter进去。Java插件的计算结果通过JavaScript回调函数success返回给前端应用，并以alert打印结果。使用cordovacompile将Cordova应用程序打包并生成APK文件。执行应用程序，可以看到将10和20这两个操作数传递给Java实现的插件，结果30返回给前端，通过alert弹窗显示。我们的自定义插件开发成功了！最后一步是命令行cordovacompile，它生成最终的APK文件，然后可以将其安装到Android手机上。如果你想看到完整的Cordova项目实现，包括这个Java插件实现的源代码，请从我的github仓库下载完整的源代码：https://github.com/i042416/Co...更多Jerry's原创技术文章请关注公众号“汪子熙”或扫描下方二维码：