Weex快速上手教程(Weex Tutorial)

[lvscar]

本文档已迁移至 https://weex-project.io/cn/guide/ ， 此处不再维护，谢谢。

我们将使用Weex编写一个简单的列表，类似的列表经常能在电商类移动应用中见到。

开始

我们先编写一个列表项。

<template>
  <div class="container" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
       <text class="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {width: 200; height: 200; }
  .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  
</style>

请创建一个名为 tech_list.we 的文件( .we 是Weex推荐的后缀名 ) ，请复制粘贴以上代码于其中。

因为Weex工具链使用Node.js构建，在进行后续步骤前，你需要先安装 Node.js, 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 Weex Toolkit 。

npm install -g weex-toolkit

在安装结束后，你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后，你应该看到如下内容显示：

Usage: weex foo/bar/your_next_best_weex_script_file.we  [options]

Options:
  --qr     display QR code for native runtime, 
  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)
  -s,--server  start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option  
  ......
  --help  Show help                    

如果一切正常， 请在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令：

weex tech_list.we

你系统默认浏览器的窗口将自动打开以显示如下内容。
(请使用 weex --version 命令检查你的weex-toolkit版本是否大于 0.1.0）

语法概念

现在我们来了解下一些简单的语法概念。如 tech_list.we所示，Weex代码由三部分构成： template (模板)， style (样式)  和 script (脚本) 。这三个概念之于Weex就如 html，css，javascript 之于Web。

模板部分赋予Weex以骨架，由标签以及标签包围的内容构成。Weex中的标签分为开放标签(eg: )和闭合标签(eg: )两种，我们把每一对开放&闭合标签称为一组Weex标签。标签中能添加 属性 ，不同的 属性 有不同的含义，例如 class属性让同样的样式可以作用于多组Weex标签， onclick 属性让标签能对用户点击事件作出回应。

样式部分描述Weex标签如何显示。和你一样，我们喜欢CSS，所以Weex中的样式尽量和CSS标准一致。Weex支持很多CSS中的特性： margin, padding, fixed...... 更好的是， flexbox布局模型在Weex中有着很好的支持。

脚本部分为Weex标签添加数据与逻辑，在这里你能方便的访问本地和远程的数据并更新标签。你还能定义方法并让这些方法响应不同的事件。Weex脚本的组织方式基本遵循于CommonJS module规范。

关于Weex语法的更多信息，你能在 Syntax chapter 查看。

添加更多的列表项

单独一个列表项称不上”列表” ， 所以让我们来添加更多的列表项。打开刚才的tech_list.we文件，更新其中的内容如下：

<template>
  <div class="container">
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
</style>

现在，让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端，切换到保存该文件的目录，执行：

weex tech_list.we --qr

终端中将会出现一个二维码，类似如下这样：

这个二维码需要配合 Weex Playground App工作。下载安装后点击App中的扫码图标，然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。

这里我需要强调，这个列表是完全由native view(不是Webkit)来进行渲染的，相比Webkit渲染的界面，你的App能获得更快的页面加载速度和更少的内存开销。

现在你能尝试变更一些 tech_list.we中的内容，在保存变更内容之后， Weex Playground 将会立即在界面上反映出这些变化，这个特性常被称为 Hot-Reload ，希望能帮助你更方便的进行Weex开发。

添加内置组件

除了自己动手从最基础的标签开始编写，Weex还提供很多内置组件。Slider(滑动器)在移动App和页面中很常见，所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 tech_list.we，把里面的内容变更如下：

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>

  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }
  .slider {
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
</style>

<script>
module.exports = {
    data: {
      intervalValue:"1000",
      isShowIndicators:"true",
      isAutoPlay:"true",
      itemList: [
        {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},
        {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},
        {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}
      ]
    },
    methods: {
      goWeexSite: function () {
        this.$openURL('http://alibaba.github.io/weex/')
      }
    }
}
</script>

在终端中同一目录再次运行这个命令：

weex tech_list.we

一个漂亮的滑动器将会添加到我们之前编写列表的顶部。

更多有关滑动器组件的信息请在 这里 查看。

就像我们之前演示过的，这个界面也能用"Native View"的方式在 Weex Playground App中被渲染。如果你想让你自己的App也获得这样的能力，请访问这份文档学习如何把Weex集成进入你自己的App中。

[lijialiang]

安卓上编译出来的 list cell 是否通过复用（类似 iOS list cell）提高性能？

[Jinjiang]

@lilijialiang 是的，直接用 <list> 和 <cell> 就可以了 http://alibaba.github.io/weex/doc/components/list.html

[trainges]

你好!wxc-tabbar跟wxc-navpage两个标签一直显示不了,是怎么回事?用的是 Example的代码

[xiaobeibeinihao]

@trainges 你现在跑起代码了吗？

[duyuan199010]

用Weex Playground App 扫描生成的二维码，为什么一直在loading ？

[daochouwangu]

@duyuan199010 你看一下是不是weex的host是local，而你的手机和电脑不在同一个网络

[duyuan199010]

@daochouwangu 是我公司网络的问题，我在家里的网络环境没有这个问题，谢谢！

[lingyunzhu]

我遇到如下错误，是因为端口问题？有大神知道我怎么改么？ info Tue Jul 05 2016 14:32:16 GMT+0800 (中国标准时间)WebSocket is listening on port 8082 info Tue Jul 05 2016 14:32:16 GMT+0800 (中国标准时间)http is listening on port 8081 events.js:141 throw er; // Unhandled 'error' event ^

Error: listen EADDRINUSE 0.0.0.0:8082 at Object.exports._errnoException (util.js:874:11) at exports._exceptionWithHostPort (util.js:897:20) at Server._listen2 (net.js:1234:14) at listen (net.js:1270:10) at net.js:1379:9 at doNTCallback3 (node.js:452:9) at process._tickCallback (node.js:358:17)

[acton393]

hi @lingyunzhu 可以看下这个issue #21

[siqin]

我是从Weex Tutorial的中文版icon提示跳转过来的，那边是英文版本，我觉得开头的语法细节貌似有点问题：

Tutorial

We will make a simple but realistic list of tech that weex used, this form of list also work for a lot of e-commerce app/mobile site.

Getting Started

Let's start easy though, making a item of list.

所以过来看中文版的，不过也发现了一些细节问题，比如开头的中英文标点符号混用：

我们将使用Weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到.

开始

我们先编写一个列表项.

这里是句号，后面还有逗号和冒号：

使用Node.js构建，在进行后续步骤前，你需要先安装 Node.js, 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 Weex Toolkit 。

在安装结束后，你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确. 仅仅输入weex并敲击回车后，你应该看到如下内容显示:

以上这些应该不算吹毛求疵，而是优质文档应该具备的，尤其是有感于最近某度UX总监PPT上标点符号都用不太对。

从另一个方面来讲，优质的项目文档，也是在展示一部分项目质量，同时也给予开发者更多的信心。 Thanks.

[BruceVan1987]

不知是否有为AndroidStudio或者SublimeText开发we文件编辑器插件的计划？

[lvscar]

谢谢 @siqin 的指正，已经重新编辑替换本文中的英文标点。 如对代码有兴趣 ，也请 @siqin review下我们的代码，希望早日看到你的PR ;-)

