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中。

[obetame]

@huaian 你要确认script标签里的第一行是否有require('weex-components');

[guyikun]

@animalWorld 为什么我这边还是不行？ ERR! ModuleBuildError: Module build failed: ReferenceError: Unknown plugin ...babel-plugin-transform-runtime" specified in "base" at 0 已经安装了上面依赖，同时weex init & npm install了

[wangGuangXu]

谁知道扫描后什么都没有，是白也没是怎么回事？

[amyliu1062]

安装weex的时候，提示connect ECONNREFUSED 106.187.101.167:25 没有开代理，重新安装node和npm也不行。

[coderyi]

@shbIOS 我用sublime ，文档 ，文章都太少了

[dayingwy]

我的电脑连的是有线网，然后用电脑开的wifi，然后用手机（ios）连的该wifi，因此是在同一网段中，但是用手机扫了之后没有刷出来，只是白色的页面，谁知道这是什么问题嘛，谢谢

[wangGuangXu]

你电脑和手机是一个网段吗？我有的时候也会出现扫出来是白色页面什么也没有的情况。

[liuchuhui]

npm run dev

ERROR in Cannot find module 'babel-core' @ ./src/main.we?entry=true 2:22-552

[coderyi]

@liuchuhui

npm install babel-core

[BorisDuan]

坑真大，看文档一天了还是没弄明白，weex是什么？怎么查看版本？怎么用？weex-toolkit干嘛用的？怎么用？代码怎么编写？文档呢？编辑器呢？乱七八糟的，东一榔头西一锄头的，能不能把文档整合的更好更明白一些？我想看专业的详细的明白的iOS集成文档和使用说明，不是要看代码，尽量不要老是回调好不好

[lanbosm]

感觉很好玩的样子 npm命令卡住的话 用cnpm 不过background 这个css样式都没 想吐槽下

[zxjcoder]

真的，入坑太难，而且写给开发者的，竟然没有个像样的文档，东一篇西一篇，很多方法也不清楚是什么意思

[lijunwyf21]

加了关闭的div后，反而跑不起来了，感觉是一个大bug

[lijunwyf21]

@Jinjiang

加了关闭的div后，反而跑不起来了，

[yingyangios]

我用iOS端扫面二维码，weexapp这crash

[swituo]

@lijunwyf21

我觉得div的关闭在template的关闭上面... 我估计原意是slider和container竖的排列. 我不太懂flex-direction, 但好像flex-direction的子元素只有1的话, 就会有问题.

[ronniegong]

安卓端安装playground后 扫描weex 命令生成的二维码 完全没反应（确定手机和电脑在同一网络环境下）

另外，wifi环境下，打开playground后，一直提示去升级 下载最新app后还是提示升级

怎么解决？

[judy98taylor]

根节点: 每个 template 标签中的最顶层标签，我们称为根节点。下面是目前我们支持的三种不同的根节点: < container >: 普通根节点 < scroller >: 滚动器根节点,适用于需要全页滚动的场景 < list >: 列表根节点,适用于其中包含重复的子元素的列表场景

为什么 示例代码没有用 < container >也可以呢？？和< div style="flex-direction: column;" >这个标签没有闭合 有关系吗？？？

[SuperHaiFeng]

