请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-23:00

    客服QQ

    QQ:169403068

    电子邮件

    169403068@qq.com

Cordova 浅析架构的原理

[复制链接] 0
回复
23
查看

108

主题

270

帖子

637

积分

高级会员

Rank: 4

积分
637
因为项目使用了Cordova,也使用了很长时间。至于有很多hybride框架,为什么我们使用Cordova,这里不做过多的叙述,我们也是根据项目需求来选定的,需要及时更新、还要输出别人SDK等。没有最好,只有适合项目的。
之前整理文档的时候查看了Cordova官方文档及一些博客,也总结了自己的思考。站在大牛的肩膀上学习总结,自己才能在成为大牛的道路上快一点。最近需要优化下容器,所以再次梳理了一遍原理代码。
Cordova的基本架构如下图:



看了架构图,大家也对Cordova有了一些了解,是的,Cordova的原理和其他的hybride很相似。核心的东西就是H5与Native的交互原理、Bridge、定义的解析规则(Engine)
例如:Cordova就是先获取config.xml中的setting项,并保存下来,并初始化一些类为webview加载提供需要。webview加载链接的时候会注入cordova的一些js,还有相对应的Native的Cordova类,这些就是核心的一些东西。都完成后可以说我们的一个容器就可以使用了。其中的细节我们接下来再细分讲解。下面我们来说下具体的JS和iOSNative交互原理:


交互流程图中表示的是默认的JS和Native通信的方法(采用iframe)
1.保存Cordova_plugin.js的 插件文件名字和地址。
2.插件的API呼出时,通过调用Cordova的exec模块将API的参数保存在CommandQueue的队列中。CallBack则保存在JS侧的callbacks map里面。
3.添加一个空的iframe,iframe的src则指向gap://ready
4.3的iframe的src设置以后,NATIVE侧UIWebviewDelegate#shouldStartLoadWithRequest则被呼出来。
5.Webview的Delegatet判断gap://ready的情况下,则执行commandDelegate的处理。
6.commandDelegate则从JS侧取出API的参数,内部实现则是通过 UIWebview#stringByEvaluatingJavaScriptFromString的返回值 取得CommandQueue里面的参数转换成JSON数据。
7.根据6的插件,执行NATIVE定义的插件实例。
8.插件中,有CallBack的情况下,成功失败的结果通过UIWebview#stringByEvaluatingJavaScriptFromString执行JS,JS端则根据传过来的CallBackId,从callbacks map取出回调函数并执行。
以上这就是一个H5与Native大致的交互回环流程。
看到这里相信对Cordova的架构及调用交互流程有了个大致的理解。我们接下来看下具体代码相关解析。
配置注析:

我们的Cordova的webview容器由两个部分组成,H5相关的JSs(cordova.js、cordova_plugins.js、exec.js、plugin.js)等、Html、css和Native的CDV的类组成(CDV、CDVCommandQueue、CDVCommandDelegate、CDVCommandDelegateImpl、CDVPlugin、CDVViewController)等。
config.xml信息:
  1. [/code]我们会使用CDVConfigParser解析后的内容放到字典pluginsDict里保存,feature就是plugin的key,param中的value就是对应的value。如果onload是true则说明在加载之前需要提前准备该plugin即依赖,添加到startupPluginNames数组中。
  2. [code][b]//是否在线播放 [code]="AllowInlineMediaPlayback" value="false" />//web缓存    [code]="BackupWebStorage" value="cloud" />//是否显示滚动原始位置    [code]="DisallowOverscroll" value="false" />    [code]="EnableViewportScale" value="false" />    [code]="KeyboardDisplayRequiresUserAction" value="true" />    [code]="MediaPlaybackRequiresUserAction" value="false" />    [code]="SuppressesIncrementalRendering" value="false" />    [code]="SuppressesLongPressGesture" value="false" />    [code]="Suppresses3DTouchGesture" value="false" />    [code]="GapBetweenPages" value="0" />    [code]="PageLength" value="0" />    [code]="PaginationBreakingMode" value="page" />    [code]="PaginationMode" value="unpaginated" />    [code]="CordovaWebViewEngine" value="CDVWKWebViewEngine" />[/b]
