WEEX快速入门

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

一、搭建WEEX环境

参考官方教程，我们需要先安装Node。在Mac上也可以通过Homebrew直接进行安装：brew install node。

接着我们需要安装Weex CLI：sudo npm install -g weex-toolkit，并确保版本号大于0.1.0：

$ weex --version
info 0.3.4

验证是否安装成功
终端执行

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

二、 安装weex的编辑工具

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

1、 去sublime Text官网下载安装sublineText3 然后双击安装.
2、下载 weex高亮脚本
3、 添加高亮脚本 sublime Text 导航栏里选择Tools->Developer->New Syntax

321489-43d99a2259256f03.png

4、下载好的weex高亮脚本文件打开,把内容拷贝到新建的文件中,覆盖原有的内容. 然后cmd + s保存,把名称命名为Plain we.sublime-syntax,请注意文件名称必须命名Plain we.sublime-syntax,否则没有高亮.
5、开启weex语法高亮

321489-235f57f4394dc969.png

三、制作一个简单的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,其中we是weex文件的后缀.

预览
打开终端,cd到list.we所在的目录,执行
weex list.we

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

321489-498909239d153a0e.png

备注：初始化程序

初始化工程前需要先安装 homebrew，然后按照下面步骤创建一个工程。

$ brew install node             //通过brew安装node
$ npm install -g weex-toolkit   //通过node安装 weex-toolkit  
$ sudo gem install cocoapods    //安装iOS包管理工具 cocoapods
$ weex init                     //创建项目的文件
$ npm install                   //依赖安装 package.json文件
$ npm run dev                   //项目编译
$ npm run serve                 //启动轻量服务器      

这时有可能提示

npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.

你需要再

npm install babel-core

这时，打开浏览器，输入http://127.0.0.1:8080, 就会看到这个项目的效果.

参考Weex学习与实践(一):Weex,你需要知道的事

四、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 官网