面试被问Weex ，初步了解Weex，你看我就够了。

前言

去年iOS职位面试，大多数面试官通常都挖这么一个坑，比如会问你，怎么看待 React Native ，会不会 Note.js 跨平台开发，知道 Weex 吗？ 我相信多数没有准备过的面试者都折戟沉沙，或许这些技术，面试官也未曾亲自用过，那为什么面试官还要去问呢？ 一方面：通过这个可以评估你个人的学习新知识的能力和对待新技术的态度。另外一方面： 也是最重要的，压你工资。 反过来，我们作为求职者，了解或者进一步掌握这些技术还是很有必要的。小编写这篇博客的目的，就是为了让一些初学者再面试的时候，不再因为 Weex 而困扰。

---

Weex是什么？

Weex 是阿里开源的一套构建跨平台的移动框架，可以类比 React Native，Weex 能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。
对于移动开发者来说，Weex 主要解决了频繁发版和多端研发两大痛点，同时解决了前端语言性能差和显示效果受限的问题。开发者可通过 Weex 官网申请内测。
开发者只需要在自己的APP中嵌入 Weex 的SDK，就可以通过撰写HTML/CSS/JavaScript来开发Native级别的 Weex 界面。Weex 界面的生成码其实就是一段很小的JS，可以像发布网页一样轻松部署在服务端，然后在APP中请求执行。

---

如何使用Weex？

---

第0步: 安装Node.js

如果你之前安装过Homebrew，可直接通过 Homebrew 安装 Note.js 。Homebrew安装参考我 这篇博客

$ brew install node

或者去 Note.js 官网下载安装，选择 Mac 平台

下载完成后，打开pkg安装包，按照 步骤 一路点击 继续!

一直到最后一步

安装 Note.js 的同时会帮助我们安装好npm。 初步安装的同学可以使用:

$ node -v
v6.9.4

$ npm -v
3.10.10

node -v 和 npm -v 命令来测试 Note.js 环境是否搭建成功。

---

第1步: 安装weex-toolkit

这里使用npm来完成。因为npm之前已经安装好了。所以，直接拿来使用即可。

$ npm install -g weex-toolkit

安装过程如下：

如果你会发现很慢，可以考虑使用cnpm来安装了。首先，我们全局安装cnpm：

$ npm install -g cnpm

cnpm是一个国内淘宝npm镜像，可以提高下载速度。我们使用cnpm：

$ cnpm install -g weex-toolkit

安装过程中可能会提示权限错误问题，如下图

这时候加上sudo关键字即可：

$ sudo npm install -g weex-toolkit

然后输入你本机电脑密码即可，等待weex-toolkit安装完成后，输入:

$ weex –version
info 1.0.1-alpha

此刻说明，我们安装weex-toolkit成功。

---

第2步: 创建.we文件

Weex 程序的文件后缀（扩展名）是.we。因此我们创建一个.we的文件,可以使用touch命令创建文件.

$ touch hello.we

我们打开空白的hello.we文件，输入三个标签，内容为：

<template>
  <div>
    <text>Hello world</text>
  </div>
</template>
<style></style>
<script></script>

我们可以通过下图对比查看 Weex 是如何兼容Web开发的，以及支持的 标签样式

这种标签 对于Web前端的同学来说，再简单不过了，但对于iOS开发的前端小白来说，有一定的学习成本。后续，我们会做这方面的专题博客，这里我们假设hello.we 就是Web开发同事编写好的一个比较复杂完成的业务代码文件。

其实，这个时候，我们的程序基本上完成了，就是这么简单粗暴。但是这段代码是不能直接跑的。我们都知道.html是可以直接运行的，这个程序呢，缺少了html的载体。

---

第3步: weex-toolkit 编译代码

缺少html的载体，怎么办？使用weex-toolkit 下的 weex命令来编译我们的代码。这里，使用 Weex 命令编译hello.we文件

$ weex hello.we

这时，会发现浏览器被打开了，浏览器地址是：

http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr

OK，我们会看到浏览器显示了：Hello world 字样，以上就是使用 Weex 开发 Web页面的原理。



.html文件载体在哪？

我们既然运行了程序，那么一定有一个.html作为程序入口。其实，weex-toolkit给我们生成了相关文件。我们可以到hello.we同级目录下查找，就会发现有一个weex_tmp文件。该文件夹就是生成的可以执行的浏览器代码。

