weex开发环境搭建

weex简介

A framework for building Mobile cross-platform UI (一款轻量级的移动端跨平台动态性技术解决方案)
通过 Html 搭建组件结构，flexbox 负责界面布局， Js 控制数据和逻辑
相比 RN，Weex 真正做到了 write once run anywhere
RN 可以认为是一个全新的跨平台移动开发框架，比较重，适合一个完整应用的开发；而 Weex 是为了增强移动端动态性而生的轻量级框架，具有极强的可扩展性，能够比较容易的融入成熟的Native项目中。

1.node.js下载和环境变量配置

网站：https://nodejs.org/en/download/，然后安装。

配置环境参数：NODE_HOME:%toolkit_home%\nodejs

NODE_PATH:%node_home%\node_modules

输入:node -v 可以验证是否安装成功！

2.安装 Weex Toolkit

安装命令：

npm install -g weex-toolkit

看到这个界面了表示安装成功（我第一次安装报错了，重试后安装成功）

输入：weex来进行验证，看到如下界面说明确实安装成功了，否则显示weex不是内部命令！

3.运行demo

3.1新建文件夹及文件

新建文件夹tech1及文件tech_list.we，注意.we是weex开发的文件后缀。

然后复制内容到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>

3.2初始化

cd到刚刚新建的文件夹下面，然后执行：

weex tech_list.we

看到下面这个界面，表示demo已经运行起来了！然后会打开浏览器，看到demo界面。

4.weex源文件说明

weex源文件由三部分组成：template, style, andscript, 就像Web由html,css, javascript构成一样。

Template 就像weex的骨架一样，由标签包裹内容，包括两类标签：开放性标签和关闭式标签。

5.手机端运行

5.1下载weex自带的playground app http://alibaba.github.io/weex/download.html

5.2 运行npm run dev这个命令

成功后发现dist目录和main.js文件生成然后我们可以根据readme提示开一个http服务来支持js bundle文件

5.3运行npm run serve命令，获取网络信息

假设你的电脑的ip是192.168.1.100;我们改一下地址 http://192.168.1.100:8080/dist/main.js，然后用二维码生成工具生成二维码，

再用playground app右上的扫一扫便能访问到该页面的内容了。

有问题请访问官网：http://alibaba.github.io/weex/doc/tutorial.html

和中文网https://github.com/weexteam/article/wiki/Weex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3