WebApp的Cordova之旅

前言

首先谈一下Cordova的相识,随着大前端的到来,越来越多的应用开始嵌套h5页面,既要保证了用户信息的及时性和业务更新的及时性,也要保证用户在操作的流畅体验。所以在开发hybirdApp的路上,我们不断的在总结和吸取经验。由于项目组的融合,也带了技术的碰撞,大家用的框架也不尽相同,从而引入了Cordova的相识,那就静下来看看和我们之前的豆瓣混合框架有何不同吧!

一、首先回忆我们交互的方式

从了解到使用,现在遇到的传输方式无非就2种:
1.约定好互调的js方法进行传输(Cordova)
2.约定好url,h5发送对应的url,native进行捕捉,来传输数据(豆瓣的混合框架http://www.jianshu.com/p/8174bd232aa7

二、去了解Cordova的传输机制

在了解之前先要学会使用,如果一个框架你都不会使用,那你看他的源码有何意义。
图像永远都比语言要更加直白的表达:

cordova思维导图.png

下面就详细的解读一下图示:
1.首先我们要创建我们本地提供方法的类,这个类一定是要继承QHPlugin,带表我们本地要做出响应的类。这个类可以获取到你将来要展示web页面的一些详细信息,包含vc和webview的实例,所以你可以在这个类里直接部署你本地的方法去搞事情。
2.为了方便h5的调用我们本地方法,我们按照Cordova的规则来定制我们本地功能类对应的js文件,js类里面是我们对要调用的js方法的封装
3.配置的xml文件要注意name和value的名字都是本地类名,这个会在以后解析找到对应本地类的文件,一定要配置正确
4.在cordova_plugins.js文件里面添加自己本地的响应类对应的js类,里面一共有4个参数:id(标示,可以自定义),file(js文件的本地路径),pluginId(要和你响应类的js文件里定义的id保持一致),merges(将来在html中调用方法对应的类名)
5.完成本地配置工作后就需要h5导入js code
<script type="text/javascript" src=“local_intercept/www/cordova.js”></script>
此处会将本地h5需要的js资源在页面生成时注入(本地会在加载h5的时候拦截并以local_intercept为key去讲原有的js文件替换为本地的js)。这个地方会出现js还未注入完毕,页面就已渲染完成,这就需要h5在渲染前先保证我们的js文件已注入完成实例代码:
<script>
document.addEventListener('deviceready', function () {
var page = $we.widget.add("h5.app",{
hashSupport: true
});
}, false);
</script>

执行过程

6.h5点击事件触发之前写好的js对象方法
7.js最后会根据Cordova的exec.js类将按照规则定义的方法进行解析,并生成对应的callbackid
8.将处理后的js文件,通过框架里约定的js方法nativeFetchMessages()传递给native,native在webview的代理方法- (BOOL)webView:(UIWebView)theWebView shouldStartLoadWithRequest:(NSURLRequest)request navigationType:(UIWebViewNavigationType)navigationType
里面进行接收
9.native拿到信息找到对应的类(在vc的viewDidLoad将类注册进去),在完成操作后,把完成结果通过调用cordova类的方法将结果写入成QHPluginResult对象
10.QHPluginResult对象会调用QHWebViewEngineProtocol协议方法
11.协议方法里面会调用stringByEvaluatingJavaScriptFromString方法调用定义好的nativeCallback方法,传递给js
12.js拿到返回数据后,根据callbackID找到对应的js类
13.对应的callback方法再通过js类回调给html,html再作出响应整个过程就结束

三、总结执行顺序和核心处理

我们将本地要做操作的动作按照规则封装成类,对应的还要封装js文件,这样两边都高度封装调用方便,Cordova帮我们做中间协调,主要通过stringByEvaluatingJavaScriptFromString进行数据交换。html调用封好的js,js通过库调起我们本地类方法,本地完成后将数据返还给js,js再返回给h5。
对比豆瓣框架,因为交互的方式不同,调起本地豆瓣采用捕捉请求的方式,本地响应完成之后需要调stringByEvaluatingJavaScriptFromString方法进行callback,大型数据传输比如说用户信息,就需要h5发送post请求然后我们拦截之后,再把要返回的数据塞进请求的body里面重新发送出去,这里要注意WKWebView的body会丢失,所以在使用WKWebView时这样传递数据是无效的。总的来看豆瓣框架是整个过程得到了分离,并不是一个完美的闭环;
Cordova则是native相对的任务多了一层,就是帮助h5编写对应的js文件,使得h5调用非常方便,简短的代码和一致的输出更加系统,而且回调更加统一,整个过程是一个闭环,确实实用一些。
以上是本人对Cordova框架的一些见解,如果有错误的地方希望大家多多指出。这里只是从使用入手介绍了执行过程,并没有深入的去讲解每个类的实现,如果大家有兴趣可以去直接翻看源码,希望会受益良多!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容