[hugojing]

添加内置组件 slider 的代码：

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>

  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
        <text class="title">JavaScript</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE3uo9"></image>
        <text class="title">Java</text>
    </div>
    <div class="cell">
        <image class="thumb" src="http://t.cn/RGE31hq"></image>
        <text class="title">Objective C</text>
    </div>
  </div>
</template>

为什么 <div style="flex-direction: column;"> 没有闭合标签 </div> ？ 给加上闭合标签后，运行是一片空白；不加才可以成功运行。 这是为什么？

[JakeWoki]

用什么开发软件开发比较好？完全新手

[kenberkeley]

Sublime暂时只能用Vue Syntax Highlight这个package语法高亮。。。

[wangGuangXu]

现在，让我们来尝试使用Weex Native渲染器来渲染这个文件。打开 终端，切换到保存该文件的目录，执行：

请教一下这块这个终端指的是什么？

[wangGuangXu]

我什么我的苹果手机装的那个iosAPP的扫码功能识别不了我电脑生成的二维码这是怎么回事？

[hugojing]

@wangGuangXu 终端就是 terminal ，命令行输入界面。

[arch-leo]

@hugojing 这个打开终端意思什么呢？我的操作是 第一次： 在cmd命令 中执行过 weex _.we后（未关闭this cmd），再重新打开cmd命令 执行weex .we --qr， 结果，报错，不能生成二维码； 第二次： 在cmd命令 中执行过 weex *.we后（关闭this cmd），再重新打开cmd命令 执行weex *_.we --qr， 结果，能生成二维码，但是weex olayground app扫描后，出现NetworkError，并且不能出现页面。。。。这是怎么回事 ？求解

