理清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>
<!-- QtPlugin是插件名字,com.plugins.qt.QtPlugin是插件原生代码的文件包名-->
<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>
<!-- app在pause后不会停止代码-->
<preference name="KeepRunning" value="false"/>
<!-- app在pause后不会停止代码-->
<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文件部分
<!-- com.qt.cordova.plugin.QtPlugin 这是插件的id,在cordova_plugins.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)
}
})
}
理清cordova插件的调用流程的更多相关文章
- Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
- Cordova入门系列(三)Cordova插件调用
版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件, ...
- [Phonegap+Sencha Touch] 移动开发76 让cordova app訪问远端站点也能调用cordova插件功能
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50735395 我相信.应该会有一些cordova开发人员想过实现以下这种app: 使用 ...
- 对cordova插件配置文件plugin.xml的理解
1.配置文件表头包括了插件id,是用于唯一标识插件的.同时插件配置了一个插件名称. 2.这个文件从工作机制,也就是js代码一直到native的java插件代码工作分成两个流程.第一个流程是从代码到插件 ...
- Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中
一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...
- Cordova-在现有iOS工程自动化接入Cordova插件
模拟Cordova插件命令 自己编写脚本,了解cordova添加插件做了哪些事情. 上一篇文章了解到,web与native的交互主要是cordova.js中的exec方法调用,触发交互事件.UIWeb ...
- 自定cordova插件笔记demo
1.在项目根目录下(我的是com.chl),添加一个文件夹,在文件夹里添加src.www两个子文件夹和plugin.xml文件.在www目录下,创建test.js.在src文件夹下添加android子 ...
- cordova插件iOS平台实战开发注意点
cordova插件是其设计理念的精髓部分,创建并使用自定义插件也是一件比较容易的事.但在这个过程中也容易进入一些误区或者有一些错误的理解,下面从笔者实际开发中遇到的问题出发,对其中的一些注意点和重要概 ...
- InnoDB主要数据结构及调用流程
InnoDB主要数据结构及调用流程 InnoDB是MySQL中常用的数据引擎.本文将从源码级别对InnoDB重点数据结构和调用流程进行分析. 主要数据结构(buf0buf.h) Buf_pool Bu ...
随机推荐
- Tengine HTTPS原理解析、实践与调试【转】
本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势 这一 ...
- Map<String,String>集合的四种遍历方式 其中有一种针对大容量的数据集合
- --save-dev和--save的区别
使用npm来进行前端包管理的时候,我们会用到npm install或者cnpm install命令来安装需要用到的包资源 1: npm install *** --save-dev 2: npm in ...
- 在Centos中安装aria2c
# 安装aria2c 1 安装epel源 rpm -ivh http://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm ...
- nexus 2版本的配置要点
nexus 3版本,集成了太多容器化功能,暂时不需要用. 现在主要关注nexus2版本. https://help.sonatype.com/repomanager2/download https:/ ...
- C# event关键字
直接使用委托的写法,如下: using System; namespace ConsoleAppTest { class Program { class Test { static void Main ...
- #6【bzoj4321】queue2 dp
题目描述 n 个沙茶,被编号 1~n.排完队之后,每个沙茶希望,自己的相邻的两人只要无一个人的编号和自己的编号相差为 1(+1 或-1)就行: 现在想知道,存在多少方案满足沙茶们如此不苛刻的条件. ...
- Python reverse
一.reverse. 将列表中的元素反转. a = [1,2,3] a.reverse. [3,2,1]
- PHP 三元运算 ??与?:
//$c = $a ?? $b; 等效 $c = isset($a) ? $a : $b; //$c = $a ?: $b; 等效 $c = $a ? $a : $b; $a = 'a'; $b = ...
- 【Java】 剑指offer(53-3) 数组中数值和下标相等的元素
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 假设一个单调递增的数组里的每个元素都是整数并且是唯一的.请编程 ...