理清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文件里面有

function GetToken(key, success, failed){
document.addEventListener('deviceready', function(){
cordova.plugins.QtPlugin.get(key,
success,
failed
);
}, false);
}

关键2：cordova_plugins.js:配置插件clobbers，已经对应的插件id和插件js文件的路径

"file": "plugins/com.qt.cordova.plugin/www/qtplugin.js",
"id": "com.qt.cordova.plugin.QtPlugin",
"clobbers": [
"cordova.plugins.QtPlugin"
]

关键3：js部分，这里是插件的id

cordova.define("com.qt.cordova.plugin.QtPlugin", function(require, exports, module) {

关键4：js部分，这里是插件的名字，以及插件的方法

QtPlugin.prototype.save = function(key,value,success, error){
exec(success, error, "QtPlugin", "save", [key,value]);
};
QtPlugin.prototype.get = function(key,success, error){
exec(success, error, "QtPlugin", "get", [key]);
};

关键5：config.xml:插件名对应的原生代码的包名

<feature name="BarcodeScanner" >
<param
name="android-package"
value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
</feature>

关键6：原生代码：匹配到方法，调用原生方法saveDate()

if ("save".equals(action)) {
System.out.println("save被调用");
cordova.getThreadPool().execute(new Runnable() {
public void run() {
String key = args.optString(0);
String value = args.optString(1);
saveDate(key, value);
}
});
}

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

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

public boolean execute(String action, final CordovaArgs args,
final CallbackContext callbackContext) throws JSONException {
//save方法，给前端调用用来保存key value形式的键值对
if ("save".equals(action)) {
System.out.println("save被调用");
cordova.getThreadPool().execute(new Runnable() {
public void run() {
String key = args.optString(0);
String value = args.optString(1);
saveDate(key, value);
}
});
}
//get方法，给前端调用用来获取指定key对应的value值
else if ("get".equals(action)) {
//get会被调用两次，一次获取用户名，另外一次获取密码
System.out.println("get被调用");
String key = args.optString(0);
System.out.println("get被调用key：" + key);
String values = PrefUtils.getString(MyApplication.ctx, key, "");// 从sp取
System.out.println("返回的values:" + values);
callbackContext.success(values);
} else if ("getLocalVersion".equals(action)) {
JSONObject json = new JSONObject();
String localVer = DeviceUtil.getVersionName(context);
if (!localVer.equals("")) {
json.put("localVer", localVer);
json.put("platform", "android");
callbackContext.success(json);
return true;
} else {
json.put("code", 107);
json.put("msg", "获取本地版本号失败");
callbackContext.error(json);
}
}

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

<feature name="Whitelist" >
<param
name="android-package"
value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param
name="onload"
value="true" />
</feature>
<feature name="BarcodeScanner" >
<param
name="android-package"
value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
</feature>

<feature name="QtPlugin" >
<param
name="android-package"
value="com.plugins.qt.QtPlugin" />
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>
<preference name="Splashscreen" value="screen" />
<preference name="SplashScreenDelay" value="15000" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
<param name="onload" value="true" />
</feature>

<preference name="KeepRunning" value="false"/>

<preference name="KeepRunning" value="false"/>

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

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/cordova-plugin-whitelist/whitelist.js",
"id": "cordova-plugin-whitelist.whitelist",
"runs": true
},
{
"file": "plugins/phonegap-plugin-barcodescanner/www/barcodescanner.js",
"id": "phonegap-plugin-barcodescanner.BarcodeScanner",
"clobbers": [
"cordova.plugins.barcodeScanner"
]
},
{
"file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
"id": "cordova-plugin-splashscreen.SplashScreen",
"clobbers": [
"navigator.splashscreen"
]
},
{
"file": "plugins/com.qt.cordova.plugin/www/qtplugin.js",
"id": "com.qt.cordova.plugin.QtPlugin",
"clobbers": [
"cordova.plugins.QtPlugin"
]
},
{
"id": "cordova-plugin-inappbrowser.inappbrowser",
"file": "plugins/cordova-plugin-inappbrowser/www/inappbrowser.js",
"pluginId": "cordova-plugin-inappbrowser",
"clobbers": [
"cordova.InAppBrowser.open",
"window.open"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.2.1",
"phonegap-plugin-barcodescanner": "4.1.0",
"cordova-plugin-splashscreen": "3.1.0",
"com.qt.cordova.plugin":"1.0.0",
"cordova-plugin-inappbrowser": "1.6.1"
};
// BOTTOM OF METADATA
});

第四部分 js文件部分


cordova.define("com.qt.cordova.plugin.QtPlugin", function(require, exports, module) {
var exec = require('cordova/exec');
function QtPlugin(){};
//一、消息通知
QtPlugin.prototype.noticeAlert = function(enable){
exec(null,null,"QtPlugin", "noticeAlert", [enable]);
};
QtPlugin.prototype.noticeSound = function(enable){
exec(null,null,"QtPlugin", "noticeSound",[enable]);
};
QtPlugin.prototype.noticeVibrate = function(enable){
exec(null,null,"QtPlugin", "noticeVibrate", [enable]);
};
QtPlugin.prototype.getAlertStatus = function(success){
exec(success,null,"QtPlugin", "getAlertStatus", []);
};
//二、保存数据
QtPlugin.prototype.save = function(key,value,success, error){
exec(success, error, "QtPlugin", "save", [key,value]);
};
QtPlugin.prototype.get = function(key,success, error){
exec(success, error, "QtPlugin", "get", [key]);
};
//三、更新
QtPlugin.prototype.getLocalVersion = function(success,error){
exec(success,error,"CheckUpdate","getLocalVersion",[]);
};
QtPlugin.prototype.updateH5 = function(success,error){
alert("updateH5");
exec(success,error,"QtPlugin","updateH5",[]);
};
QtPlugin.prototype.update = function(url,error){
exec(null,error, "QtPlugin","update", [url]);
};
//四、UserInfo
QtPlugin.prototype.setUser = function(userInfo){
exec(null,null,"QtPlugin", "setUser", [userInfo]);
};
QtPlugin.prototype.getUser = function(success){
exec(success,null,"QtPlugin", "getUser", []);
};
QtPlugin.prototype.getDeviceInfo = function(success){
exec(success,null,"QtPlugin", "getDeviceInfo", []);
};
//五、网大
QtPlugin.prototype.wdStudy = function(studyInfo,success, error){
exec(success, error, "QtPlugin", "wdStudy", [studyInfo]);
};
var qtPlugin = new QtPlugin();
module.exports = qtPlugin;
});

第五部分前端调用

// key 是字符串， success成功回调，有一个参数，参数为key对应的value字符串，failed为失败回调
function GetToken(key, success, failed){
document.addEventListener('deviceready', function(){
cordova.plugins.QtPlugin.get(key,
success,
failed
);
}, false);
}
/*调用闪屏插件*/
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
}
/*网大学习app接口 */
function WdStudy(studyInfo, success, failed){
document.addEventListener('deviceready', function(){
cordova.plugins.QtPlugin.wdStudy(studyInfo,
function(date){
success(date);
},
function(error){
failed(error.code,error.msg);
}
);
}, false);
}

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

