现有Hybird项目升级改造Cordova,Cordova设计思想分享

        前段时间将项目中的Cordova做了一下升级,由于项目本身比较大,涉及到的Native和H5交互的模块又非常多,所以整个项目改造下来还是发了点时间的,废话不多说,直接进入主题,整个项目改造大致可以分为下面几个阶段:

1.集成最新版Cordova,也就是4.0.0版本(这个版本在设计架构上完全区别于老版Cordova)

2.研究新Cordova框架(类似使用了构建者模式+运行时机制,下面细聊)

3.涉及到Cordova的地方整改,模块的整合,重构

首先,如何集成Cordova 4.4.0:

       从Adobe收购了Nitobi Software和它的PhoneGap产品,然后宣布这个移动开发框架将会继续开源,并把它提交到Apache Incubator,以便完全接受ASF的管治,导致项目无法直接通过Cocoapods集成,唯一的办法就是通过Shell创建一个Cordova项目,然后将整个项目中的有用资源取出来,丢进自己的工程里面,这样,一些配置就得自己手动完成(配置也很简单,继续看)

       扯了半天,终于进入主题了,集成Cordova是通过命令行来做的,但是必须先安装Cordova命令工具,而这个命令工具是在npm命令工具下的,这就要求先安装node.js(www.runoob.com/nodejs/nodejs-install-setup.html),里面包含了安装npm工具的命令,这不是重点,安装的过程自己看看,也很简单。

现在假设已经安装好了npm工具,直接执行以下几个命令创建一个iOS的Cordova项目:


$ mkdir Cordova                                                                 #新建文件夹 

$ cd Cordova

$ cordova create hello com.example.hello HelloWorld  #创建一个cordova项目

$ cd hello

$ cordova platform add ios                                                  #指定生成iOS平台的代码项目

$ cordova plugin add cordova-plugin-wkwebview-engine #添加WK插件

这样就创建了一个新版Cordova项目,接下来就将需要的文件拖到自己的项目里面,见图:


拖完后,加入到编译环境中,此时项目已经包含了Cordova了,但是这个还不够,因为Cordova本身就是H5交互Native的桥梁,Native支持了,还得H5也支持,这里需要注意的地方是新版的cordova.js能够支持旧版的cordova,但是旧版的cordova.js绝不支持新版(向下兼容了),所以自己项目中已经集成了旧Cordova的,必须要求H5同胞们也得升级一下,那么你就必须给他们提供一下新版的cordova.js,进入“www文件夹”,找找就会看到有三个js文件,不要想了,直接发给H5的同事,让他们快点替换旧版cordova.js,修改一下处理逻辑,H5那边处理起来很简单,别让他们忽悠你说搞不定或者需要几天时间。

再假设H5那边已经把新版cordova集成完毕并且没bug了,现在就到了iOS程序员装逼的时候了,不多说,直接上干货,一起看看cordova 4.4.0在架构设计上,有哪些值得我们研究的地方:

首先看Cordova框架的整体类结构,类有很多,但是真正需要我们去关心的没几个,首先就是CDVViewController这个类,这个类和旧版的一样,但是仔细看这个类就会发现它的属性webView由UIWebView变成了UIView,这个和它需要支持WKWebView有关,先说说思想(高手谈思想,菜鸟谈代码,我们不做菜鸟),设计思想:

       通过一个协议CDVWebViewEngineProtocol来管理CDVUIWebViewEngineer和CDVWKWebViewEngineer,再通过CDVUIWebViewEngineer管理UIWebView,CDVWKWebViewEngineer管理WKWebView,说到底,就是简单的面向协议编程,使用这个编程思想是必然的,因为WKWebView和UIWebView有太多共性,只要抽象出共性,定义好协议接口,没啥搞不定的。

再看看这个类的代码,啥也不用想,直接来这个方法- (UIView*)newCordovaViewWithFrame:(CGRect)bounds,

仔细看会发现,它是先从config.xml配置里面去取CordovaDefaultWebViewEngine这个key下的值CDVWKWebViewEngineer,如果配置里面设置了这个key值,就说明需要使用CDVWKWebViewEngnieer,即使如此,它还要判断一下是不是真的支持使用WK,这里提一个细节:

WKWebView在iOS8.0时不能通过LoadRequest加载本地资源,这个bug已经在iOS9.0解决了,可以看到上面已经做了这个判断是否继续使用WKWebView。

这个类有一个属性:

         解决方案:先不用知道wenViewEngineer到底是属于CDVWKWebViewEngineer还是CDVUIWebViewEngnieer,但是我只知道它一定遵循CDVWebViewEngineProtocol这个协议,具体wenViewEngineer这个属性是哪个,是根据(UIView*)newCordovaViewWithFrame:(CGRect)bounds,这个方法系统自己推理出来的,所以我们拿到self.webEngineer后直接调用协议里面的方法,就可以加载网页了,如果觉得方法不够用,可以在CDVWebViewEngineProtocol协议里面添加,但添加的协议方法的实现必须在CDVWKWebViewEngineer和CDVUIWebViewEngnieer两个类中都去实现,不然必出问题。

再看协议CDVWebViewEngineProtocol,协议里面有属性engineWebView,其实就是当前ViewController的webView(具体里面的属性指针传递就不细说,就直接这么理解),协议方法用于给CDVWKWebViewEngineer和CDVUIWebViewEngnieer两个类使用;

这样,就简单但又直接的了解的cordova,其实知道了这些对于使用cordova做项目足矣。

最后,如何定义方法,如何定义JS插件呢?

很简单,在config.xml里面添加:

提供给H5同胞你的插件名和方法,让H5那边调一下,不出意外,Native这边必然就可以响应了,至于我的项目的整改,其实就包含WKWebView的使用和NSURLProtocol做离线缓存了,这里我先列举一下遇到的坑:

1.WKWebView的Cookie不会从NSHTTPCookieStorage里面去取,但会往里面存,所以所有涉及到登录的H5页面没法加载出来,Cookie的解决方案接下来会说明;

2.WKWebView使用NSURLProtocol做离线缓存时,请求没法拦截到,即使拦截到,请求体也被苹果干掉了,如何解决,有几个方案,接下来会说明;

3.WKWebView有自己独立的进程,分配的资源很有限,开启的WK多了,返回时会看看白屏,网上的解决方案貌似没啥用,有一个解决方案,接下来会说明;

4.WK自身设计上存在一些特殊的地方,接下来会分享出来。

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

推荐阅读更多精彩内容