零：写在前面
最近我司要求将现有app部分界面使用动态模板装配，并且可以实时更新。并且展示的页面要流畅，性能和原生像媲美。所以我们首先考虑的就是具有热更新的机制的部分技术，像RN或WEEX，还有页面的形式。
但是因为前端技术团队在某些领域有过使用Vue.js的经验，并且RN的学习成本相对来说较高，H5所写页面的性能和原生差距较大，数据缓存、webview渲染性能等方面的种种问题。所以最终决定使用Weex来进行开发。
本系列包括但不限于Weex环境搭建、集成到已有项目（iOS+Android）、热更新机制、Weex和RN的性能评测、Weex与native的交互流程及原理、问题处理（踩坑）、打包上架等。
如有不对的地方，还望斧正。
一：环境搭建
以下搭建过程来源WEEX官网。做了简单的提炼和总结。以及一些坑点。
如果只想去试试看的话，这里有个在线的编辑器可以使用，可以用这个尝试一下。
1.1 安装homebrew + Node.js
这一部分可移步First：React native搭建记录。安装和配置是完全一样的。
1.2 官方weex-toolkit脚手架的安装
在终端执行npm install -g weex-toolkit。
/*******这里留个坑，等以后来填。*******/
安装好后这里有个奇怪的地方：
官网说weex1.0.8之后新增了npm5规范的版本依赖，我安装结束之后，在中端输入weex告诉我：
It looks like you're using npm 5 which was recently released.
Weex Toolkit doesn't work well with npm 5 yet, unfortunately.
We recommend using npm 4 until some bugs are resolved.
To install npm 4, you can just run `npm i npm@4 -g` or use `n` to manage your npm version with node.
大致意思就是说，weex-toolkit在5的支持上并不怎么好。强烈建议我使用npm4。那么问题来了，
我到底用npm4还是5，总感觉是不是官网文档没有更新。有点奇怪。
/*******这里留个坑，等以后来填。*******/
二：创建项目
- 1.打开终端，cd到你要创建项目的目录
- 2.执行weex create HelloWorld
- 3.执行完成后会有一个简单的设置过程
? Project name （这里填你的项目名称，不要有大写，会出粗）
? Project description （项目描述）
? Author （作者）
? Select weex web render（这里我选择的最新，你也可以选择很多人用的那个）
? Babel compiler （babel版本，选择建议的就好）
? Use vue-router to manage your view router? (not recommended)（选择建议的就好）
? Use ESLint to lint your code? （代码检查器，这个YES）
? Pick an ESLint preset Airbnb（代码的检查规则，用airbnb的或者标准模式）
? Set up unit tests Yes（是否设置单元测试）
? Should we run `npm install` for you after the project has been created? (recom
mended) （用npm还是yarn，还是看自己）
/*****这些设置结束后需要一个漫长的等待过程，可以去喝杯茶*****/
- 4.执行npm install
- 5.npm run dev & npm run serve
- 6.enjoy coding
二：集成Weex到现有应用（以空应用作为demo）
2.1 集成
默认开发环境有pod
- 1.创建个应用
- 2.在根目录创建Podfile，并在其中复制：pod 'WeexSDK','0.18.0'。这个版本号。。要自己去查一下。最好是用最新的，要不然会出问题。完成之后pod install即可。
2.2 运行（iPhone 真机）
- 1.找个js文件，放入项目根目录。
- 2.在delegate中导入头文件#import <WeexSDK/WeexSDK.h>,初始化weexsdk
- 3.集成相关代码
在delegate.m的didFinishLaunchingWithOptions中复制一下代码：
[WXAppConfiguration setAppGroup:@"XXX"];
[WXAppConfiguration setAppName:@"xxx"];
[WXAppConfiguration setAppVersion:@"xxx"];
//init sdk environment
[WXSDKEngine initSDKEnvironment];
[WXLog setLogLevel: WXLogLevelError];
//上面xxx的位置自己修改即可
- 4.在viewcontroller中，引入头文件#import <WeexSDK/WeexSDK.h>，并在viewdidload中引入以下代码。
- (void)initWeexView{
_instance = [[WXSDKInstance alloc]init];
_instance.viewController = self;
_instance.frame = self.view.bounds;
__weak typeof(self) weakSelf = self;
_instance.onCreate = ^(UIView *view) {
[weakSelf.weexView removeFromSuperview];
weakSelf.weexView = view;
[weakSelf.view addSubview:weakSelf.weexView];
};
_instance.onFailed = ^(NSError *error) {
//process failure
};
_instance.renderFinish = ^ (UIView *view) {
//process renderFinish
};
;
// NSLog(@"mainBundlePath = %@",);
//
// NSString *path = [NSString stringWithFormat:@"file://%@/dist/%@",[NSBundle mainBundle].bundlePath,@"index.js"];
[_instance renderWithURL:[[NSBundle mainBundle]URLForResource:@"index" withExtension:@"js"]];
}
- 5.运行即可。
三：坑点
3.1 版本不对应。
主要问题就是weex官网的版本和github的版本不对应，刚开始我用的0.9的版本，发现怎么跑跑不起来。最后去官网下载了demo，在demo中搜索WX_SDK_VERSION 看到weexsdk都更新到0.18.0了。发现之后，更新版本，开开心心运行程序。
3.2 加载不出来数据
数据是从接口拿的，需要配置一下info.plist的ATS。复制以下代码到info.plist即可
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
四 感受
具体还没开始使用，只是搭建环境和运行真机，譬如hot reload、webpack、weex-loader等等都还没有开始搞。主要有一下几点想说。
缺点：
- 1.官方文档的更新不及时，而且比较草率。对于新接触weex的程序员不友好。无法很快上手。
- 2.网络上的资料太少，过于陈旧，找一找全都是2016年7月份 - 2017年的技术帖。
- 3.看到weex支持vue.js和Rax框架，但是貌似只发现了Vue.js的支持，没有发现Rax的支持。
- 4.社区太不活跃，出了问题都不知道去问谁。这大大提高了weex学习的成本。
优点：暂时没有使用，无法评判。
真害怕，某天weex又像Ali的其他开源项目一样烂尾。但还是希望Ali团队的愿景可以得以实现。
