-
Notifications
You must be signed in to change notification settings - Fork 141
Weex快速上手教程(Weex Tutorial) #4
Description
本文档已迁移至 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中。
Activity
[-]Weex快速上手指南[/-][+]Weex快速上手教程(Weex Tutorial)[/+]lijialiang commentedon Jun 14, 2016
安卓上编译出来的 list cell 是否通过复用(类似 iOS list cell)提高性能?
Jinjiang commentedon Jun 15, 2016
@lilijialiang 是的,直接用
<list>
和<cell>
就可以了 http://alibaba.github.io/weex/doc/components/list.htmltrainges commentedon Jun 17, 2016
你好!wxc-tabbar跟wxc-navpage两个标签一直显示不了,是怎么回事?用的是 Example的代码
xiaobeibeinihao commentedon Jun 24, 2016
@trainges 你现在跑起代码了吗?
duyuan199010 commentedon Jun 30, 2016
用Weex Playground App 扫描生成的二维码,为什么一直在loading ?
daochouwangu commentedon Jul 1, 2016
@duyuan199010 你看一下是不是weex的host是local,而你的手机和电脑不在同一个网络
duyuan199010 commentedon Jul 2, 2016
@daochouwangu 是我公司网络的问题,我在家里的网络环境没有这个问题,谢谢!
lingyunzhu commentedon Jul 5, 2016
我遇到如下错误,是因为端口问题?有大神知道我怎么改么?
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 commentedon Jul 5, 2016
hi @lingyunzhu 可以看下这个issue #21
siqin commentedon Jul 5, 2016
我是从Weex Tutorial的中文版icon提示跳转过来的,那边是英文版本,我觉得开头的语法细节貌似有点问题:
所以过来看中文版的,不过也发现了一些细节问题,比如开头的中英文标点符号混用:
这里是句号,后面还有逗号和冒号:
以上这些应该不算吹毛求疵,而是优质文档应该具备的,尤其是有感于最近某度UX总监PPT上标点符号都用不太对。
从另一个方面来讲,优质的项目文档,也是在展示一部分项目质量,同时也给予开发者更多的信心。
Thanks.
BruceVan1987 commentedon Jul 5, 2016
不知是否有为AndroidStudio或者SublimeText开发we文件编辑器插件的计划?
lvscar commentedon Jul 6, 2016
谢谢 @siqin 的指正,已经重新编辑替换本文中的英文标点。 如对代码有兴趣 ,也请 @siqin review下我们的代码,希望早日看到你的PR ;-)
hugojing commentedon Jul 7, 2016
添加内置组件 slider 的代码:
为什么
<div style="flex-direction: column;">
没有闭合标签</div>
?给加上闭合标签后,运行是一片空白;不加才可以成功运行。
这是为什么?
78 remaining items
kind-hearted commentedon Dec 27, 2016
@DoranYun 这个试过,也不行,应该是cnpm镜像上面没有这个包,我换回官方的地址可以了,谢谢了。
charmingzuo commentedon Jan 2, 2017
“添加内置组件” 那部分的
<div>
没有关闭lingyijun commentedon Jan 3, 2017
按照本文的指引,安装 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)
snoozybot commentedon Jan 3, 2017
@SophiaDUPON 你好,遇到报错到主仓库提 issue
molly-shan commentedon Jan 16, 2017
@DoranYun 请问weex如何上传文件(如图片),类似
<input type="file">
这样的功能?snoozybot commentedon Jan 16, 2017
@cristaltina 目前暂不支持文件上传。
molly-shan commentedon Jan 16, 2017
@DoranYun 那那那短期内会增加这个功能嘛?想评估一下项目能不能用weex来做
snoozybot commentedon Jan 16, 2017
@cristaltina 你可以到主仓库开 issue 发起讨论。
MechaGirls commentedon Jan 19, 2017
weex难道不是阿里开发的,为啥没有中文文档。还需要翻译。
vczero commentedon Jan 19, 2017
@2015-lizaiyang https://weex-project.io/cn/
snoozybot commentedon Jan 20, 2017
本文档已迁移至 https://weex-project.io/cn/guide/ , 此处不再维护,谢谢。
liCat commentedon Mar 23, 2017
文档已迁至http://weex.apache.org/cn/
cqs223 commentedon Apr 10, 2017
weex-toolkit安装后,执行weex -v命令可查看weex的版本号.但是执行weex的时候报错,错误如下:
chenqsdeMacBook-Pro:~ chenqs$ weex
/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/package/NpmPackage.js:50
throw new Error('resolve path error:'+this.path)
^
Error: resolve path error:/usr/local/lib/node_modules/weex-toolkit/node_modules/._weex-previewer
at NpmPackage.resolve (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/package/NpmPackage.js:50:23)
at Command.run (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/Command.js:43:13)
at XToolkit._done (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/xtoolkit.js:149:36)
at process.nextTick (/usr/local/lib/node_modules/weex-toolkit/node_modules/._xtoolkit@0.2.7@xtoolkit/src/xtoolkit.js:90:22)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:423:7)
at startup (bootstrap_node.js:147:9)
at bootstrap_node.js:538:3
请问该怎么解决?
chenxiaozhen0104 commentedon Jul 6, 2018
请问 拨打电话 功能模块有吗