问渠那得清如许，为有源头活水来
作为一枚coder，一直在不断的挖坑填坑中徘徊。
今天我简单来总结下项目中用到的Weex框架。这个框架主要是用来解决跨平台开发中web在移动端的性能体验问题。具体他有什么好处，是怎么个原理，[官网](http://weex.apache.org/cn/guide/)上都有说到。我这里主要是说一下我踩过的坑。（不得不说的是官方文档写的是在是太“耐人寻味”）
-
集成
我理解的是文档是给了2种方式，都是依赖cocoaPods（感觉还有一种源码依赖，因为还要配置各种环境，所以有待待验证）
1.源码集成：直接将GitHub上下载的源码迁移到工程中，然后在Podfile中添加以下内容，最后pod install（亲测好使）
源码集成2.frameWork集成：跳过源码迁移的步骤，Podfile 添加完成以后，pod install（更为方便，个人倾向这中方式）
-
初始化Weex环境(*是必须初始化的,（3）（4）初始化会在下一篇文章中提到，在这里先不必进行（3）（4）的初始化)
如果只看文档，会发现他在APPdelegate的初始化方法里面写了好多东西。首先
*（1）business configuration（暂且叫他基础配置）[WXAppConfiguration setAppGroup:@"BZGJ"];//可以为空 [WXAppConfiguration setAppName:@"项目的名字"]]; [WXAppConfiguration setAppVersion:@"应用版本"];*（2）init sdk environment(初始化sdk环境)
[WXSDKEngine initSDKEnvironment];（3）register custom module and component，optional(注册自定义的组件，module...)
（4）register the implementation of protocol, optional（注册相关的协议...）
（5）set the log level（设置log的级别） 渲染（仅整理加载远程的js）
在开始渲染之前，我先简单说一下我踩过的坑。因为我是用方式二集成的所以我拿到只是一些头文件，看不到.m的实现，但是，weex本身就是一个开源的框架，我们可以来研究下weex里面其中的一个的类文件。
WXBaseViewController
就像是一个存放h5页面的容器，里面有渲染的方法，weex状态的监听等。
我们在自己的项目中一般不会直接用这个控制器，而是会自定义一个类似的控制器，这样的话方便我们控制很多东西，例如URL的格式，传递给js的值等等。。
下面切入主题：
我们需要创建一个存放h5页面的控制器（WeexBaseVC）
（1）声明2个变量
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
（2）实现渲染的方法及回调
- (void)render
{
[_instance destroyInstance];
_instance = [[WXSDKInstance alloc] init];
if([WXPrerenderManager isTaskExist:[self.url absoluteString]]){
_instance = [WXPrerenderManager instanceFromUrl:self.url.absoluteString];
}
_instance.viewController = self;
_instance.frame = CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.height);
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
};
_instance.onFailed = ^(NSError *error) {
//失败
};
_instance.renderFinish = ^(UIView *view) {
//渲染完成
WXLogDebug(@"%@", @"Render Finish...");
[weakSelf updateInstanceState:WeexInstanceAppear];
};
_instance.updateFinish = ^(UIView *view) {
//更新完成
WXLogDebug(@"%@", @"Update Finish...");
};
if (!self.url) {
WXLogError(@"error: render url is nil");
return;
}
if([WXPrerenderManager isTaskExist:[self.url absoluteString]]){
WX_MONITOR_INSTANCE_PERF_START(WXPTJSDownload, _instance);
WX_MONITOR_INSTANCE_PERF_END(WXPTJSDownload, _instance);
WX_MONITOR_INSTANCE_PERF_START(WXPTFirstScreenRender, _instance);
WX_MONITOR_INSTANCE_PERF_START(WXPTAllRender, _instance);
[WXPrerenderManager renderFromCache:[self.url absoluteString]];
return;
}
[_instance renderWithURL:[NSURL URLWithString:@"http://192.168.1.55:8080/dist/hoteldetail.js"] options:@{@"paramKey":@"paramValue"} data:nil];
}
Tip：
- (void)renderView:(NSString *)source options:(NSDictionary *)options data:(id)data;
options:The params passed by user.（需要传递给js使用的参数，例如id等）
data:The data the bundle needs when rendered. Defalut is nil.
（3）weexInstance状态更新，以触发weex的事件，和ViewController的声明周期一致
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
[self updateInstanceState:WeexInstanceAppear];
}
- (void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
[self updateInstanceState:WeexInstanceDisappear];
}
//触发相应的事件
- (void)updateInstanceState:(WXState)state{
if (_instance && _instance.state != state) {
_instance.state = state;
if (state == WeexInstanceAppear) {
[[WXSDKManager bridgeMgr] fireEvent:_instance.instanceId ref:WX_SDK_ROOT_REF type:@"viewappear" params:nil domChanges:nil];
}
else if (state == WeexInstanceDisappear) {
[[WXSDKManager bridgeMgr] fireEvent:_instance.instanceId ref:WX_SDK_ROOT_REF type:@"viewdisappear" params:nil domChanges:nil];
}
}
}
（4）销毁掉 weexInstance，释放内存，避免造成内存泄露
- (void)dealloc{
[self.instance destroyInstance];
}
到这一步，基本的页面已经出来了，但是如果js页面上有图片的话，你会发现OC页面上却没有图片，于是乎，则需要我们来实现图片的加载
<---------图片加载，JS与OC交互and others请往后翻--------->
