首页 > 代码库 > 理清cordova插件的调用流程

理清cordova插件的调用流程

2024-09-06 04:05:08   216人阅读

  • 从调用的角度看流程 
    技术分享

前端调用（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. }

理清cordova插件的调用流程


联系
我们