理清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. }