客户端动态化系列之——Weex

在前端越来越火的年代,逐渐衍生出类似React Native、Weex等开发套件。所达到的目的挺简单的,达到在多个平台下共用一份代码,节省开发成本,提高开发效率。其次,由于JavaScript语言的特殊性,能动态更新页面而不需要发版。基于这两点,越来越多的个人开发者&公司开始尝试它们。

本文将从个人开发实践项目出发,发表一些对于Weex的看法和在项目中的实战经历。不涉及具体原理和概念性的东西,读者可以自行去Weex官网查阅。

Weex原理

大体上和React Native一致,都是一个“放大版”的JSBrdige。其核心无非就是自定义了一套DSL(.we),配合vue实现数据绑定、vdom等等功能。再通过native端与JS端的数据、API交互使得最终体现为native的调用过程。

而在这过程中,iOS用了自带的引擎JavaScriptCore & Android则是Google V8。在这过程中有个坑,iOS版本Weex有内存泄漏的情况(Android没有),原因是JS Framework(Weex JS端的主程)并没有像V8一样hidden class的行为,GC回收不是很及时。Weex开发团队的同事发现了此bug,并在后续的版本中修复。

OK,我认为对于“应用框架者”来说,不用去care具体实现的原理。只需要了解怎么使用即可,毕竟这只是一个工具。如果是为了学习,可以去阅读,而对于“使用者”来说,快速地入门则是王道

而Weex的使用,对于native来说,无非就是针对具体的业务场景实现Handler、Module、Component

Handler

我们可以把Weex看做是一个提供了基础套件的UI渲染库。核心功能还是需要开发者自己来实现,比如:图片下载逻辑、网络请求、导航跳转等等。

所以开发者首先要关注的就是需要静态分析自己当前工程所需的功能,看看Weex需要你实现的handler中有哪些你要用到的,并实现它们。
比如在我的项目中,就需要实现图片下载逻辑,于是实现并注册。

[WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];

Module

Module可以理解为JS端需要调用native才能处理的逻辑,并且在JS<->native进行交互。这么说有点抽象,举个具体的例子:比如在JS端想访问native端的数据库(coredata、realm等),就需要实现一个module来满足JS调用native写好的module以实现native的逻辑。

在我的实战项目中,选择用module的方式实现网络请求与导航跳转。
[WXSDKEngine registerModule:@"urlRoute" withClass:[CNCWeexURLRouteModule class]];
[WXSDKEngine registerModule:@"networkRequest" withClass:[CNCWeexURLRouteModule class]];

Component

Component很好理解,要实现一个跑马灯UI的效果,在native端实现,并且注册到JS。JS端调用,即可展示出跑马灯。这就是Component,在JS满足不了或者实现成本很高的时候,则可以在native端实现Component供JS调用

由于第一次试水Weex,并没有采取很复杂的UI,就没有用Component。

踩过的坑

JS中this关键字的用法与Objc不同,this的作用域仅在当前对象。而在JS中函数也算一个对象。如果在函数中套一个函数,此时用this,只能代表外层函数。而非Objc一样代表整个最外层对象,需要注意!

业务中碰到一个场景,需要在某个场景,native端主动调用JS。而Weex提供给外部的API并没有提供这样的能力,仅仅是在JS主动调native方法时传一个callback,并且在native方法执行完成时,callback销毁。而业务场景却需要在将来执行回传下来的callback。翻看源码,只能自己实现了。这里给个思路:

其实在Weex的实现中(不贴源码了),会判断native实现的方法(即给JS调用的方法,比如module实现的方法)的入参类型。如果是声明成WXModuleCallback,则Weex内部会进行处理,并转成block给iOS(Android同理)。而如果不是WXModuleCallback,则会透传一个String(weex标记的方法ID)下来,这很关键。于是我们可以投机取巧地把入参改成String,记录下这个String。在后期想调这个JS方法时,写如下代码即可
[[WXSDKManager bridgeMgr] callBack:weexInstance.instanceId funcId:aliveCallBackID params:params keepAlive:YES];

看法

Weex相比React Native,坑还是比较多的。但是从“使用者”角度来说,Weex方便很多。但是对于存在很多复杂业务场景的开发者来说,必然会去学习其原理,而此时Weex相比RN就没那么友善了。

因为在阿里,我更加支持Weex,也希望它变得越来越好。

无论采用哪种方式,两者都能实现客户端的动态化。而这对于一些多变的页面来说,是一种新的选择方式。

这是客户端动态化系列的第二篇文章,读者可以看前篇客户端动态化系列之——URLRoute,相信你对动态化有更深的理解。

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

推荐阅读更多精彩内容