WEEX开发环境搭建

WEEX开发环境搭建

概述

本文的主要目的是介绍weex开发环境的搭建。环境基于Windows.如果是Mac或Linux方法有一些不同，本文不在介绍。具体参考weex快速上手.

weex开发环境搭建

1.安装Node.js环境. Weex项目的部署需要用到Node.js的npm（Node.js的包管理工具package manager）

查看是否安装成功

注意：在Windows上安装时务必选择全部组件，包括勾选Add to Path.

2.安装weex-toolkit.
方式一: 对于npm访问正常的可以直接使用npm安装。
方式二:对于国内访问npm比较慢的用户可以使用淘宝的cnpm进行安装。
方式一：

npm install -g weex-toolkit

方式二：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit

查看安装版本

此时我们已经完成了环境的搭建。

Weex升级

weex升级后，生成js bundle的方法不一样。随着weex的版本更新，强烈建议升级到最新版本。如果你的weex版本小于1.2可以参考第二部分的教程。

Weex版本更新

有两种方法，建议使用方法一
方法一：覆盖安装。直接重新安装weex，这样会覆盖安装，得到的就是最新的版本。

cnpm install -g weex-toolkit

Weex覆盖安装

方法二：更新安装

weex update weex-devtool@latest //@后标注版本后，latest表示最新。

但是我用这种方法没有安装成功。使用方法一成功了。

最后，输入 “weex -v”，查看是否安装成功。

weex升级提示

当weex组件有新版本的时候，在我们创建项目时会有提醒。

出现此提示，说明weexpack需要升级
按照提示的指令升级到最新的weex，这里我们执行

weex update weexpack@1.0.13

Weex运行

新版本执行（weex 版本为v1.2.7）

1.创建工程
使用weex create 命令

weex create learn-weex-fifth

新版本的的weex会默认执行 npm install，如果你执行默认操作，就可以继续执行了，否则需要切换到工作目录cd xxxx，安装项目依赖npm install.
2.打包JSBundle，并运行
运行npm start 会编译生成JSBundle, 并运行server，并默认运行web preview. JSBundle生成目录，当前dist目录下。

执行npm start

说明：
如上图：server 的H5访问通过：http://10.0.0.32:8081/web/preview.html?page=index.js
jsBundle 目录在当前dist目录下。通过客户端weex playGround访问http://10.0.0.32:8081/dist/index.js 就可以看到weex效果了。（可通过扫码的方式）

playgrond默认效果图

老版本执行（weex版本为v1.1.0, 建议升级使用新版本）

1.创建工程
weex create oneproject
2.安装项目依赖
切换进工程目录，执行npm install命令。

cd oneproject
npm install

3.打包JSBundle,并运行

weex src\index.vue

编译打包JSBundle,命令执行后会自动执行weex server，可以看到运行效果了

说明：
如上图：server 的H5访问通过：http://10.0.0.44:8081/?hot-reload_controller&page=index.js&loader=xhr&wsport=8082&type=vue
jsBundle 目录在上图红框标注的“.weex_tmp”目录。其中，index.weex.js文件就是生成的移动端js可解析文件。
通过客户端weex playGround访问http://10.0.0.44:8081/index.weex.js 就可以看到weex效果了。（可通过扫码的方式）