复制代码
preference解析出来会放到settings这个字典里,name是key,value是value。这些事一些配置信息
  1. [/code]content是需要请求的url地址, access origin 通过的类型,allow-intent 跳转的类型。
  2. [size=1]cordova_plugins.js解析:[/size]
  3. [code][b]cordova.define('cordova/plugin_list', function(require, exports, module) {module.exports = [  {    "id": "cordova-plugin-wkwebview-engine.ios-wkwebview-exec",    "file": "plugins/cordova-plugin-wkwebview-engine/src/www/ios/ios-wkwebview-exec.js",    "pluginId": "cordova-plugin-wkwebview-engine",    "clobbers": [      "cordova.exec"    ]  },  {    "id": "cordova-plugin-wkwebview-engine.ios-wkwebview",    "file": "plugins/cordova-plugin-wkwebview-engine/src/www/ios/ios-wkwebview.js",    "pluginId": "cordova-plugin-wkwebview-engine",    "clobbers": [      "window.WkWebView"    ]  }];module.exports.metadata = // TOP OF METADATA{  "cordova-plugin-whitelist": "1.3.3",  "cordova-plugin-wkwebview-engine": "1.1.4"};// BOTTOM OF METADATA});[/b]
复制代码
id:对外唯一标示id
file:js路径
pluginid:plugin的唯一id(类似pod的时候的name)更新的时候需要对应。
clobbers:命名类似于(类名)
ios-wkwebview.js
  1. [b]cordova.define("cordova-plugin-wkwebview-engine.ios-wkwebview", function(require, exports, module) {               var exec = require('cordova/exec');var WkWebKit = {    allowsBackForwardNavigationGestures: function (allow) {        exec(null, null, 'CDVWKWebViewEngine', 'allowsBackForwardNavigationGestures', [allow]);    }};module.exports = WkWebKit;});[/b]
复制代码
注意:这里的define与id要一致,feature中的name要与Native的类名一致,ios-wkwebview.js中的CDVWKWebViewEngine也要与feature中的name一致。否则会映射不到造成报错。

Debug断点整个流程代码后,我们会看到整个代码调用流程是这样的:

1.配置管理

CDVViewController容器
-->ConfigParser解析 config_loan.xml 获取到onload = true的startupPluginNames ,再获取到plugin的name(key),再在pluginsMap中获取到 value使用反射init初始化 namePlugin ,然后注册该plugin(赋值属性、协议)保存到pluginObjects。
2.H5容器注入JS

加载url链接,会注入cordova相关的js包含公共的核心js和我们对应写的customjss。
3.点击webviewH5触发事件

点击H5 plugin api
-->JSmethod execProxy
--> JSmethod cordovaExec
--> JSmethod  iOSExec 配置生成事件唯一标示JSONString(successCallback, failCallback, service, action, actionArgs)
--> JSmethod massageArgsJsToNative
--> JSmethod pokeNative()
--> NativeMethod shouldStartLoadWithRequest (gap)
--> NativeMethod fetchCommandsFromJs
--> NativeMethod evaluateJavaScript
:js(cordova.require('cordova/exec').nativeFetchMessages())
--> JSmethod execProxy.nativeFetchMessages
--> 回调通知NativeMethod evaluateJavaScript completionHandler
--> NativeMethod enqueueCommandBatch
--> NativeMethod 转换成QHInvokedUrlCommand
--> NativeMethod- (BOOL)execute:(QHInvokedUrlCommand*)command
--> NativeMethod getCommandInstance  registerPlugin init对应的object
--> NativeMethod 转换成QHPlugin
--> NativeMethod  runtime 调用方法
--> 调用Native的plugin的Method方法。
4.Native处理完成方法后回调给H5,send message to WebViewH5

--> NativeMethod sendPluginResult
--> NativeMethod  evalJsHelper
--> NativeMethod  evalJsHelper2
-->JSmethod iOSExec.nativeCallback
--> JSmethod callbackFromNative
--> JSmethod callback.success\callback.fail
以上就是整个调用流程代码调用的顺序了。由于流程分的太细所以说就没画时序图。
以下是其他博主的时序图仅供参考:

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注我们
  • 官方微信公众号
  • APP应用下载
客服咨询
  • 400-123-4567(工作日:9:00-16:00)
  • enquire@neoconex.com

所有资源均是网上搜集或网友上传提供,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如有侵犯您的版权,请及时发邮件联系我们

Powered by Discuz! X3.2 © 2001-2013 Comsenz Inc. 星点互联设计  |网站地图