{"action":"created","issue":{"url":"https://api.github.com/repos/weexteam/article/issues/4","repository_url":"https://api.github.com/repos/weexteam/article","labels_url":"https://api.github.com/repos/weexteam/article/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/weexteam/article/issues/4/comments","events_url":"https://api.github.com/repos/weexteam/article/issues/4/events","html_url":"https://github.com/weexteam/article/issues/4","id":159821896,"number":4,"title":"Weex快速上手教程(Weex Tutorial)","user":{"login":"lvscar","id":1578838,"avatar_url":"https://avatars.githubusercontent.com/u/1578838?v=3","gravatar_id":"","url":"https://api.github.com/users/lvscar","html_url":"https://github.com/lvscar","followers_url":"https://api.github.com/users/lvscar/followers","following_url":"https://api.github.com/users/lvscar/following{/other_user}","gists_url":"https://api.github.com/users/lvscar/gists{/gist_id}","starred_url":"https://api.github.com/users/lvscar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lvscar/subscriptions","organizations_url":"https://api.github.com/users/lvscar/orgs","repos_url":"https://api.github.com/users/lvscar/repos","events_url":"https://api.github.com/users/lvscar/events{/privacy}","received_events_url":"https://api.github.com/users/lvscar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":88,"created_at":"2016-06-12T11:03:32Z","updated_at":"2016-12-27T05:23:38Z","closed_at":null,"body":"我们将使用Weex编写一个简单的列表，类似的列表经常能在电商类移动应用中见到。\n## 开始\n\n我们先编写一个列表项。\n\n``` html\n<template>\n  <div class=\"container\" >\n    <div class=\"cell\">\n       <image class=\"thumb\" src=\"http://t.cn/RGE3AJt\"></image>  \n       <text class=\"title\">JavaScript</text>\n    </div>\n  </div>\n</template>\n\n<style>\n  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }\n  .thumb {width: 200; height: 200; }\n  .title {text-align: center ; flex: 1; color: grey; font-size: 50; }  \n</style>\n```\n\n请创建一个名为 `tech_list.we` 的文件( `.we` 是Weex推荐的后缀名 ) ，请复制粘贴以上代码于其中。\n\n因为Weex工具链使用Node.js构建，在进行后续步骤前，你需要先安装 [Node.js](https://nodejs.org/en/download/stable/), 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 [Weex Toolkit](https://www.npmjs.com/package/weex-toolkit) 。\n\n```\nnpm install -g weex-toolkit\n```\n\n在安装结束后，你能通过在命令行窗口执行 `weex` 命令来检查工具是否安装正确。仅仅输入`weex`并敲击回车后，你应该看到如下内容显示：\n\n```\nUsage: weex foo/bar/your_next_best_weex_script_file.we  [options]\n\nOptions:\n  --qr     display QR code for native runtime, \n  -o,--output  transform weex we file to JS Bundle, output path (single JS bundle file or dir)\n  -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  \n  ......\n  --help  Show help                    \n```\n\n如果一切正常， 请在命令行中切换工作目录到刚才存储 `tech_list.we` 所用目录并输入如下命令：\n\n```\nweex tech_list.we\n```\n\n你系统默认浏览器的窗口将自动打开以显示如下内容。  \n(请使用 `weex --version` 命令检查你的weex-toolkit版本是否大于 0.1.0）\n\n![weex html5 render](http://gtms02.alicdn.com/tps/i2/TB1y151LVXXXXXXaXXXoRYgWVXX-495-584.jpg)\n## 语法概念\n\n现在我们来了解下一些简单的语法概念。如 `tech_list.we`所示，Weex代码由三部分构成： _template_ (模板)， _style_ (样式)  和 _script_ (脚本) 。这三个概念之于Weex就如 html，css，javascript 之于Web。\n\n模板部分赋予Weex以骨架，由标签以及标签包围的内容构成。Weex中的标签分为开放标签(eg: <weex>)和闭合标签(eg: </weex>)两种，我们把每一对开放&闭合标签称为一组Weex标签。标签中能添加 _属性_ ，不同的 _属性_ 有不同的含义，例如 `class属性`让同样的样式可以作用于多组Weex标签， `onclick` 属性让标签能对用户点击事件作出回应。\n\n样式部分描述Weex标签如何显示。和你一样，我们喜欢CSS，所以Weex中的样式尽量和CSS标准一致。Weex支持很多CSS中的特性： margin, padding, fixed...... 更好的是， flexbox布局模型在Weex中有着很好的支持。\n\n脚本部分为Weex标签添加数据与逻辑，在这里你能方便的访问本地和远程的数据并更新标签。你还能定义方法并让这些方法响应不同的事件。Weex脚本的组织方式基本遵循于CommonJS module规范。\n\n关于Weex语法的更多信息，你能在  [Syntax chapter](http://alibaba.github.io/weex/doc/syntax/main.html) 查看。\n## 添加更多的列表项\n\n单独一个列表项称不上”列表” ， 所以让我们来添加更多的列表项。打开刚才的`tech_list.we`文件，更新其中的内容如下：\n\n``` html\n<template>\n  <div class=\"container\">\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE3AJt\"></image>\n        <text class=\"title\">JavaScript</text>\n    </div>\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE3uo9\"></image>\n        <text class=\"title\">Java</text>\n    </div>\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE31hq\"></image>\n        <text class=\"title\">Objective C</text>\n    </div>\n  </div>\n</template>\n\n<style>\n  .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }\n  .thumb { width: 200; height: 200; }\n  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }\n</style>\n```\n\n现在，让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端，切换到保存该文件的目录，执行：\n\n```\nweex tech_list.we --qr\n\n```\n\n终端中将会出现一个二维码，类似如下这样：\n\n![Weex CLI](http://alibaba.github.io/weex/doc/images/tut-cli-qrcode.png)\n\n这个二维码需要配合 [Weex Playground App](http://alibaba.github.io/weex/download.html)工作。下载安装后点击App中的扫码图标，然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。\n\n![Second Example](http://alibaba.github.io/weex/doc/images/tut-second.png)\n\n这里我需要强调，这个列表是完全由native view(不是Webkit)来进行渲染的，相比Webkit渲染的界面，你的App能获得更快的页面加载速度和更少的内存开销。\n\n现在你能尝试变更一些 `tech_list.we`中的内容，在保存变更内容之后， Weex Playground 将会立即在界面上反映出这些变化，这个特性常被称为 **Hot-Reload** ，希望能帮助你更方便的进行Weex开发。\n## 添加内置组件\n\n除了自己动手从最基础的标签开始编写，Weex还提供很多内置组件。Slider(滑动器)在移动App和页面中很常见，所以我们提供了一个内置的Slider组件让你能在自己的界面里轻松的添加一个滑动器。打开 `tech_list.we`，把里面的内容变更如下：\n\n``` html\n<template>\n  <div style=\"flex-direction: column;\">\n    <slider class=\"slider\" interval=\"{{intervalValue}}\" auto-play=\"{{isAutoPlay}}\" >\n      <div class=\"slider-pages\" repeat=\"{{itemList}}\" onclick=\"goWeexSite\" >\n        <image class=\"thumb\" src=\"{{pictureUrl}}\"></image>\n        <text class=\"title\">{{title}}</text>\n      </div>\n    </slider>\n\n  <div class=\"container\" onclick=\"goWeexSite\" >\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE3AJt\"></image>\n        <text class=\"title\">JavaScript</text>\n    </div>\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE3uo9\"></image>\n        <text class=\"title\">Java</text>\n    </div>\n    <div class=\"cell\">\n        <image class=\"thumb\" src=\"http://t.cn/RGE31hq\"></image>\n        <text class=\"title\">Objective C</text>\n    </div>\n  </div>\n</template>\n\n<style>\n  .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }\n  .thumb { width: 200; height: 200; }\n  .title { text-align: center ; flex: 1; color: grey; font-size: 50; }\n  .slider {\n    margin: 18;\n    width: 714;\n    height: 230;\n  }\n  .slider-pages {\n    flex-direction: row;\n    width: 714;\n    height: 200;\n  }\n</style>\n\n<script>\nmodule.exports = {\n    data: {\n      intervalValue:\"1000\",\n      isShowIndicators:\"true\",\n      isAutoPlay:\"true\",\n      itemList: [\n        {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'},\n        {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'},\n        {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'}\n      ]\n    },\n    methods: {\n      goWeexSite: function () {\n        this.$openURL('http://alibaba.github.io/weex/')\n      }\n    }\n}\n</script>\n```\n\n在终端中同一目录再次运行这个命令：\n\n```\nweex tech_list.we\n```\n\n一个漂亮的滑动器将会添加到我们之前编写列表的顶部。\n\n![Third Example](http://alibaba.github.io/weex/doc/images/tut4.gif)\n\n更多有关滑动器组件的信息请在 [这里](http://alibaba.github.io/weex/doc/components/slider.html) 查看。\n\n就像我们之前演示过的，这个界面也能用\"Native View\"的方式在 Weex Playground App中被渲染。如果你想让你自己的App也获得这样的能力，请访问[这份文档](http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html)学习如何把Weex集成进入你自己的App中。\n"},"comment":{"url":"https://api.github.com/repos/weexteam/article/issues/comments/269271654","html_url":"https://github.com/weexteam/article/issues/4#issuecomment-269271654","issue_url":"https://api.github.com/repos/weexteam/article/issues/4","id":269271654,"user":{"login":"DoranYun","id":16359169,"avatar_url":"https://avatars.githubusercontent.com/u/16359169?v=3","gravatar_id":"","url":"https://api.github.com/users/DoranYun","html_url":"https://github.com/DoranYun","followers_url":"https://api.github.com/users/DoranYun/followers","following_url":"https://api.github.com/users/DoranYun/following{/other_user}","gists_url":"https://api.github.com/users/DoranYun/gists{/gist_id}","starred_url":"https://api.github.com/users/DoranYun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DoranYun/subscriptions","organizations_url":"https://api.github.com/users/DoranYun/orgs","repos_url":"https://api.github.com/users/DoranYun/repos","events_url":"https://api.github.com/users/DoranYun/events{/privacy}","received_events_url":"https://api.github.com/users/DoranYun/received_events","type":"User","site_admin":false},"created_at":"2016-12-27T05:23:38Z","updated_at":"2016-12-27T05:23:38Z","body":"@chinafootballyu 试试 `npm install -g weex-toolkit` \r\n"}}
{"actor":{"display_login":"DoranYun"}}