---

第4步:搭建iOS环境配置，生成js文件

如果你需要将 Weex 开发的Web页面加载到iOS客户端，需要搭建 Weex 在iOS环境配置，生成js文件。

iOS环境搭建中我们使用Cocoapods环境，执行一下命令：

$ vim Podfile

在Podfile文件中加上pod ‘WeexSDK’、pod ‘SocketRocket’ 如下：

编写完Podfile文件执行

$ pod install

导入成功后，将WeexSDK框架中的main.js拖到工程文件夹里面，操作过程如下图所示：

---

将刚刚的 hello.we 文件转化为 iOS端的 js文件 执行如下命令行

$ weex hello.we -o hello.js

把生成的js文件 拉到我们的项目目录下

我们来看一个 iOS客户端接入 Weex 的demo，我们以一个页面的部分区域使用 Weex 为例，在AppDelegate.m文件中做如下配置：

#import "AppDelegate.h"
#import <WeexSDK/WeexSDK.h>

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     // 参数初始化
    [WXAppConfiguration setAppGroup:@"AliApp"];         // 项目组织名称
    [WXAppConfiguration setAppName:@"ZYY_WeexStudy"];   // 项目名称
    [WXAppConfiguration setAppVersion:@"1.0.0"];        // 项目版本
    [WXSDKEngine initSDKEnviroment];                    // 初始化SDK环境
    [WXLog setLogLevel: WXLogLevelAll];                 // 输出日志
    return YES;
}

在.m文件中导入WXSDKInstance.h文件，并添加相关属性，如下图所示：

#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>

@interface ViewController ()

@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@property (nonatomic, strong) NSURL *jsUrl;

@end

在ViewController.m文件中

- (void)viewDidLoad {
    [super viewDidLoad];

    // 添加一个原生按钮
    self.view.backgroundColor = [UIColor whiteColor];
    UIButton *testButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 64, 200, 100)];
    [self.view addSubview:testButton];
    [testButton setTitle:@"原生模块" forState:UIControlStateNormal];
    [testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

    if (!self.jsUrl) {
        return;
    }
    [self render];
}

- (void)render {

    CGFloat width = self.view.frame.size.width;
    self.instance = [[WXSDKInstance alloc] init];
    self.instance.viewController = self;
    self.instance.frame = CGRectMake(self.view.frame.size.width-width, 200, width,     self.view.frame.size.height);
    __weak typeof(self) weakSelf = self;
    self.instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        weakSelf.weexView.backgroundColor = [UIColor purpleColor];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    self.instance.onFailed = ^(NSError *error) {
        NSLog(@"加载失败");
    };
    self.instance.renderFinish = ^(UIView *view) {
        NSLog(@"加载成功");
    };

    //[self.instance renderWithURL:self.jsUrl options:@{@"bundleUrl":[self.jsUrl absoluteString]} data:nil];
    [self.instance renderWithURL:self.jsUrl];
}

// dealloc 里调用一下 destroyInstanc 来销毁 weex 实例，不然会内存溢出。
- (void)dealloc {
    [_instance destroyInstance];  
}

- (NSURL *)jsUrl {
    if (!_jsUrl) {
        _jsUrl =  [[NSBundle mainBundle] URLForResource:@"hello" withExtension:@"js"];
        // 这里 加载我们放在本地的 js文件，也可以是网络获取的js。
    }
    return _jsUrl;
}

OK！！！然后运行项目，就成功了！ 效果如下:

从上述的逻辑来看，应该可以推敲出， Weex 渲染结果显然需要一个UIView来承接，最后再将这个UIView覆盖到系统的view，所以理论上，你可以生成多个 Weex 的instance，来拼凑页面，只需要设置好frame即可。

到此， Weex 可以将你用Web技术写好的页面，同时呈现在iOS客户端对应的View中。不过，一个应用如果都是纯展示，那么到此就结束了，但往往不是。也许，你还需要各种各样Native的能力，也许Native也需要各种各样JS的能力， Weex 为我们提供了多少种方式来协调，我们下篇博客再介绍。

初步了解以上这些，当面试官在问到 Weex 的时候，我相信大伙都心里有底了。更多 Weex 的知识，后续将持续更新，请关注我的博客。

更多iOS技术交流
请加群： 553633494