代码中调用：
window.WdStudy && window.WdStudy(studyInfo, () => {
}, () => {
});

举例：
提供的接口

function goThirdSite(url, start, stop, error){
document.addEventListener('deviceready', function(){
if(!cordova.InAppBrowser){
error(0)
}else {
var inAppBrowserRef =
cordova.InAppBrowser.open(url, '_blank', 'location=no');
inAppBrowserRef.addEventListener('loadstart', start);
inAppBrowserRef.addEventListener('loadstop', stop);
inAppBrowserRef.addEventListener('loaderror', function(params){
error(1, params)
inAppBrowserRef.close()
inAppBrowserRef = undefined
});
}
}, false);
}

调用

jump = (url) => {
window.goThirdSite && window.goThirdSite(url, () => {
}, () => {
}, (code, params) => {
if (code === 0) {
this.props.warning('暂未开放此功能')
} else {
this.props.warning('加载失败')
console.log(params)
}
})
}

posted @ 2017-02-26 19:47 前端女侠阅读(8712) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端女侠

蓝天白云，山清水秀，鸟语花香。女侠的程序猿世界里，安静下来可以听见敲键盘的声音......

理清cordova插件的调用流程

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

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

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

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

第四部分 js文件部分

第五部分前端调用

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

公告

前端女侠

蓝天白云，山清水秀，鸟语花香。女侠的程序猿世界里，安静下来可以听见敲键盘的声音......

理清cordova插件的调用流程

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

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

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

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

第四部分 js文件部分

第五部分前端调用

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

公告

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

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