zoukankan      html  css  js  c++  java
  • 理清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>
    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. }
  • 相关阅读:
    【Educational Codeforces Round 101 (Rated for Div. 2) C】Building a Fence
    【Codeforces Round #698 (Div. 2) C】Nezzar and Symmetric Array
    【Codeforces Round #696 (Div. 2) D】Cleaning
    【Codeforces Round #696 (Div. 2) C】Array Destruction
    【Educational Codeforces Round 102 D】Program
    【Educational Codeforces Round 102 C】No More Inversions
    【Good Bye 2020 G】Song of the Sirens
    【Good Bye 2020 F】Euclid's nightmare
    使用mobx入门
    requestAnimationFrame 控制速度模拟setinterval
  • 原文地址:https://www.cnblogs.com/heroine/p/6445584.html
Copyright © 2011-2022 走看看