我们将使用weex编写一个简单的列表 , 类似的列表经常能在电商类移动应用中见到。
开始
我们先编写一个列表项。
请创建一个名为 <code>tech_list.we</code> 的文件( <code>.we</code> 是weex推荐的后缀名 ) ，请复制粘贴以上代码于其中。
在安装结束后，你能通过在命令行窗口执行 <code>weex</code> 命令来检查工具是否安装正确. 仅仅输入<code>weex</code>并敲击回车后，你应该看到如下内容显示：
如果一切正常, 请在命令行中切换工作目录到刚才存储 <code>tech_list.we</code> 所用目录并输入如下命令：
你系统默认浏览器的窗口将自动打开以显示如下内容：
现在我们来了解下一些简单的语法概念。 如 <code>tech_list.we</code>所示, weex代码由三部分构成: template (模板), style (样式) 和 script (脚本) 。这三个概念之于weex就如 html,css,javascript 之于web。
模板部分赋予weex以骨架, 由标签以及标签包围的内容构成。weex中的标签分为开放标签(eg: )和闭合标签(eg: )两种, 我们把每一对开放&闭合标签称为一组weex标签. 标签中能添加 属性 ，不同的 属性 有不同的含义,例如 <code>class属性</code>让同样的样式可以作用于多组weex标签， <code>onclick</code> 属性让标签能对用户点击事件作出回应。
样式部分描述weex标签如何显示。和你一样,我们喜欢css, 所以weex中的样式尽量和css标准一致。weex支持很多css中的特性： margin, padding, fixed...... 更好的是, flexbox布局模型在weex中有着很好的支持。
脚本部分为weex标签添加数据与逻辑 ，在这里你能方便的访问本地和远程的数据并更新标签。你还能定义方法并让这些方法响应不同的事件. weex脚本的组织方式基本遵循于commonjs module规范。
单独一个列表项称不上”列表” , 所以让我们来添加更多的列表项. 打开刚才的<code>tech_list.we</code>文件，更新其中的内容如下：
现在，让我们来尝试使用weex native渲染器来渲染这个文件。打开终端，切换到保存该文件的目录，执行
终端中将会出现一个二维码，类似如下这样：
这里我需要强调，这个列表是完全由native view(不是webkit)来进行渲染的，相比webkit渲染的界面，你的app能获得更快的页面加载速度和更少的内存开销。
现在你能尝试变更一些 <code>tech_list.we</code>中的内容，在保存变更内容之后, weex playground 将会立即在界面上反映出这些变化， 这个特性常被称为 hot-reload,希望能帮助你更方便的进行weex开发。
除了自己动手从最基础的标签开始编写, weex还提供很多内置组件。slider(滑动器)在移动app和页面中很常见，所以我们提供了一个内置的slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 <code>tech_list.we</code>，把里面的内容变更如下：
在终端中同一目录再次运行这个命令：
一个漂亮的滑动器将会添加到我们之前编写列表的顶部。