問(wèn)渠那得清如許搓谆，為有源頭活水來(lái)
作為一枚coder怪得，一直在不斷的挖坑填坑中徘徊夫偶。
今天我簡(jiǎn)單來(lái)總結(jié)下項(xiàng)目中用到的Weex框架湾碎。這個(gè)框架主要是用來(lái)解決跨平臺(tái)開發(fā)中web在移動(dòng)端的性能體驗(yàn)問(wèn)題厕宗。具體他有什么好處画舌，是怎么個(gè)原理，[官網(wǎng)](http://weex.apache.org/cn/guide/)上都有說(shuō)到已慢。我這里主要是說(shuō)一下我踩過(guò)的坑骗炉。（不得不說(shuō)的是官方文檔寫的是在是太“耐人尋味”）
-
集成
我理解的是文檔是給了2種方式，都是依賴cocoaPods（感覺(jué)還有一種源碼依賴蛇受，因?yàn)檫€要配置各種環(huán)境句葵，所以有待待驗(yàn)證）
1.源碼集成：直接將GitHub上下載的源碼遷移到工程中，然后在Podfile中添加以下內(nèi)容兢仰，最后pod install（親測(cè)好使）
源碼集成2.frameWork集成：跳過(guò)源碼遷移的步驟乍丈，Podfile 添加完成以后，pod install（更為方便把将，個(gè)人傾向這中方式）
-
初始化Weex環(huán)境(*是必須初始化的,（3）（4）初始化會(huì)在下一篇文章中提到轻专，在這里先不必進(jìn)行（3）（4）的初始化)
如果只看文檔，會(huì)發(fā)現(xiàn)他在APPdelegate的初始化方法里面寫了好多東西察蹲。首先
*（1）business configuration（暫且叫他基礎(chǔ)配置）[WXAppConfiguration setAppGroup:@"BZGJ"];//可以為空 [WXAppConfiguration setAppName:@"項(xiàng)目的名字"]]; [WXAppConfiguration setAppVersion:@"應(yīng)用版本"];*（2）init sdk environment(初始化sdk環(huán)境)
[WXSDKEngine initSDKEnvironment];（3）register custom module and component请垛，optional(注冊(cè)自定義的組件，module...)
（4）register the implementation of protocol, optional（注冊(cè)相關(guān)的協(xié)議...）
（5）set the log level（設(shè)置log的級(jí)別） 渲染（僅整理加載遠(yuǎn)程的js）
在開始渲染之前洽议，我先簡(jiǎn)單說(shuō)一下我踩過(guò)的坑宗收。因?yàn)槲沂怯梅绞蕉傻乃晕夷玫街皇且恍╊^文件，看不到.m的實(shí)現(xiàn)亚兄，但是混稽，weex本身就是一個(gè)開源的框架，我們可以來(lái)研究下weex里面其中的一個(gè)的類文件。
WXBaseViewController
就像是一個(gè)存放h5頁(yè)面的容器匈勋，里面有渲染的方法礼旅，weex狀態(tài)的監(jiān)聽等。
我們?cè)谧约旱捻?xiàng)目中一般不會(huì)直接用這個(gè)控制器洽洁，而是會(huì)自定義一個(gè)類似的控制器痘系，這樣的話方便我們控制很多東西，例如URL的格式饿自，傳遞給js的值等等汰翠。。
下面切入主題：
我們需要?jiǎng)?chuàng)建一個(gè)存放h5頁(yè)面的控制器（WeexBaseVC）
（1）聲明2個(gè)變量
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
（2）實(shí)現(xiàn)渲染的方法及回調(diào)
- (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使用的參數(shù)璃俗，例如id等）
data:The data the bundle needs when rendered. Defalut is nil.
（3）weexInstance狀態(tài)更新，以觸發(fā)weex的事件悉默，和ViewController的聲明周期一致
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
[self updateInstanceState:WeexInstanceAppear];
}
- (void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
[self updateInstanceState:WeexInstanceDisappear];
}
//觸發(fā)相應(yīng)的事件
- (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城豁，釋放內(nèi)存，避免造成內(nèi)存泄露
- (void)dealloc{
[self.instance destroyInstance];
}
到這一步抄课，基本的頁(yè)面已經(jīng)出來(lái)了唱星，但是如果js頁(yè)面上有圖片的話，你會(huì)發(fā)現(xiàn)OC頁(yè)面上卻沒(méi)有圖片跟磨，于是乎间聊，則需要我們來(lái)實(shí)現(xiàn)圖片的加載
<---------圖片加載，JS與OC交互and others請(qǐng)往后翻--------->