已经集成SDK，但是有的时候能够渲染上，有的时候渲染不上，我使用的本地的js文件，渲染不上的时候出现以下错误信息：[fg255,0,0; [error]WXMonitor.m:190, [main.js:47:18] ReferenceError: Can't find variable: weex_define main.js:47:18 webpack_require@main.js:20:34 main.js:40:37 global code@main.js:41:12 [; 说明：是iOS端集成

[JiongXing]

请问Weex如何进行热更新呢？

[taohaha]

为什么把

[yundongbot]

@F-12 weex 目前不支持 v-bind 的方式，仅支持 {{}}

[yundongbot]

@lilijialiang list 在 weex 中做了非常多的优化，可参考新文档 http://alibaba.github.io/weex/cn/doc/components/list.html

[yundongbot]

@trainges wxc-tabbar 和 wxc-navpage 需要引入 weex-components 依赖。请参考新文档 http://alibaba.github.io/weex/cn/doc/components/wxc/wxc-tabbar.html

[yundongbot]

@duyuan199010 看下是否在同一局域网

[yundongbot]

@BruceVan1987 weex 编辑器插件在这里 https://github.com/alibaba/weex/wiki/Weex-Community

[yundongbot]

@JakeWoki 都行。个人推荐 VSCode

[yundongbot]

@wangGuangXu 装一下最新版的 Playground 试试。http://alibaba.github.io/weex/download.html

[yundongbot]

@dingyiming 试试这篇新的，https://alibaba.github.io/weex/cn/doc/get-started.html

[yundongbot]

@lawliet09 npm 在国内访问不稳定，可以使用 cnpm ，参考最新文档 https://alibaba.github.io/weex/cn/doc/develop-on-your-local-machine.html

[yundongbot]

@transtone 这都被你发现了，那你看看这篇评测一下 https://alibaba.github.io/weex/cn/doc/get-started.html

[yundongbot]

@weishiji 发送请求请使用 stream 模块，这是文档地址 https://alibaba.github.io/weex/cn/doc/modules/stream.html

[cuanhanshansi]

@archLeozyf 你说的生成二维码和不生成（即自动打开浏览器）的两个命令行是不能同时运行的，它指向的是同一个localhost，然后至于你用手机扫后报networkError有两种情况：1，手机，电脑处于同一网络下；2，网速有问题。估计第二种情况的可能比较大吧。希望参考。

[zhuruyi2013]

mac上 npm install -g weex-toolkit 下载不下来

npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "weex-toolkit" npm ERR! node v6.9.2 npm ERR! npm v3.10.9

npm ERR! shasum check failed for /tmp/npm-26796-7337915e/registry.npmjs.org/stream-http/-/stream-http-2.5.0.tgz npm ERR! Expected: 585eee513217ed98fe199817e7313b6f772a6802 npm ERR! Actual: 1fff5fbc7f1a97413402b06010c73bd0af454d18 npm ERR! From: https://registry.npmjs.org/stream-http/-/stream-http-2.5.0.tgz npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request: npm ERR! /Users/zhuruyi/learn/weex/firstDemo/npm-debug.log

[yundongbot]

@zhuruyi2013 网络问题，换淘宝源或者使用 cnpm。

[runfengai]

太给力了吧，说句实话，weex相对国内DCloud和APICloud，有很大的提升，因为是用的native view渲染，而不是系统的webkit内核，weex出来的初衷也是为了解决ReactNative使用过程中遇到的一些问题。weex是开源的，DCloud不开源让人很不爽，而且更新频率很慢。我想说，开源的框架才是最牛逼的。支持weex

[zhwei820]

大部分人估计都跟我一样，一上来想看完整的打包过程，其实慢慢从语法开始也是比较好的。下面是打包工具，其实打完包之后还是得回来学语法

https://www.npmjs.com/package/weex-pack

weexpack 介绍 weexpack 是 weex 新一代的工程开发套件。它允许开发者通过简单的命令，创建 weex 工程项目，将项目运行在不同的开发平台上。

[kind-hearted]

我用的cnpm的镜像，npm install --save-dev weex-toolkit，有个模块安装不了，error 404 no such package available : @f/defaults，这个是你们的私有包吗？要怎么才能搞过来！

[yundongbot]

@chinafootballyu 试试 npm install -g weex-toolkit

[kind-hearted]

@DoranYun 这个试过，也不行，应该是cnpm镜像上面没有这个包，我换回官方的地址可以了，谢谢了。

[charmingzuo]

“添加内置组件” 那部分的 <div> 没有关闭

[lingyijun]

按照本文的指引，安装 Weex Toolkit， 执行weex --version 失败，提示如下

module.js:471 throw err; ^

Error: Cannot find module 'koa-bodyparser' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/lib/DebugServer.js:9:18) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/index.js:14:19) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32)

[yundongbot]

@SophiaDUPON 你好，遇到报错到主仓库提 issue

[cristaltina]

@DoranYun 请问weex如何上传文件（如图片），类似 <input type="file"> 这样的功能？

[yundongbot]

@cristaltina 目前暂不支持文件上传。

[cristaltina]

@DoranYun 那那那短期内会增加这个功能嘛？想评估一下项目能不能用weex来做

[yundongbot]

@cristaltina 你可以到主仓库开 issue 发起讨论。

[MechaGirls]

weex难道不是阿里开发的，为啥没有中文文档。还需要翻译。

[vczero]

@2015-lizaiyang https://weex-project.io/cn/

[yundongbot]

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