前言

• 本文参考官网文档Weex。
• 本文参考技术胖的《WEEX免费视频教程-从入门到放肆》 。

一、环境配置

第一步

• 下载和安装Node.js，并对其进行环境配置，如下图所示：
  

  

• 安装完成后，在命令行工具中检测是否安装成功，如下图所示：

//node检测
node -v

//npm检测
npm -v

第二步

• 全局安装weex-toolkit，使用如下命令：

npm install weex-toolkit -g

• 这条命令会向你命令行环境中注册一个weex命令。

• 遇到的问题：

  
  

• 解决方案：

  • 图中提到这个问题跟npm无关，是网络连接的问题，所以，重新输入如下命令即可：

npm install weex-toolkit -g

• 遇到的问题：

  
  

• 解决方案：

  • 使用如下命令：

weex -v

检测weex-toolkit是否安装成功，只弹出版本号，说明安装成功了。但是如图中所示，有这样的一句话：

npm 5 is not supported yet !

说明现在的npm版本和weex-toolkit不兼容。根据图中提示可知，只需将npm版本从5降为4即可，输入如下命令：

npm i npm@4 -g

待运行完毕，再使用如下命令进行检测：

weex -v

如下图所示，说明安装成功。

二、快速创建Weex项目

第一步

使用如下命令来创建一个空的模板项目：

weex create

比如要创建一个命名为WanAndroid-Weex的项目，因为使用如下命令会报错：

weex create WanAndroid-Weex

如下图所示：

如上图所示，新建项目的命名不能包含大写字母，所以，需要新建一个命名为WanAndroid-Weex的文件夹，并在该文件夹中，右键鼠标，选择“在此处打开命令窗口”，并输入如下命名：

weex create wanandroid-weex

按下回车键即可。

第二步

• 使用如下命令，进入刚刚创建的wanandroid-weex文件夹：

cd wanandroid-weex

然后使用如下命令安装依赖：

npm install

然后执行如下命令：

npm start

然后，工具会启动一个本地的web服务，监听8081端口，打开http://localhost:8081查看页面在Web下的渲染效果，源代码src/目录中，可以像一个普通的Vue.js项目一样来开发。

• 如果输入的是http://localhost:8081/web/preview.html，则是如下图的渲染效果。
  

三、使用Visual Studio Code打开Weex项目

第一步

使用Visual Studio Code工具来打开wanandroid-weex项目，选择VS菜单栏的“文件”选项，点击“选择文件夹”，选择wanandroid-weex项目文件夹即可。

第二步

• 选择VS菜单栏的“查看”选项，选择“继承终端”，即可在VS下方，出现一个命令窗口，如下图所示：

  
  

此时，输入如下命令：

npm start

运行，并在Web下出现渲染效果。
此时，VS里面的命令窗口如下图所示：

此时，无论如何操作，命令窗口都不会有反应，这是因为VS和Google浏览器连接的原因，只需按下Ctrl + C，立即会出现如下的操作命令：

此时，只需输入如下命令：

y

按下回车键即可。

• 实现热更新效果，只需在修改wanandroid-weex项目后，比如修改wanandroid-weex项目中的index.vue文件里面的

The environment is ready!

改为，如下所示：

jweihao !

再按下Ctrl + S保存即可，Google浏览器就会显示出修改后的渲染效果，如下图所示：

三、使用Android Studio打开Weex项目

第一步

• 下载并安装Android Studio和Java，然后对它们进行环境配置。

• 使用Android Studio ，打开模拟器或者真机。

第二步

• 默认情况下，weex create命令并不初始化Android和IOS项目，所以需要执行weex platform add来添加特定平台的项目，在VS命令窗口中输入如下命令：

weex platform add android

由于网络环境的不同，安装过程可能需要一些时间，请耐心等待，如果安装失败，请确保网络环境畅通。

再输入如下命令：

weex run android

此时，模拟器启动，显示渲染效果，如下图所示：

第三步

• 因为使用weex platform add android命令时，会在wanandroid-weex目录下生成\platform\android文件夹，里面保存着该项目中Android端的源码。

• 打开Android Studio ，并选择android文件夹，运行即可。

• 因为Android Studio 3.0使用的gradle版本是gradle-4.4-all，而wanandroid-weex项目中使用的是gradle-2.14.1-all版本，所以，如果在本地没有这个包，会显示在下载状态，除非翻墙下载，不然会很慢，可以在这里gradle-2.14.1-all ，密码是：3noj。

• 下载完成后，解压，并将该文件夹放置如下路径中：

C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv

Administrator是自己的用户名，8bnwg5hd3w55iofp58khbp6yv是随机生成的。

• 打开Android Studio 菜单栏上的“File”选项，然后是“Setting”选项，在输入框输入“gradle”并按下回车键，选择“Use local gradle distribution”选项，然后选择如下路径，按下Android Studio 菜单栏上的“Sync Project with Gradle Files”按钮即可：

C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv\gradle-2.14.1

运行，在Android Studio中会出现如下图所示的升级提示：

此时，切不可点击Update升级，不然又会报错，点击Don′t remind me again for this project按钮即可。

• 使用Android Studio 运行wanandroid-weex项目，然后在VS里面修改项目，按Ctrl + S保存后，可以发现，并没有热更新的渲染效果。

四、总结

• Weex开发项目渲染效果方式有三种：
  • 在Visual Studio Code 中，使用npm start命令，在Web端实现渲染效果，修改，并按下Ctrl + S保存，可以实现热更新功能。
  • 在Visual Studio Code 中，使用weex run android命令，在Android端实现渲染效果，修改，并按下Ctrl + S保存，可以实现热更新功能。
  • 在Android Studio 中，打开并运行项目\platform文件夹里面的Android代码，运行，此时，在VS里面修改代码。并按下Ctrl + S保存，并不能实现热更新效果。