Weex入门


1.开发环境安装

(1)安装Node 下载地址戳这里

(2)安装Weex Toolkit

检测npm版本

$ npm --version

如果低于 2.15.1就执行(如果npm的instasll指定提示err,就在前面加上sudo,下面也类似)

$ npm install -g npm

安装node-gyp

先检测版本

$ node-gyp --version

如果在你的系统中的版本低于3.4.0,或者提示未安装,执行如下:

$ npm install -g node-gyp

安装Weex Toolkit

$ npm install -g weex-toolkit

(3)执行$ 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         
  -h, --host [default: "127.0.0.1"]

2 hello world

创建目录,在目录中创建文件 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>
</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 tech_list.we

然后你会在浏览器看到如下内容。

s



本作品由 Tony Zhang 创作,采用 CC BY-NC-SA 3.0 许可协议 进行许可。

Comments