技术控

    今日:123| 主题:49488
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Weex学习与实践(三):iOS原理篇

[复制链接]
Chloe25 发表于 2016-10-17 10:54:31
319 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Weex学习与实践(一):Weex,你需要知道的事  
      Weex学习与实践(二):iOS集成的tips  
      Weex学习与实践(三):iOS原理篇  
  本文主要介绍包括WeexSDK-iOS主要类介绍、Weex页面iOS端渲染流程、JS调用iOS方法
  主要类

  WXSDKEngine

  WXSDKEngine主要用于初始化WeexSDK的环境
  一开始会载入配置文件main.js并且注册一些默认的组件、模块以及handler
  1. + (void)initSDKEnviroment:(NSString *)script
  2. {
  3.    
  4.     [self _registerDefaultComponents];
  5.     [self _registerDefaultModules];
  6.     [self _registerDefaultHandlers];
  7.    
  8.     [[WXSDKManager bridgeMgr] executeJsFramework:script];
  9. }
复制代码
WXSDKInstance

  一个WXSDKInstance就对应一个UIViewController,对应一个weex页面。
  主要用来渲染页面,一般通过renderWithURL方法,然后能够接收一些回调和一些视图相关的方法
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图
复制代码
WXBridgeManager

  WXBridgeManager 是JS与iOS通过JSCore交互的类,相关的类还有WXBridgeContext、WXJSCoreBridge。
  比如调用JS
  1. - (void)executeJsMethod:(WXBridgeMethod *)method
  2. {
  3.     if (!method) return;
  4.    
  5.     __weak typeof(self) weakSelf = self;
  6.     WXPerformBlockOnBridgeThread(^(){
  7.         [weakSelf.bridgeCtx executeJsMethod:method];
  8.     });
  9. }
复制代码
JS调用native的话需要通过WXJSCoreBridge的registerCallNative方法
  WXComponent

  组件基类,自己实现iOS端的组件需要继承它。相关的还有负责组件初始化的工厂类WXComponentFactory,以及WXComponentManager
  WXModuleProtocol

  自定义module需要实现的协议
  Weex页面iOS端渲染流程

  首先在ViewController里的render放初始化WXSDKInstance,因为render会支持实时刷新,所以每次都需要先销毁这个实例。
  1. [_instance destroyInstance];
  2.     _instance = [[WXSDKInstance alloc] init];
复制代码
然后WXSDKManager会保存instanceId
  1. [WXSDKManager storeInstance:self forID:_instanceId];
复制代码
然后会调用renderWithURL方法来载入script,在这里会判断是本地文件还是需要从服务器下载,
  1. - (void)renderWithURL:(NSURL *)url options:(NSDictionary *)options data:(id)data{
  2.             if ([url isFileURL]) {
  3.         //from local
  4.         dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
  5.             NSString *path = [url path];
  6.             NSData *scriptData = [[NSFileManager defaultManager] contentsAtPath:path];
  7.             NSString *script = [[NSString alloc] initWithData:scriptData encoding:NSUTF8StringEncoding];
  8.             [weakSelf renderView:script options:newOptions data:data];
  9.         });
  10.     }else{
  11.             //from server
  12.     }
  13. }
复制代码
然后就会根据script文件渲染视图
  1. [weakSelf renderView:script options:newOptions data:data];
复制代码
在这个方法里面首先会创建根视图,当创建完成时WXSDKInstance会收到onCreate的回调
  1. //TODO WXRootView
  2.     WXPerformBlockOnMainThread(^{
  3.         self.rootView = [[WXView alloc] initWithFrame:self.frame];
  4.         if(self.onCreate) {
  5.             self.onCreate(self.rootView);
  6.         }
  7.     });
复制代码
之后再通过bridge调用JS方法来开始创建实例
  1. [self callJSMethod:@"createInstance" args:args];
复制代码
然后这里会判断JSFramework也就是main.js有没有加载完成,然后再通过WXJSBridge的JSContext来执行js方法
  1. - (void)callJSMethod:(NSString *)method args:(NSArray *)args
  2. {
  3.     [[_jsContext globalObject] invokeMethod:method withArguments:args];
  4. }
复制代码
最后main.js会调用WXSDKInstance的createFinish方法来结束页面的渲染
  JS调用iOS方法

  首先要注册一个组件
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图0
复制代码
注册module的时候 会通过下面方法
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图1
复制代码
把所有通过宏注册的方法发送给js端
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图2
复制代码
这会把方法暴露出来,并且方法名字是”wx_export_method_“加代码所在行号,wx_export_method_25
  组件、模块 是给js端用的,而handler则是给objc自己用的,所以不用发送消息给js端
  然后通过methodForSelector拿到WX_EXPORT_METHOD方法的返回值,并且保存到methods中
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图3
复制代码
然后拿到WXModuleConfig组成的_moduleMap之后再发送给JS端
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图4
复制代码
最后需要自己callNative的回调,当JS调用时就会传值到这里
  1. onCreate //根视图rootView创建的时候
  2. renderFinish//视图渲染完成
  3. componentForRef //通过视图索引拿到对应的组件视图5
复制代码
tasks里面包括方法的一些相关信息,包括module(比如dom),method(比如updateFinish),args
      weex-devtool-iOS  

  weex-devtool-iOS 其实是    PonyDebugger的衍生品。  
      使用PonyDebugger调试iOS应用  
      FLEXNetworkObserver
友荐云推荐




上一篇:ES6 Features That Can’t Be Ignored (part 1)
下一篇:Exploring JavaScript: Typed Arrays
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

口味速度快 发表于 2016-10-20 03:48:54
态度决定一切,不错!
回复 支持 反对

使用道具 举报

吃货总比痴货好 发表于 2016-10-24 20:28:07
支持支持再支持
回复 支持 反对

使用道具 举报

Georgeoa 发表于 2016-11-20 21:21:24
楼主,闹哪样,你家里人知道么?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表