理清cordova插件的调用流程

  • 从调用的角度看流程 

前端调用（clobbers）——>cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)—–>js部分（配置着插件的名字，已经插件里面都有的方法）——>config.xml（根据插件的名字找到对应的插件原生文件的包名）——>原生（根据匹配到的方法名，来调用原生方法，另外也可以获取到js传递下来的参数）

简单说：前端调用——>桥梁：（cordova_plugin.js clobbers）—->js文件——>桥梁：(config.xml 插件名)—–>原生

  • 关键1：前端接口：cordova.plugins.QtPlugin 是插件的clobbers,在cordova_plugins.js里面配置，get是插件提供的方法之一，在插件的js文件里面有
  1. function GetToken(key, success, failed){
  2. document.addEventListener(‘deviceready‘, function(){
  3. cordova.plugins.QtPlugin.get(key,
  4. success,
  5. failed
  6. );
  7. }, false);
  8. }
  • 关键2：cordova_plugins.js:配置插件clobbers，已经对应的插件id和插件js文件的路径
  1. "file": "plugins/com.qt.cordova.plugin/www/qtplugin.js",
  2. "id": "com.qt.cordova.plugin.QtPlugin",
  3. "clobbers": [
  4. "cordova.plugins.QtPlugin"
  5. ]
  • 关键3：js部分，这里是插件的id
  1. cordova.define("com.qt.cordova.plugin.QtPlugin", function(require, exports, module) {
  • 关键4：js部分，这里是插件的名字，以及插件的方法
  1. QtPlugin.prototype.save = function(key,value,success, error){
  2. exec(success, error, "QtPlugin", "save", [key,value]);
  3. };
  4. QtPlugin.prototype.get = function(key,success, error){
  5. exec(success, error, "QtPlugin", "get", [key]);
  6. };
  • 关键5：config.xml:插件名对应的原生代码的包名
  1. <feature name="BarcodeScanner" >
  2. <param
  3. name="android-package"
  4. value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
  5. </feature>
  • 关键6：原生代码：匹配到方法，调用原生方法saveDate()
  1. if ("save".equals(action)) {
  2. System.out.println("save被调用");
  3. cordova.getThreadPool().execute(new Runnable() {
  4. public void run() {
  5. String key = args.optString(0);
  6. String value = args.optString(1);
  7. saveDate(key, value);
  8. }
  9. });
  10. }

关于cordova插件要注意5个部分

第一部分：原生代码部分：匹配js方法，调用需要的原生方法

  1. public boolean execute(String action, final CordovaArgs args,
  2. final CallbackContext callbackContext) throws JSONException {
  3. //save方法，给前端调用用来保存key value形式的键值对
  4. if ("save".equals(action)) {
  5. System.out.println("save被调用");
  6. cordova.getThreadPool().execute(new Runnable() {
  7. public void run() {
  8. String key = args.optString(0);
  9. String value = args.optString(1);
  10. saveDate(key, value);
  11. }
  12. });
  13. }
  14. //get方法，给前端调用用来获取指定key对应的value值
  15. else if ("get".equals(action)) {
  16. //get会被调用两次，一次获取用户名，另外一次获取密码
  17. System.out.println("get被调用");
  18. String key = args.optString(0);
  19. System.out.println("get被调用key：" + key);
  20. String values = PrefUtils.getString(MyApplication.ctx, key, "");// 从sp取
  21. System.out.println("返回的values:" + values);
  22. callbackContext.success(values);
  23. } else if ("getLocalVersion".equals(action)) {
  24. JSONObject json = new JSONObject();
  25. String localVer = DeviceUtil.getVersionName(context);
  26. if (!localVer.equals("")) {
  27. json.put("localVer", localVer);
  28. json.put("platform", "android");
  29. callbackContext.success(json);
  30. return true;
  31. } else {
  32. json.put("code", 107);
  33. json.put("msg", "获取本地版本号失败");
  34. callbackContext.error(json);
  35. }
  36. }

2、config.xml：插件名和插件名对应的原生代码文件

  1. <feature name="Whitelist" >
  2. <param
  3. name="android-package"
  4. value="org.apache.cordova.whitelist.WhitelistPlugin" />
  5. <param
  6. name="onload"
  7. value="true" />
  8. </feature>
  10. <feature name="BarcodeScanner" >
  11. <param
  12. name="android-package"
  13. value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
  14. </feature>
  15. <!-- QtPlugin是插件名字，com.plugins.qt.QtPlugin是插件原生代码的文件包名-->
  16. <feature name="QtPlugin" >
  17. <param
  18. name="android-package"
  19. value="com.plugins.qt.QtPlugin" />
  20. </feature>
  22. <feature name="InAppBrowser">
  23. <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
  24. </feature>
  26. <preference name="Splashscreen" value="screen" />
  27. <preference name="SplashScreenDelay" value="15000" />
  28. <feature name="SplashScreen">
  29. <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
  30. <param name="onload" value="true" />
  31. </feature>
  32. <!-- app在pause后不会停止代码-->
  33. <preference name="KeepRunning" value="false"/>
  35. <!-- app在pause后不会停止代码-->
  36. <preference name="KeepRunning" value="false"/>

第三部分：cordova_plugins.js， 插件id和插件的js文件对应，另外clobbers是前端调用的时候使用的，这样就相当于前端调用clobbers，然后就会找到对应的js文件

  1. cordova.define(‘cordova/plugin_list‘, function(require, exports, module) {
  2. module.exports = [
  3. {
  4. "file": "plugins/cordova-plugin-whitelist/whitelist.js",
  5. "id": "cordova-plugin-whitelist.whitelist",
  6. "runs": true
  7. },
  9. {
  10. "file": "plugins/phonegap-plugin-barcodescanner/www/barcodescanner.js",
  11. "id": "phonegap-plugin-barcodescanner.BarcodeScanner",
  12. "clobbers": [
  13. "cordova.plugins.barcodeScanner"
  14. ]
  15. },
  17. {
  18. "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
  19. "id": "cordova-plugin-splashscreen.SplashScreen",
  20. "clobbers": [
  21. "navigator.splashscreen"
  22. ]
  23. },
  24. {
  25. "file": "plugins/com.qt.cordova.plugin/www/qtplugin.js",
  26. "id": "com.qt.cordova.plugin.QtPlugin",
  27. "clobbers": [
  28. "cordova.plugins.QtPlugin"
  29. ]
  30. },
  31. {
  32. "id": "cordova-plugin-inappbrowser.inappbrowser",
  33. "file": "plugins/cordova-plugin-inappbrowser/www/inappbrowser.js",
  34. "pluginId": "cordova-plugin-inappbrowser",
  35. "clobbers": [
  36. "cordova.InAppBrowser.open",
  37. "window.open"
  38. ]
  39. }
  40. ];
  41. module.exports.metadata =
  42. // TOP OF METADATA
  43. {
  44. "cordova-plugin-whitelist": "1.2.1",
  45. "phonegap-plugin-barcodescanner": "4.1.0",
  46. "cordova-plugin-splashscreen": "3.1.0",
  47. "com.qt.cordova.plugin":"1.0.0",
  48. "cordova-plugin-inappbrowser": "1.6.1"
  49. };
  50. // BOTTOM OF METADATA
  51. });

第四部分 js文件部分

  1. <!-- com.qt.cordova.plugin.QtPlugin 这是插件的id，在cordova_plugins.js里面配置了-->
  2. cordova.define("com.qt.cordova.plugin.QtPlugin", function(require, exports, module) {
  3. var exec = require(‘cordova/exec‘);
  5. function QtPlugin(){};
  8. //一、消息通知
  9. QtPlugin.prototype.noticeAlert = function(enable){
  10. exec(null,null,"QtPlugin", "noticeAlert", [enable]);
  11. };
  13. QtPlugin.prototype.noticeSound = function(enable){
  14. exec(null,null,"QtPlugin", "noticeSound",[enable]);
  15. };
  16. QtPlugin.prototype.noticeVibrate = function(enable){
  17. exec(null,null,"QtPlugin", "noticeVibrate", [enable]);
  18. };
  20. QtPlugin.prototype.getAlertStatus = function(success){
  21. exec(success,null,"QtPlugin", "getAlertStatus", []);
  22. };
  23. //二、保存数据
  24. QtPlugin.prototype.save = function(key,value,success, error){
  25. exec(success, error, "QtPlugin", "save", [key,value]);
  26. };
  29. QtPlugin.prototype.get = function(key,success, error){
  30. exec(success, error, "QtPlugin", "get", [key]);
  31. };
  32. //三、更新
  33. QtPlugin.prototype.getLocalVersion = function(success,error){
  34. exec(success,error,"CheckUpdate","getLocalVersion",[]);
  35. };
  37. QtPlugin.prototype.updateH5 = function(success,error){
  38. alert("updateH5");
  39. exec(success,error,"QtPlugin","updateH5",[]);
  40. };
  43. QtPlugin.prototype.update = function(url,error){
  45. exec(null,error, "QtPlugin","update", [url]);
  46. };
  47. //四、UserInfo
  48. QtPlugin.prototype.setUser = function(userInfo){
  49. exec(null,null,"QtPlugin", "setUser", [userInfo]);
  50. };
  52. QtPlugin.prototype.getUser = function(success){
  53. exec(success,null,"QtPlugin", "getUser", []);
  54. };
  55. QtPlugin.prototype.getDeviceInfo = function(success){
  56. exec(success,null,"QtPlugin", "getDeviceInfo", []);
  57. };
  58. //五、网大
  59. QtPlugin.prototype.wdStudy = function(studyInfo,success, error){
  61. exec(success, error, "QtPlugin", "wdStudy", [studyInfo]);
  62. };
  63. var qtPlugin = new QtPlugin();
  65. module.exports = qtPlugin;
  66. });

第五部分前端调用

  1. // key 是字符串， success成功回调，有一个参数，参数为key对应的value字符串，failed为失败回调
  2. function GetToken(key, success, failed){
  3. document.addEventListener(‘deviceready‘, function(){
  4. cordova.plugins.QtPlugin.get(key,
  5. success,
  6. failed
  7. );
  8. }, false);
  9. }
  11. /*调用闪屏插件*/
  12. document.addEventListener("deviceready", onDeviceReady, false);
  13. function onDeviceReady() {
  14. navigator.splashscreen.hide();
  15. }
  17. /*网大学习app接口 */
  18. function WdStudy(studyInfo, success, failed){
  19. document.addEventListener(‘deviceready‘, function(){
  20. cordova.plugins.QtPlugin.wdStudy(studyInfo,
  21. function(date){
  22. success(date);
  23. },
  24. function(error){
  25. failed(error.code,error.msg);
  26. }
  27. );
  28. }, false);
  29. }

　前端开发使用接口：在index.js里面引入接口文件后，直接用window.方法就可以

  1. 代码中调用：
  2. window.WdStudy && window.WdStudy(studyInfo, () => {
  3. }, () => {
  4. });
  • 举例：
  • 提供的接口
  1. function goThirdSite(url, start, stop, error){
  2. document.addEventListener(‘deviceready‘, function(){
  3. if(!cordova.InAppBrowser){
  4. error(0)
  5. }else {
  6. var inAppBrowserRef =
  7. cordova.InAppBrowser.open(url, ‘_blank‘, ‘location=no‘);
  8. inAppBrowserRef.addEventListener(‘loadstart‘, start);
  9. inAppBrowserRef.addEventListener(‘loadstop‘, stop);
  10. inAppBrowserRef.addEventListener(‘loaderror‘, function(params){
  11. error(1, params)
  12. inAppBrowserRef.close()
  13. inAppBrowserRef = undefined
  14. });
  15. }
  16. }, false);
  17. }
  • 调用
  1. jump = (url) => {
  2. window.goThirdSite && window.goThirdSite(url, () => {
  4. }, () => {
  6. }, (code, params) => {
  7. if (code === 0) {
  8. this.props.warning(‘暂未开放此功能‘)
  9. } else {
  10. this.props.warning(‘加载失败‘)
  11. console.log(params)
  12. }
  13. })
  14. }
时间： 2024-10-16 18:06:01

理清cordova插件的调用流程的相关文章

如何给Ionic写一个cordova插件

写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了... 在正式写下文之前,我先感谢公司大boss:王总,感谢他让我进入了一个有挑战性的技术公司 并在这个过程中一直鼓励我不断汲取新技术,同时也指正了我在开发中的一些不太好的习惯,十分感谢! 再~,感谢在开发中给予我太多帮助的杜勇以及孙金~,不论是需求讨论还是具体开发阶段都会给予一些十分有用的思

kettle插件加载流程

kettle插件加载流程 1.前言 kettle遵循着插件机制,基于插件使得kettle整个结构非常清晰,耦合性低,移植性强,特别是对kettle进行二次开发尤其方便,根据个人了解,扩展step类型的插件比较多,具体步骤可以参考:http://blog.csdn.net/d6619309/article/details/50020977  .通过了解插件的加载流程,不仅kettle的原理有深一层的认识,还有助于在进行二次开发遇到问题的时候进行定位(例如,最近遇到个情况就是通过kettle api

InnoDB主要数据结构及调用流程

InnoDB是MySQL中常用的数据引擎.本文将从源码级别对InnoDB重点数据结构和调用流程进行分析. 主要数据结构(buf0buf.h) Buf_pool Buf_pool是整个buffer系统中核心数据结构,数据库中所有的操作都会在这缓冲层得到体现.我们可以在配置文件中(InnoDB_buffer_pool_size)指定该缓冲池的大小.Buffer pool中又包含了多层数据结构:为了实现对buffer_pool的在线大小调整,引入了chunk数据结构:? Chunk在chunk数据结构

Ionic2使用第三方cordova插件（非Ionic2官方支持的native cordova插件）

Ionic2官方提供了丰富的native cordova插件,比如:Camera.Device等等,使用方式也很简单: 1.添加插件支持:ionic plugin add cordova-plugin-device; 2.在页面ts文件中声明: import { Device } from 'ionic-native'; 3.在相关方法中调用: getDeviceInfo(){ console.log('Device UUID is: ' + Device.uuid); } Ionic2nati

AngularJS Cordova插件介绍

ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api. 根据我的经验,在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码.使用ngCordova应该可以解决这个问题. 目前ngCord

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

主要利用的就是通过Cordova这个东西, 进行HTML5 与 iOS断值得传递 列子:把HTML5 获取的日期同步到iOS系统的日历中去 1. 原生代码:.h.m 提供一个接口文件 主要代码: - (BOOL)saveEventToCalender:(NSString *)title content:(NSString *)contentTitle year:(NSString *)year date:(NSString *)date time:(NSString *)time { // 定义

微信小程序实现地图插件的调用方法

目前很多微信小程序都具备地图查看的功能,那么对于在微信小程序中如何实现地图插件的调用方法,可能很多初学小程序开发的技术人员还存在很多疑问,那么下面就来跟大家详细解答一下. 首先肯定是借助小程序自带的map组件 .wxml代码: <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}&qu

Cordova-在现有iOS工程自动化接入Cordova插件

模拟Cordova插件命令 自己编写脚本,了解cordova添加插件做了哪些事情. 上一篇文章了解到,web与native的交互主要是cordova.js中的exec方法调用,触发交互事件.UIWebView已经成为过去时,忽略,这里只说wkwebview,exec调用wk的configuration.userContentController中注册的事件cordova,触发回调userContentController:didReceiveScriptMessage: 先聊web端,再聊iOS

cordova插件使用集合

1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plugin-network-information 3.获取GPS数据 cordova plugin add cordova-plugin-geolocation 4.Visual Notification(可视化消息提醒) cordova plugin add cordova-plugin-dialo