Weex iOS集成

背景

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