码迷,mamicode.com
首页 > 其他好文 > 详细

理清cordova插件的调用流程

时间:2017-02-26 20:45:10      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:new   success   set   action   end   orm   not   bsp   equal   

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

前端调用(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>
  9. <feature name="BarcodeScanner" >
  10. <param
  11. name="android-package"
  12. value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
  13. </feature>
  14. <!-- QtPlugin是插件名字,com.plugins.qt.QtPlugin是插件原生代码的文件包名-->
  15. <feature name="QtPlugin" >
  16. <param
  17. name="android-package"
  18. value="com.plugins.qt.QtPlugin" />
  19. </feature>
  20. <feature name="InAppBrowser">
  21. <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
  22. </feature>
  23. <preference name="Splashscreen" value="screen" />
  24. <preference name="SplashScreenDelay" value="15000" />
  25. <feature name="SplashScreen">
  26. <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
  27. <param name="onload" value="true" />
  28. </feature>
  29. <!-- app在pause后不会停止代码-->
  30. <preference name="KeepRunning" value="false"/>
  31. <!-- app在pause后不会停止代码-->
  32. <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. },
  8. {
  9. "file": "plugins/phonegap-plugin-barcodescanner/www/barcodescanner.js",
  10. "id": "phonegap-plugin-barcodescanner.BarcodeScanner",
  11. "clobbers": [
  12. "cordova.plugins.barcodeScanner"
  13. ]
  14. },
  15. {
  16. "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
  17. "id": "cordova-plugin-splashscreen.SplashScreen",
  18. "clobbers": [
  19. "navigator.splashscreen"
  20. ]
  21. },
  22. {
  23. "file": "plugins/com.qt.cordova.plugin/www/qtplugin.js",
  24. "id": "com.qt.cordova.plugin.QtPlugin",
  25. "clobbers": [
  26. "cordova.plugins.QtPlugin"
  27. ]
  28. },
  29. {
  30. "id": "cordova-plugin-inappbrowser.inappbrowser",
  31. "file": "plugins/cordova-plugin-inappbrowser/www/inappbrowser.js",
  32. "pluginId": "cordova-plugin-inappbrowser",
  33. "clobbers": [
  34. "cordova.InAppBrowser.open",
  35. "window.open"
  36. ]
  37. }
  38. ];
  39. module.exports.metadata =
  40. // TOP OF METADATA
  41. {
  42. "cordova-plugin-whitelist": "1.2.1",
  43. "phonegap-plugin-barcodescanner": "4.1.0",
  44. "cordova-plugin-splashscreen": "3.1.0",
  45. "com.qt.cordova.plugin":"1.0.0",
  46. "cordova-plugin-inappbrowser": "1.6.1"
  47. };
  48. // BOTTOM OF METADATA
  49. });

第四部分 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‘);
  4. function QtPlugin(){};
  5. //一、消息通知
  6. QtPlugin.prototype.noticeAlert = function(enable){
  7. exec(null,null,"QtPlugin", "noticeAlert", [enable]);
  8. };
  9. QtPlugin.prototype.noticeSound = function(enable){
  10. exec(null,null,"QtPlugin", "noticeSound",[enable]);
  11. };
  12. QtPlugin.prototype.noticeVibrate = function(enable){
  13. exec(null,null,"QtPlugin", "noticeVibrate", [enable]);
  14. };
  15. QtPlugin.prototype.getAlertStatus = function(success){
  16. exec(success,null,"QtPlugin", "getAlertStatus", []);
  17. };
  18. //二、保存数据
  19. QtPlugin.prototype.save = function(key,value,success, error){
  20. exec(success, error, "QtPlugin", "save", [key,value]);
  21. };
  22. QtPlugin.prototype.get = function(key,success, error){
  23. exec(success, error, "QtPlugin", "get", [key]);
  24. };
  25. //三、更新
  26. QtPlugin.prototype.getLocalVersion = function(success,error){
  27. exec(success,error,"CheckUpdate","getLocalVersion",[]);
  28. };
  29. QtPlugin.prototype.updateH5 = function(success,error){
  30. alert("updateH5");
  31. exec(success,error,"QtPlugin","updateH5",[]);
  32. };
  33. QtPlugin.prototype.update = function(url,error){
  34. exec(null,error, "QtPlugin","update", [url]);
  35. };
  36. //四、UserInfo
  37. QtPlugin.prototype.setUser = function(userInfo){
  38. exec(null,null,"QtPlugin", "setUser", [userInfo]);
  39. };
  40. QtPlugin.prototype.getUser = function(success){
  41. exec(success,null,"QtPlugin", "getUser", []);
  42. };
  43. QtPlugin.prototype.getDeviceInfo = function(success){
  44. exec(success,null,"QtPlugin", "getDeviceInfo", []);
  45. };
  46. //五、网大
  47. QtPlugin.prototype.wdStudy = function(studyInfo,success, error){
  48. exec(success, error, "QtPlugin", "wdStudy", [studyInfo]);
  49. };
  50. var qtPlugin = new QtPlugin();
  51. module.exports = qtPlugin;
  52. });

第五部分前端调用

  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. }
  10. /*调用闪屏插件*/
  11. document.addEventListener("deviceready", onDeviceReady, false);
  12. function onDeviceReady() {
  13. navigator.splashscreen.hide();
  14. }
  15. /*网大学习app接口 */
  16. function WdStudy(studyInfo, success, failed){
  17. document.addEventListener(‘deviceready‘, function(){
  18. cordova.plugins.QtPlugin.wdStudy(studyInfo,
  19. function(date){
  20. success(date);
  21. },
  22. function(error){
  23. failed(error.code,error.msg);
  24. }
  25. );
  26. }, false);
  27. }

 前端开发使用接口:在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, () => {
  3. }, () => {
  4. }, (code, params) => {
  5. if (code === 0) {
  6. this.props.warning(‘暂未开放此功能‘)
  7. } else {
  8. this.props.warning(‘加载失败‘)
  9. console.log(params)
  10. }
  11. })
  12. }

理清cordova插件的调用流程

标签:new   success   set   action   end   orm   not   bsp   equal   

原文地址:http://www.cnblogs.com/heroine/p/6445584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!