close
当前位置: 物联网在线 > 技术文库 > ios >

Weex 是如何在 iOS 客户端上跑起来的(18)

UIImage添加完成以后,再接着添加UILabel。

[JS Framework] compile native component by {"type":"text","classList":["text"],"attr":{}} [; [JS Framework] compile to create element for text [; [JS Framework] compile to append single node for {"ref":"4","type":"text","attr":{"value":"Hello World"},"style":{"fontSize":40,"color":"#000000"}}

JSFramework继续调用OC的callAddElement方法添加View。参数如下:

{ attr = { value = "Hello World"; }; ref = 4; style = { color = "#000000"; fontSize = 40; }; type = text; }

当ready以后:

[JS Framework] "ready" lifecycle in Vm(916f9ecb075bbff1f4ea98389a4bb514)

JSFramework继续调用OC的callNative方法,参数如下:

( { args = ( 4, { value = "hello Weex"; } ); method = updateAttrs; module = dom; } )

至此,所有的布局已经完成。JSFramework会继续调用OC的callNative方法。

( { args = ( ); method = createFinish; module = dom; } )

到此为止,所有的View都已经创建完成了。最终整个布局如下:

{layout: {width: 414, height: 672, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 414, height: 672, left: 0, top: 0, children: [ {_root:div layout: {width: 414, height: 672, top: 0, left: 0}, flexDirection: 'column', alignItems: 'center', flex: 0, width: 414, height: 672, children: [ {3:image layout: {width: 110.4, height: 110.4, top: 0, left: 151.8}, flexDirection: 'column', alignItems: 'stretch', flex: 0, width: 110.4, height: 110.4, }, {4:text layout: {width: 107.333, height: 26.6667, top: 110.4, left: 153.333}, flexDirection: 'column', alignItems: 'stretch', flex: 0, }, ]}, ]}

从最终的layout来看,我们可以看出,每一个module,component都有其对应的独一无二的id。

接着下一步操作是WXImageComponent更新图片。更新结束以后,整个Render就算彻底完成了。

JSFramework在整个过程中扮演的角色是根据输入的JSBundle,不断的输出Json格式的Virtual DOM,然后通过JSCore调用OC原生方法,生成View。

上面这个例子中,JSFramework的工作原理基本就展现出来了。大体流程如下图:

Weex 是如何在 iOS 客户端上跑起来的

接下来详细总结一下JSFramework在整个Native端是如何工作的。

首先JSFramework的初始化只会在App启动时初始化一次,多个页面都共享这一份JSFramework。这个设计也提高了Weex所有页面的打开速度, JS Framework 的启动过程几百毫秒,相当于每个页面打开的时候,这几百毫秒都被节省下来了。

虽然JSFramework全局只有一个,那么Weex是如何避免多个Weex在同一个JS Runtime里面相互互不影响?Weex采取了2方面的措施,一是要求每个Weex页面都必须要创建一个全局唯一的 instance ID,通过这个ID直接能对应一个Weex页面。二是JS与Native进行相互调用的时候,每个方法都要求第一个参数是ID。比如createInstance(id, code, config, data),sendTasks(id, tasks),receiveTasks(id, tasks)。这样不同页面的状态就被隔离到了不同的闭包中了,这样就做到了相互不影响。

当Native需要渲染页面的时候,会主动调用createInstance(id, code, config, data)方法,其中code参数就是JS Bundle转换成的String。JSFramework接收到了这段入参以后,就会开始解析,并开始sendTasks(id, tasks)。

sendTasks(id, tasks)会通过JSBridge调用OC Native方法。tasks里面会指定功能的模块名、方法名以及参数。比如:

sendTasks(id, [{ module: 'dom', method: 'removeElement', args: [elementRef]}])

这里就会调用之前注册到JSContext的OC方法。

客户端也会调用receiveTasks(id, tasks)方法,调用JS的方法。receiveTasks 中有两种方式,一种是fireEvent,对应的是客户端在某个DOM元素上触发的事件,比如fireEvent(titleElementRef, 'click', eventObject);另一种则是callback,即前面功能模块调用之后产生的回调,比如我们通过fetch接口向Native端发送一个 HTTP 请求,并设置了一个回调函数,这个时候,先在JS端为这个回调函数生成一个callbackID,比如字符串 "123",这个是发送给Native端的是这个callbackID,当请求结束之后,native需要把请求结果返还给JS Runtime,为了能够前后对得上,这个回调最终会成为类似 callback(callbackID, result) 的格式。

四.关于Weex,ReactNative,JSPatch

Weex 是如何在 iOS 客户端上跑起来的

这一章本来是不在这个文章之中的,但是由于近期苹果审核,带来了一些审核风波,于是打算在这里稍微提提。

在各位读者看到这篇文章的时候,纯的ReactNative和纯的Weex的项目已经可以完美通过审核了,JSPatch依旧处于被封杀的状态。

既然本篇文章分析了Weex的工作原理,那么就稍微谈谈RN,Weex和JSpatch的区别。


(责任编辑:ioter)

用户喜欢...

设计实例 #8:如何在整个热电偶测量范围内检测热电偶并准确检测温度

热电偶参考设计演示了如何在整个热电偶测量范围内检测热电偶并准确检测温度。 该解决方案使用MCP3421 18位模数转换器(ADC)测量热电偶两端的电压。ADC具有内部2.048V基准电压和可编程增益放...


如何在零信任世界中保护医疗保健物联网设备

ISTOCK 目前全球安装了超过1亿台医疗保健物联网设备,到2020年增长到1.61亿,根据Statista的数据,在短短三年内实现了17.2%的复合年增长率(CAGR)。 据埃森哲2017年健康互联网称,医疗保健管理...


如何在便携式设计的电池容量读数中实现更高的准确性

我的狗摩卡(图1)经常喜欢在徒步旅行期间跑到我前面进行一些越野探索。她总是在以后找到我,但有时我开始寻找她很久,所以我想找到一种方法来轻松追踪她的位置。通过Adafruit的展望网站...


数字双胞胎如何在物联网支持的环境中推动创新

动态数字表示或数字双胞胎正在迅速改变行业设计,构建和操作其产品和流程的方式。Gartner预测,到2021年,一半的大型工业公司将使用数字双子机,从而使这些机构的有效性得到10%的提高。...


电动汽车绝缘电阻如何在线检测?

电动汽车是一个复杂的机电一体化产品,其中的许多部件包括动力电池、电机、充电机、能量回收装置、辅助电池充...


对话赛灵思:33年老牌芯片厂如何在AI浪潮里新兴业务年增46%

随着移动互联网红利日渐式微,一个更具备颠覆性、更具备革命性的王朝正悄然来临——人工智能(AI)。在下一个十年里,云计算、机器学习、AI芯片等相关产业将以迅猛的势头持续占领市...


客户投诉器件功耗太大,“元凶”原来是它!

selina 在 周五, 11/24/2017 - 09:48 提交 为什么我的处理器功耗大于数据手册给出的值? 在之前的文章中,我们谈到了一个功耗过小的器件——是的,的确有这种情况——带来麻烦的事情。但这种...


SaaS:从功能、数据到生态以及客户成功的一场变革

不知不觉“终结软件”的呐喊已经走过了近二十年,SaaS已经走进千家万户,人们不再纠结是否要“终结软件”,也没...


华为客户荣获2017全球智慧城市博览会两项大奖两项提名奖

在2017年全球智慧城市博览会上,华为在智慧城市领域的四位客户以他们在提供高质量市民服务、实现可持续发展方面...


迈来芯宣布上线中文官方网站以加速融入中国市场,更好的服务中国客户

全球微电子技术公司——迈来芯(Melexis)宣布,定于2017年11月正式上线中文官方网站。迈来芯电子科技(上海)有限...