weex 全套环境搭建（配图文）

简介

Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。

“Weex” 的发音是 /wiːks/, 和 “Weeks” 同音。

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用JavaScript 语言和前端开发经验来开发移动应用。

官网：https://weex.apache.org/zh/

下载

请先安装node和webpack，再下载weex-toolkit。通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit，而 weex 依赖 webpack 。

npm i -g weex-toolkit #安装 weex-toolkit
weex -v		#查看weex工具版本

创建项目

1. 在命令行中初始化项目：

   weex create awesome-project
   

   其中 awesome-project 是创建项目的文件夹名称。
   
   之后会询问你输入相关的基本信息，例如Project name，Project description 一些基本信息，你按照你的需求填写就可以了。

2. 进入项目：
   你会看见如下图所示的项目目录结构：
   

3. 安装 package.json 文件中的相关依赖：

   打开该文件夹下的命令行，输入：

   npm i
   

   

4. 添加 Android 的平台项目

   weex platform add android
   

5. 启动项目：
   继续输入如下的指令：

   npm start
   

   会弹出一个网页出来，这里是模拟手机端的一个界面，如果修改了代码，我们可以所见即所得。

   

   注意：浏览器必须是Chrome，其他浏览器不支持

   并且命令行中会变成如下界面，注意不要关闭，要一直打开，因为weex会监听整个项目，如果你的项目修改了，他会重新打包。即进行热更新
   

安装手机模拟器

因为我的电脑不是 Mac 所以只能对Android 进行演示，这里也只使用 Android Stdio 进行演示。

下载 Android Stdio

官网：http://www.android-studio.org/

安装 Android Stdio

下载完成后，打开这个文件
一般情况都选择Next，就安装好了

安装完成之后会弹出以下界面：

下载 SDK

这个过程比较漫长，需要耐心的等待（毕竟是国外的服务器）

配置 Android 的环境变量

1. 先在用户变量中添加一个环境变量
   
   你的地址可能和我的不一样，可以在这里找到
   

2. 然后配置系统变量
   
   

我们要添加两个地址：

• 其中一个地址：刚刚我们添加的用户变量地址 + \platforms-tools

  

• 另一个地址：刚刚我们添加的用户变量地址 + \tools
  

点击确定就配置好了：

开启 Android 虚拟机

进入到我们刚才创建的项目：

然后进入到 platforms目录下，选择 android

稍等一下，第一次构建项目非常的慢，如果你的网速差，会等很久。

构建项目完成后它会问你 Gradle 是否升级到 5.X.X 版本，千万不要升级，我们的项目是 4.6 的，如果升级会报错的.

点击启动：

它会叫我们配置机型，其实主要是选择屏幕的尺寸

我是选择这个机型的

选择最新的系统的版本，这里我已经下载好了，如果没有下载就等着下载完成吧，这个过程很慢，需要等待。

接下来就没什么好说的了。

选择我们刚刚创建的虚拟设配，点击ok行了。

当看到这个说明你的手机已经配置成功了

更新 Android 虚拟机

weex 没有更改前端的代码，就可以热更新的看到虚拟机的内容的功能。你可以考虑weexplus，这个有这方面的热更新

weex 的更新比较麻烦需要将更目录下的dist 目录下的 index.js 的内容拷贝到，如下图所示：

保存之后，在点击启动，选择我们正在运行的设备就行了

你就可以看到网页上的效果了

打包构建 Android APP

等一会，右下角会有一个浮框，点击这个浮框，里面就是你的app了