Weex学习与实践(一):Weex,你需要知道的事

Weex学习与实践(二):iOS集成的tips

Weex学习与实践(三):iOS原理篇

本文主要介绍包括iOS上集成Weex、iOS上扩展组件、iOS上扩展module

iOS上集成Weex

集成weex,需要WeexSDK、WXDevtool两个库以及阿里未开源的ATSDK-Weex。

目前官方的alibaba/Weex仓库里面

    pod 'WeexSDK', :path=>'../sdk/'
    pod 'WXDevtool', :path=>'../WXDevtool/'
    pod 'ATSDK-Weex', '0.0.1'

它们直接使用的weex仓库的sdk,但是weex主仓库的WXDevtool已经不维护了,需要替换成,weexteam/weex-devtool-iOS的代码。

另外也可以直接从cocoapods的源pod仓库,但是cocoapods的源都是打包成framework,很多文件并没有设置为public,所以导致很多头文件没有暴露出来。

当然你也可以不用通过cocoapods集成,直接把代码拉进工程就可以,如果发生

Unknown type name 'NSString'

你可能需要把layout.c文件右侧的type改为Objective-C Source,或者直接修改为layout.m。

基本上JS页面是在WXDemoViewController工作的,你可能需要接收页面刷新的通知,以支持实时刷新

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationRefreshInstance:) name:@"RefreshInstance" object:nil];

页面会维护一个WXSDKInstance实例,WXSDKInstance就是weex渲染的实例对象,提供了很多页面渲染相关的接口,比如renderWithURL、refreshInstance、destroyInstance等

weex SDK 集成到工程 (integrate to ios)

Weex iOS SDK 集成指南

iOS上扩展组件

目前官方iOS这一块组件的代码在WeexSDK的component里面,组件有限,只有image,list,scroller等,如果想要实现自己的组件,首先需要继承WXComponent类。

然后实现方法

- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{}

注意这个方法不在主线程,这里面接收一些js传过来的参数,以在js端写的image标记为例子

<image style="width: 100;height: 100;margin-top:20;margin-right:20;margin-left:220" src=></image>

到objc端就是

ref:701
type:image
styles:
{
    height = 100;
    marginLeft = 220;
    marginRight = 20;
    marginTop = 20;
    width = 100;
}
attributes:
{
    src = "https://avatars.githubusercontent.com/u/9892522?v=3";
}

ref(结点的唯一标识符)

然后在loadView的时候可能需要返回自己的objc组件

- (UIView *)loadView
{
    return [[WXImageView alloc] init];
}

然后你可以通过复写addEvent方法来增加一个change(UIControlEventValueChanged)、click(UIControlEventTouchUpInside)等事件

如果是image组件的话,你可能需要接收图片地址,这个时候需要通过实现了WXImgLoaderProtocol的WXImgLoaderDefaultImpl来处理,WXImgLoaderDefaultImpl实现了downloadImageWithURL方法,这里面通过SDWebImage来下载一张图片。

iOS 扩展 (extend to ios)

iOS上扩展module

这一块的代码在module分组里面,包括网络库stream,持久化storage等,你可以扩展自己module。

需要做的是实现WXModuleProtocol协议,并且写自己的方法就可以了,这里需要通过weex的宏把需要public的方法导出

WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:))

在module中目前是没有view的,但是你可以通过由js传过来的ref值拿到

    WXComponent *targetComponent = [self.weexInstance componentForRef:nodeRef];
    CALayer *layer = targetComponent.layer;
    UIView *view = targetComponent.view;

注意点

1.如果设置js文件在bundle中载入的话,需要把build的js文件拖入工程,如果的你的we里面一开始就调用了js文件,由于只会buildwe文件,所以还需要把之前的js文件拖入工程,另外examples里面判断iOSAssets是这样的

      var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;

你如果拖入自己的工程需要把WeexDemo.app的判断去掉