WEEX快速入门

WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台APP.

1. 搭建WEEX环境

1.1 首先下载安装Node.js,MAC版下载
1.2 安装 weex-toolkit(WEEX工具包)

终端执行

sudo npm install -g weex-toolkit

执行后需要输入你电脑的密码.

1.3 验证是否安装成功

终端执行

weex

显示

info 
Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex init

选项:
  --qr          display QR code for native runtime, default action     [boolean]
  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                  [默认值: "no JSBundle output"]
  --watch       using with -o , watch input path , auto run transform if change
                happen
  -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
                                                                        [string]
  --port        http listening port number ,default is 8081         [默认值: -1]
  --wsport      websocket listening port number ,default is 8082    [默认值: -1]
  --np          do not open preview browser automatic                  [boolean]
  -f, --force   [for create sub cmd]force to replace exsisting file(s) [boolean]
  --help        显示帮助信息                                           [boolean]
  -h, --host                                               [默认值: "127.0.0.1"]

for example & more information visit https://www.npmjs.com/package/weex-toolkit

表明安装成功.

2. 安装weex的编辑工具

如果使用Xcode编辑weex,没有格式也没有高亮和提示,我们需要使用一个编辑工具来快速的编写weex的代码.

2.1 去sublime Text官网下载安装sublineText3 然后双击安装.
2.2 下载 weex高亮脚本
2.3 添加高亮脚本 sublime Text 导航栏里选择Tools->Developer->New Syntax
Snip20160715_3.png
2.4 下载好的weex高亮脚本文件打开,把内容拷贝到新建的文件中,覆盖原有的内容. 然后cmd + s保存,把名称命名为Plain we.sublime-syntax,请注意文件名称必须命名为Plain we.sublime-syntax,否则没有高亮.
2.5 开启weex语法高亮
Snip20160715_4.png

3. 来一个简单的Demo玩玩.

3.1 制作一个简单的weex文件

我们来做一个列表,现在只包含一个Cell,cell内部只有一个图片,图片右边是一个文本.

<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: 8; margin-left: 8; flex-direction: row; }
  .thumb { width: 100; height: 100; }
  .title { text-align: center; flex: 1; color: grey; font-size: 25; }
</style>

把上面的文本拷贝到编译器中,cmd + s 保存你想保存的位置,命名为list.we,其中weweex文件的后缀.

3.2 预览

打开终端,cdlist.we 所在的目录,执行

weex list.we

weex 工具会启动服务器,把list.we转换为html5的页面,然后在浏览器中把它打开. 效果如图

Snip20160715_5.png

你可以改变上面的元素来查看不同的效果.

3.2 weex 语法简介

一个WEEX文件由三部分组成,分别为template,style,script;其中template是骨架,类似于HTML标签,style负责渲染,类似于css, script负责交互事件,类似于javascript

  • template 由标签组成,标签用于包裹内容.weex包含两种类型的标签,分别为开放标签闭合标签 开放标签由一对标签组成如<text>内容</text> 闭合标签,只有一个标签如 <image src="http://t.cn/RGE3AJt"/> 标签上可以有多个属性,不同的属性代表不同的含义.比如:class属性用于定义标签的样式. onclick 属性让标签响应点击事件.

  • Style 用于描述标签如何展示,语法与css类似,weex支持大部分css的特征,比如margin,padding,fixed等,更令人兴奋的是weex支持flexbox的布局.

  • Script 用于个标签设置数据和添加逻辑,让我们更加简单的绑定本地或远程的数据和更新标签. 我们可以定义函数来处理tag上的事件. Script 类似于通用的CommonJS的模型.

更多weex语法,参考Syntax chapter

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • weex ios 集成WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构...
    John_LS阅读 1,673评论 0 3
  • 我发现好多人竟然在不停地问weex的官方网址 https://weex.apache.org/cn/ 什么是wee...
    菜鸟程序员_阅读 3,124评论 0 0
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,476评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,315评论 1 34
  • 一、前言 上一篇文章:Weex系列(1)- Weex环境安装,了解了Weex的开发环境安装,接下来简单实现下Hel...
    chen飞鸿阅读 874评论 0 0