理清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 ...
随机推荐
- 001_TCP/IP TIME_WAIT状态原理及监控实战
一.原理 <1>TIME_WAIT状态原理---------------------------- 通信双方建立TCP连接后,主动关闭连接的一方就会进入TIME_WAIT状态. 客户端主动 ...
- 转载:gc的概念,如果A和B对象循环引用,是否可以被GC?
原文:https://www.cnblogs.com/zhchoutai/p/6784929.html ①首先说一下,GC里边在JVM其中是使用的ROOT算法,ROOT算法,什么称作为ROOT呢,就是 ...
- 学习笔记_Cocos Creator_继承组件单例
官方文档:https://docs.cocos.com/creator/manual/zh/scripting/reference/class.html 前言 单例,在游戏开发中是比较常用的功能,全局 ...
- WallPaper
LiveWallPaper 动态壁纸是从Android2.1就开始带有的一个新的特性.它让我们能够将本来毫无生气的静态的手机屏幕背景替换成 从 随着音乐的活力和脉动而跳跃的声线 到 手指抚过能激起阵阵 ...
- Idea xml 粘贴文本保持原有格式
setting->Editor->Code Style->XML 在右边的面板中,单击第二个 “Other” 的页签,勾选“Keep white spaces”,重启idea.
- webpack-clean-webpack-plugin
在webpack中打包生成的文件会覆盖之前的文件,不过生成文件的时候文件名加了hash之后会每次都生成不一样的文件,这就会很麻烦,不但会生成很多冗余的文件,还很难搞清楚到底是哪个文件,这就需要引入该插 ...
- 步步为营-36-ADO.Net简介
与数据库进行连接交互 方法一 #region 01连接对象 //01 连接字符串 string connstr = "server=.;uid=sa;pwd=sa;database=Demo ...
- Asp.Net构架(Http请求处理流程)、(Http Handler 介绍)、(HttpModule 介绍)
Asp.Net构架(Http请求处理流程) Http请求处理流程概述 对于普通访问者来说,这就像每天太阳东边升起西边落下一样是理所当然的:对于很多程序员来说,认为这个与己无关,不过是系统管理员或者网管 ...
- zjoi2010基站选址
线段树优化dp 题解: 首先dp挺简单的 f[i,k]=f[j,k-1]+solve(i+1,j-1) 然后这个是可以n^2*k搞得 然后考虑这个solve(i+1,j-1) 当i延伸了一个位置的时候 ...
- js中setInterval和setTimeout区别和用法
setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setT ...