背景
Weex是什么？提出这个问题之前我们先看看weex不是什么，根据文章： 对无线电商动态化方案的思考（三） · Issue #15 · amfe/article · GitHub中的声明是这样的：
rwqrew.png
而根据第二篇文章开头声明的定位我们了解到：Weex 是一款轻量级的移动端跨平台动态性技术解决方案。
相信到这里可以大概了解了Weex其实一个整套的技术解决方案，并不是一个新的框架或者库，它是一些技术的整合。
集成
环境搭建
-
NodeJs
因为Weex工具链使用Node.js构建，在进行后续步骤前，你需要先安装 Node.js。
第一步：下载安装文件 。下载地址：官网
这里用的是6.9.2版本。
第二步：安装。直接双击node-v6.9.2.pkg安装包一路next安装即可。
-
weex-toolkit
安装weex-toolkit，这一步花了好长时间，网上好多用命令：sudo npm install -g weed-toolkit 但是我用了这个等了好长时间也不成功，翻墙也不行，后来上网搜用cnpm安装成功了，cnpm是一个国内npm镜像，可以提高下载速度。
首先用命令安装cnpm ：npm install -g cnpm，安装成功后命令端输入：sudo cnpm install -g weex-toolkit 这次很快，输入weex --version查看版本。
注意：如果报没有管理员权限的错误时先执行：sudo chown -R $USER /usr/local 再依次执行上面两句命令。
项目初始化
-
添加依赖
这里新建了一个项目命名为WeexDemo，命令行cd到项目根目录 执行 vim Podfile，会创建一个pod配置文件，编辑加上pod 'WeexSDK', :path=>'./sdk/'
如图所示：
Podfile.png
保存并退出。然后下载最新的weexSDK https://github.com/alibaba/weex
在下载下来解压后的的weex-dev文件夹的ios目录下有个sdk文件夹，把它复制到iOS项目根目录，和Podfile里配置的路径一致。如图所示：
sdk.png
关掉Xcode，在当前目录，命令行执行pod install
命令执行完毕后在项目的根目录里创建一个新目录weex，命令行cd到weex目录，执行weex init，会提示你输入项目名称，输入完项目名称后，按回车执行，如图所示：
weex.png
这时候weex目录下会自动创建一系列文件：
weex目录.png
继续在这个目录下执行npm install，安装依赖库，然后再创建一个文件夹js，在weex目录下命令行执行weex src -o js生成最终需要的js文件，可以weex src/main.we在浏览器预览，或者weex src/main.we --qr 生成二维码，用playground App 扫描预览。
-
加载weex页面配置
Xcode打开workspace项目文件，打开AppDelegate.m添加内容如下图所示：
AppDelegate配置.png
将之前weex目录下创建的js文件夹拖到Xcode工程的文件列表中，不要勾选copy item if needed 且选择create folder references选项，如图：
引入js文件.png
完后效果是这样的：
引入js文件后效果.png
-
weex视图控制器的初始化
ViewController.h:
@interface ViewController : UIViewController
- (instancetype)initWithJs:(NSString *)jsPath;
@end
ViewController.m:
@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *wxInstance;
@property (nonatomic, strong) UIView *wxView;
@property (nonatomic, strong) NSURL *jsUrl;
@end
@implementation ViewController
- (instancetype)initWithJs:(NSString *)jsPath {
if (self = [super init]) {
//远程js文件
//NSString *path=[NSString stringWithFormat:@"http://192.168.232.13:8080/examples/js/%@",filePath];
//此处加载的是本地js文件
NSString *path = [NSString stringWithFormat:@"file://%@/js/%@",[NSBundle mainBundle].bundlePath,jsPath];
self.jsUrl = [NSURL URLWithString:path];//生成URL
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.wxInstance = [[WXSDKInstance alloc] init]; //weex实例初始化
self.wxInstance.viewController = self; //添加到控制器上
self.wxInstance.frame = self.view.frame; //设置frame
__weak typeof(self) weakSelf = self;
self.wxInstance.onCreate = ^(UIView *view) {
[weakSelf.wxView removeFromSuperview];
weakSelf.wxView = view;
[weakSelf.view addSubview:weakSelf.wxView];//添加wxView
};
self.wxInstance.onFailed = ^(NSError *error) {
NSLog(@"加载失败");
};
self.wxInstance.renderFinish = ^(UIView *view) {
NSLog(@"加载成功");
};
if (!self.jsUrl) {
return;
}
[self.wxInstance renderWithURL:self.jsUrl]; //加载URL进行页面渲染
self.view.backgroundColor = [UIColor whiteColor];
}
- (void)dealloc {
[self.wxInstance destroyInstance];
}
最后，把添加了weex的控制器设成根控制器，并指定需要加载的js文件
self.window.rootViewController = [[ViewController alloc] initWithJs:@"animation.js"];
运行：
运行.png
网友评论