背景

Weex是什么？提出這個(gè)問題之前我們先看看weex不是什么，根據(jù)文章： 對無線電商動(dòng)態(tài)化方案的思考（三） · Issue #15 · amfe/article · GitHub中的聲明是這樣的：

rwqrew.png

集成

環(huán)境搭建

• NodeJs

因?yàn)閃eex工具鏈?zhǔn)褂肗ode.js構(gòu)建献雅，在進(jìn)行后續(xù)步驟前管挟，你需要先安裝 Node.js。

第一步：下載安裝文件 今艺。下載地址：官網(wǎng)
這里用的是6.9.2版本窑多。

第二步：安裝。直接雙擊node-v6.9.2.pkg安裝包一路next安裝即可洼滚。

• weex-toolkit

安裝weex-toolkit，這一步花了好長時(shí)間技潘，網(wǎng)上好多用命令：sudo npm install -g weed-toolkit 但是我用了這個(gè)等了好長時(shí)間也不成功遥巴，翻墻也不行千康，后來上網(wǎng)搜用cnpm安裝成功了，cnpm是一個(gè)國內(nèi)npm鏡像铲掐，可以提高下載速度拾弃。
首先用命令安裝cnpm ：npm install -g cnpm，安裝成功后命令端輸入：sudo cnpm install -g weex-toolkit 這次很快摆霉，輸入weex --version查看版本豪椿。
注意：如果報(bào)沒有管理員權(quán)限的錯(cuò)誤時(shí)先執(zhí)行：sudo chown -R $USER /usr/local 再依次執(zhí)行上面兩句命令。

項(xiàng)目初始化

• 添加依賴

這里新建了一個(gè)項(xiàng)目命名為WeexDemo携栋，命令行cd到項(xiàng)目根目錄 執(zhí)行 vim Podfile搭盾，會(huì)創(chuàng)建一個(gè)pod配置文件，編輯加上pod 'WeexSDK', :path=>'./sdk/'
如圖所示：

Podfile.png

sdk.png

weex.png

weex目錄.png

• 加載weex頁面配置

Xcode打開workspace項(xiàng)目文件略就，打開AppDelegate.m添加內(nèi)容如下圖所示：

AppDelegate配置.png

將之前weex目錄下創(chuàng)建的js文件夾拖到Xcode工程的文件列表中，不要勾選copy item if needed 且選擇create folder references選項(xiàng)晃酒，如圖：

引入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]) {
          //遠(yuǎn)程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實(shí)例初始化
      self.wxInstance.viewController = self;          //添加到控制器上
      self.wxInstance.frame = self.view.frame;        //設(shè)置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進(jìn)行頁面渲染
      self.view.backgroundColor = [UIColor whiteColor];
  }

  - (void)dealloc {
      [self.wxInstance destroyInstance];
  }

最后表牢，把添加了weex的控制器設(shè)成根控制器，并指定需要加載的js文件

  self.window.rootViewController = [[ViewController alloc] initWithJs:@"animation.js"];

運(yùn)行：

運(yùn)行.png