#3 Weex 环境搭建

npm install --global --production windows-build-tools

npm install -g node-gyp

npm install -g weex-toolkit@latest

weex create first

cd first
npm start

ANDROID_HOME=你的Android SDK目录

weex platform add android

java.lang.UnsupportedClassVersionError: com/android/build/gradle/AppPlugin : Unsupported major.minor version 52.0

weex run android

之前介绍了 [Hybird App](/default/TeamShare/issues/1) 、[React Native](/default/TeamShare/issues/2) 的相关内容。本次重点介绍 [Weex](http://weex.apache.org/cn/guide/) 的环境搭建。 Weex 的学习同样需要对现代 JS及经典的一些特征有部分认知。 下面列出部分学习资料 **JS部分** 1. [ES6 标准][1] 2. [阮一峰老师的ES6教程][2] 3. [现代 Javascript 教程][3] 4. [函数式编程][4] 5. [NodeJs][5] 6. [JS 转换器 - Babel][6] 7. [JS 打包工具 - Webpack][7] **CSS部分** 8. [CSS 模块化][8] 9. [CSS 开发 - less][9] 10. [CSS 开发 - sass][10] **Vue 部分** 11. [Vue.js][11] 12. [vue-router][12] 13. [Vuex][13] 14. [Rax][14] 15. [JSX][15] [1]: http://www.ecma-international.org/ecma-262/7.0/index.html "ES6 标准" [2]: http://es6.ruanyifeng.com/ "阮一峰 ES6" [3]: https://javascript.info/ "现代 Javascript" [4]: https://mostly-adequate.gitbooks.io/mostly-adequate-guide/ "函数式编程" [5]: http://nodejs.cn/ "nodejs 中文网" [6]: http://babeljs.io/ "Babel" [7]: https://webpack.js.org/ "Webpack" [8]: https://github.com/css-modules/css-modules "css-modules" [9]: http://lesscss.org/ "less" [10]: http://sass-lang.com/ "sass/scss" [11]: https://cn.vuejs.org/index.html "Vue" [12]: https://router.vuejs.org/zh-cn/ "vue-router" [13]: https://vuex.vuejs.org/zh-cn/ "Vuex" [14]: https://alibaba.github.io/rax/guide "Rax" [15]: https://alibaba.github.io/rax/guide/learn-jsx "Jsx" 上面应该是**最小、最基础**的学习范围了。下面开始的内容，是基于或者假设你已经了解了这些... ## 安装Nodejs 因为涉及到现代 JS，所以，[Nodejs](http://nodejs.cn/) 是必须安装的内容。到官网下载安装完成之后，再回到本教程。 一般 Nodejs 安装完成之后，我会做两个操作: 1. 修改 Node 包镜像 `npm config set registry https://registry.npm.taobao.org` 2. 修改 Node 包全局安装位置 `npm config set prefix D:\\npm\\global` `npm config set cache D:\\npm\\cache` 我设置的目录是 D 盘 npm 目录。 当然，这两个动作都是选作的，你不设置，完全没关系。 ## 安装依赖 本来这里应该直接安装 [weex-toolkit](https://github.com/weexteam/weex-toolkit) , 但是这里真的有很一些坑要提前声明下。 因为 windows 是我们唯一的开发平台，所以这里列出我所经历的坑。(Linux上的部分，我也经历了，都是泪，不说了)。在此之前，我建议你先阅读下官方列举的一些[常见问题与解决方案](https://github.com/weexteam/weex-toolkit/blob/master/README-zh.md#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) ### 安装 node-gyp 这个是 [weex-toolkit](https://github.com/weexteam/weex-toolkit) 的前置要求库。但是很不幸，我直到写这篇分享，都没有能够解决其产生的部分问题。 [node-gyp](https://github.com/nodejs/node-gyp) 也是一个安装过程有很多坑的库，针对 windows 用户，官方给了其自身的[前置要求](https://github.com/nodejs/node-gyp#on-windows) nodey-gyp 本身需要使用 Visual C++ 编译环境与 Python2.7 环境。这两个环境，在开始学习 Weex 之前，我的机器已经自己安装过了，很不幸还是有很多的坑。因此，我不建议大家自己单独去安装了，即使你之前已经安装过了。 这里给一个直接安装 Visual C++ 编译环境与 Python2.7 环境的包方式，即所谓的“一键式解决”。 ```bash npm install --global --production windows-build-tools ``` 然后再去执行 node-gyp 的安装 ```bash npm install -g node-gyp ``` ### 安装 weex-toolkit 在此之前，我需要先说明的一点是，直到本分享发版之前，我安装这个工具在 win 系统或者 linux 系统都没有一次能够做到不报错就成功的。而很多问题，官方的 [issues](https://github.com/weexteam/weex-toolkit/issues) 都没有给出解决方案，他们的验证方式就是，即使出了很多错误之后，如果你执行 `weex -v` 能够成功，他们就假定你安装成功了。 ```bash npm install -g weex-toolkit@latest ``` 这个就是最简单的安装命令，我们按照官方的思维来，如果你出错误了，请忽略。安装完成之后请使用 `weex -v` 命令进行检测，如果成功了，就假定你的 weex-toolkit 安装成功了。如果很不幸你不能安装成功，请再回去读一遍官方的 [FAQ](https://github.com/weexteam/weex-toolkit/blob/master/README-zh.md#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98) , 如果其中没有你遇到的问题，我只能表示爱莫能助! 祈祷吧... `weex -v` 这个命令在初始的时候，会有部分问题要你选择，你可以使用默认，也是进行选择。这些都是后期可以再修改的。比如默认镜像的问题，我就选择的是淘宝镜像。 ## 创建并启动项目 ```bash weex create first ``` first 是项目名称，自己可以任意更换。创建过程会有部分提问，你可以忽略，一路回车即可。 创建完成之后，启动项目 ```bash cd first npm start ``` 这里，打开你的浏览器，按照命令结果的提示地址，就可以看到页面了。 ## 添加移动设备 > 关于虚拟设备的安装问题，请参考之前的文章 [Hybird App 开发简介与 Andriod 环境搭建](/default/TeamShare/issues/1) > 如何启动 Genymotion , 请参考之前的文章 [React Native 环境搭建](/default/TeamShare/issues/2) 在使用 Android 虚拟设备之前，你需要设置一个环境变量 ```bash ANDROID_HOME=你的Android SDK目录 ``` 至于 windows 怎么设置，请自行百度。 如果你是设置的用户变量，那么你需要重启你的命令执行环境，如果你设置的是全局变量，那么你需要重启你的 PC。 然后在你的项目目录内执行 ```bash weex platform add android ``` 执行成功之后会有 `BUILD SUCCESSFUL` 字样。 这里我出现了一个问题 ```bash java.lang.UnsupportedClassVersionError: com/android/build/gradle/AppPlugin : Unsupported major.minor version 52.0 ``` 百度之后 ([点击这里看解决方案](https://blog.csdn.net/u013361668/article/details/53372954))，发现我的环境 java 版本与 Android Studio 中的 版本不一致。我本地的是 OracleJDK 1.7, 但是 Android Studio 中用的是 OpenJDK1.8。 解决方案就是升级本地的版本与 Android Studio 一致。 下面是检验移动设备的时候了 ```bash weex run android ``` 如果在的 Genymotion 中看到了下面的页面, 那么恭喜你，成功了!  ## 最后 Weex 的环境搭建远比 React Native的搭建遇到的坑多，所以要有足够的耐心去应付。 最后，希望大家一起进步。