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

本文主要介绍包括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的判断去掉

iOS上集成Weex

iOS上扩展组件

iOS上扩展module

注意点

coderyi