WEEX快速入门

作者: 满山李子 | 来源:发表于2016-07-15 21:05 被阅读7894次

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

相关文章

  • 笔记

    【入门】WEEX快速创建工程 Hello World - willspace - SegmentFault ht...

  • WEEX快速入门

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

  • WEEX快速入门

    weex ios 集成WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构...

  • weex快速入门

    我发现好多人竟然在不停地问weex的官方网址 https://weex.apache.org/cn/ 什么是wee...

  • 关于weex的环境搭建过程

    参考:weex官网weex环境搭建WEEX快速入门 关于初始化的命令网上一搜就有一大堆,这里摆出来不再赘述 1.安...

  • weex快速入门资料

    Ui布局介绍 1.最基础的UI控件:http://weex.apache.org/cn/references/co...

  • Weex入门踩坑记录

    Weex入门踩坑记录

  • Weex项目构建流程

    Weex-Toolkit Weex-Toolkit 主要用于快速构建 weex 的项目并且开发和调试。 Weex...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

网友评论

  • Bryan_iOS:你好,请问下,我都装好了,用 subline Text 编写好 list.we 之后,执行weex list.we不会弹出网页会是什么原因吗?
    一个人zy:weex preview xx.we
  • 昵称经已被占用:为什么我出来的是vue Component
    满山李子:@GG歪歪 WEEX更新很快,我这个是最早期,可能现在已经不适用了
  • 逗哥笔记:请教一下,最后那个启动了weex list.we,'weex 工具会启动服务器' , 怎么在终端中指令退出运行了?都不知道怎么退出,每次都只有手动把终端关掉。 :cold_sweat:
    ad6bb2c32f9d:@禤小轩 按CTRL+c
  • 满山李子:这个标签是有提示的,但是js代码就没有提示. js代码提示实现起来比较困难,大部分的开发工具对js都没有提示的
  • EmptyWalker:哥 我想知道有语法提示的插件吗? 光光靠高亮 代码还是要手动每个输入,这个对于习惯Xcode的人来说 超级不习惯
  • 满山李子:@lin_xiaohuan 报什么错误, node.js版本是什么,系统版本是是什么
    lin_xiaohuan:@满山李子 解决了,我改用Homebrew来安装的
    满山李子:@lin_xiaohuan 这个是没有权限的错误,命令前面加 `sudo` , 使用这个命名试试 sudo npm install -g weex-toolkit
  • lin_xiaohuan:没成功 npm install -g weex-toolkit

本文标题:WEEX快速入门

本文链接:https://www.haomeiwen.com/subject/fegsjttx.html