Weex入门与进阶指南

原文地址：https://yq.aliyun.com/articles/57554

前言

相比较于React Native的“Learn once, write anywhere”，Weex的口号是“Write once, run everywhere”。考虑到React Native比较任性的向下兼容性，我们也引入了Weex做一番了解。

本文主要分为以下几个部分：

1. 构建Hello World程序；
2. 集成到现有的iOS工程中；
3. 使用Weex的高级特性；
4. 如何为Weex做贡献；

一、Weex入门

1.1 Hello Weex

参考官方教程，我们需要先安装Node。在Mac上也可以通过Homebrew直接进行安装：brew install node。

接着我们需要安装Weex CLI：npm install -g weex-toolkit，并确保版本号大于0.1.0：

$ weex --version
info 0.3.4

至此，准备工作已经到位，我们可以开始编写Weex程序了。
创建一个名为helloweex.we的文件，并编写以下代码：

<template>
  <div>
    <text>Hello Weex</text>
  </div>
</template>

通过命令行在helloweex.we文件所在的目录下执行如下命令：

$ weex helloweex.we 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)WebSocket  is listening on port 8082 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)http  is listening on port 8081 

此时，浏览器会打开一个新的标签页展示helloweex.we的执行效果：

注意到此时地址栏的内容http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloweex.js&loader=xhr包含着hot reload字样，所以可以自然联想到当我们在源文件做修改并保存后，该页面会自动刷新展示效果。

1.2 基础结构

上面的示例只是一个非常简单的雏形，而一个比较完整的Weex程序包括三个部分：模板（Template）、样式（Style）和脚本（Script）。

比如我们可以利用上文提到的hot reload，修改文本的颜色并实时查看效果：

<template>
  <div>
    <text class="title">Hello Weex</text>
  </div>
</template>

<style>
  .title { color: red; }
</style>

接着我们添加上第三组成部分：脚本（Script）：

<template>
  <div>
    <text class=