[robbieliu2003]

我的mac 8081端口被占用，根据issue #21杀不掉占用的进程，是否有办法配置成其他的端口号？

PORT STATE SERVICE 8081/tcp open blackice-icecap

[dingyiming]

总觉着这个快速上手一点也不快，反而凌乱，无从下手有点，想说很多，却都没说完整啥，好像欠缺一定的做个入门示例的思路，抱歉。。。

[hugojing]

@archLeozyf 你下个 git bash 吧

[lawliet09]

npm install -g weex-toolkit安装的时候命令行一直在loading状态，也不显示任何任何信息，有大神知道怎么回事吗

[hugojing]

@lawliet09 网络不好。

[yxlwfds]

国内写的文档居然用英文 我也是醉了

[transtone]

这个不叫 weex 上手教程，这个叫 weex-toolkit 上手教程。

[winnerliu]

@archLeozyf 遇到一样的问题 解决了木有

[wangzhen-cn]

1、自定义端口，指定IP weex *.we --qr --port 9000 -h 192.168.1.100

2、下载Weex Playground http://alibaba.github.io/weex/download.html

3、扫码没反应，请关闭电脑防火墙，保证手机和电脑在同一局域网下，关闭路由上的arp，ip欺诈等。

[quirkyshop]

slider的教程，白屏并提示：

dep.js:48Uncaught RangeError: Maximum call stack size exceeded

英文和中文的文档都是这样。而且

确实没有闭合标签。

[RockyQu]

目前有we的编辑器吗？

[weishiji]

我问一个狠LOW的问题，在.we文件里，从哪里写发送请求，获取数据，更新UI的代码呢？给一个DEMO

[hugojing]

@weishiji 可以看我的 demo： https://github.com/hugojing/toolbox-weex ，其中 src/translate.we 里面有写网络请求－获取数据－放到界面上的代码。

[clfa]

app无法下载！

[lzxb]

正在入坑

[liuguangli]

就直接说 Android 开发环境怎么整合 Weex

[shbIOS]

入坑好辛苦，到处找文档，东一篇，西一篇，大伙有什么好用的开发工具么，有人用 Sublime ？

[RockyQu]

文档零散，没有形成整体，对于入坑同学有很多阻碍，虽然有专门的聊天室，还不如把官方文档好好写写，参考参考类似百度的开发文档

[huaian]

在android playground里面打不开新网页： this.$openURL 有问题

[weixinjie]

保存变更之后，界面没有自动刷新，手动刷新之后页面才会变化，求指导

[yushilong]

我只想说我看了半天还是不知道Android怎么用

[mjjde]

运行引导界面的代码是报错 怎么解 ModuleBuildError: Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to undefined ERR! ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to undefined

[obetame]

@mjjde 你需要安装这些依赖:

"babel-core": "6.3.13",
"babel-eslint": "4.1.6",
"babel-plugin-transform-async-to-generator": "6.3.13",
"babel-plugin-transform-class-properties": "6.3.13",
"babel-plugin-transform-runtime": "6.3.13",
"babel-preset-es2015": "^6.14.0"

注意安装之前你要确定你当前目录有package.json文件.

[justnewbee]

@hugojing 在末尾闭合 好像一个 template 下不能有超过一个节点 文档有两处需要改了：1. slider 代码闭合 2. slider 不能运行除非安装了 @zhouyuexie 说的依赖 文档中应该有说明

[animalWorld]

@zhouyuexie 我安装了这些依赖还是不行 去npm 官网搜索transform-runtime 也搜索不到

[GuoxUnique]

@mjjde 我也遇到了同样的问题，就是没有安装依赖。 不过我在安装依赖的时候提示no such file or directory, open '/Users/usr/package.json'，这个应该如何解决呢

[mjjde]

@GuoxUnique 我安装了babel-plugin-transform-runtime 就可以了 npm install babel-plugin-transform-runtime

[animalWorld]

ModuleBuildError: Module build failed: ReferenceError: Unknown plugin "transform-runtime" 这个错误，不能 npm install -g babel-plugin-transform-runtime 这样安装

建议先weex init 或者weex create

然后npm install

然后在项目中测试toolkit的案例， 这样就没问题了

[GuoxUnique]

@animalWorld 解决了，感谢

[animalWorld]

@GuoxUnique 客气

[xu17]

为什么我安装了之后 按照例子运行 weex tech_list.we 打开的网页看到的并不是上图 而是之前写在文档上的代码？？？要哭了