We'll use Weex to write a simple list, similar to what you'll often see in e-commerce mobile apps.
Start
Let's start by writing a list item.
Please create a tech_list.we file named ( .we with the extension recommended by Weex), copy and paste the above code into it.
Because the Weex toolchain is built with Node.js, you need to install Node.js (https://nodejs.org/en/download/stable/ ) before proceeding to the next steps. After Node.js is installed successfully, you can Execute the following command to install the Weex command line program Weex Toolkit (https://www.npmjs.com/package/weex-toolkit).
After the installation is complete, you can weex check that the tool is installed correctly by executing the command in the command line window. weexAfter just typing and hitting enter, you should see something like this displayed:
If everything is OK, please switch the working directory to the directory where you just saved tech_list.we and enter the following command on the command line:
The window of your system's default browser will automatically open to display the following:
Grammar concepts
Now let's understand some simple syntax concepts. As tech_list.weshown, Weex code consists of three parts: template (template), style (style) and script (script). These three concepts are to Weex what html, css, and javascript are to the Web.
The template section gives Weex the skeleton, consisting of tags and the content enclosed by the tags. The tags in Weex are divided into two types: open tags (eg: ) and closed tags (eg: ). We call each pair of open & closed tags a set of Weex tags. Attributes can be added to tags , and different attributes have different Meaning, for example, class属性the same style can be applied to multiple groups of Weex tags, and onclick attributes allow tags to respond to user click events.
The styles section describes how the Weex tags are displayed. Like you, we love CSS, so the styles in Weex are as consistent as possible with CSS standards. Weex supports many CSS features: margin, padding, fixed... Even better, the flexbox layout model is well supported in Weex.
The script section adds data and logic to Weex tags, where you can easily access local and remote data and update tags. You can also define methods and make those methods respond to different events. The way Weex scripts are organized basically follows the CommonJS module specification.
For more information about Weex syntax, you can check it out in the Syntax chapter (http://alibaba.github.io/weex/doc/syntax/main.html).
Add more list items
A single list item is not a "list", so let's add more list items. Open the tech_list.wefile just now and update it as follows:
Now, let's try to render this file using the Weex Native renderer. Open a terminal, switch to the directory where the file is saved, and execute
A QR code will appear in the terminal, similar to the following:
这个二维码需要配合 Weex Playground App（http://alibaba.github.io/weex/download.html ）工作。下载安装后点击App中的扫码图标，然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。
这里我需要强调，这个列表是完全由native view(不是Webkit)来进行渲染的，相比Webkit渲染的界面，你的App能获得更快的页面加载速度和更少的内存开销。
现在你能尝试变更一些 tech_list.we中的内容，在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化， 这个特性常被称为 Hot-Reload,希望能帮助你更方便的进行Weex开发。
添加内置组件
除了自己动手从最基础的标签开始编写, Weex还提供很多内置组件。Slider(滑动器)在移动App和页面中很常见，所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 tech_list.we，把里面的内容变更如下：
在终端中同一目录再次运行这个命令：
一个漂亮的滑动器将会添加到我们之前编写列表的顶部。
更多有关滑动器组件的信息请在 这里 （http://alibaba.github.io/weex/doc/components/slider.html ）查看。
就像我们之前演示过的，这个界面也能用"Native View"的方式在 Weex Playground App中被渲染。如果你想让你自己的App也获得这样的能力，请访问这份文档（http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html ）学习如何把Weex集成进入你自己的App中。