react学习前准备二： 移动App开发环境搭建

环境变量的使用

作用：将需要全局使用的工具或者应用程序，配置到Path环境变量中，可以很方便的通过命令行的形式，在任何想要运行这些应用程序的地方，运行它们

安装最新版本的java jdk

安装jdk包

修改环境变量，新增`JAVA_HOME`的系统环境变量，值为`C:\Program Files\Java\jdk1.8.0_74`，也就是安装JDK的根目录

修改系统环境变量`Path`，在`Path`之后新增`%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;`

新建系统环境变量`CLASSPATH`，值为`.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;`

保存所有的系统环境变量，同时退出系统环境变量配置窗口，然后运行cmd命令行工具，输入`javac`，如果能出现javac的命令选项，就表示配置成功！

安装Node.js环境

需要安装最新的长期稳定版本，不要实验版本；安装完毕之后的node.js会自动配置到全局系统环境变量中

安装完毕后，可以输入`node -v`查看node版本号；

安装C++环境

大多数情况下操作系统自带C\++环境，不需要手动安装C\++环境；

如果运行报错，则需要手动安装visual studio中的C\++环境；

安装Git环境

Git安装完毕后，会自动配置到系统环境变量中；

可以通过运行`git --version`来检查是否正确安装和配置了Git的环境变量；

安装配置Python环境

安装Python时候，只能**安装2.×的版本**，要记得勾选安装界面上的`Add Python to path`，这样才能自动将Python安装到系统环境变量中；

安装完毕之后，可以在命令行中运行`python`，检查是否成功安装了python。

配置安卓环境

安装`installer_r24.3.4-windows.exe`，手动选择安装到d盘下的android目录

打开安装的目录，将`android-25`、`android-24`、`android-23`(react-native必须依赖这个)解压后，放到`platforms`文件夹下

解压并得到`platform-tools`文件夹，放到安装目录的根目录中

【这一步直接忽略即可！】**tools文件夹不解压覆盖也行；**~~解压`tools`，放到安装根目录中~~

解压`build-tools_r23.0.1-windows.zip(react-native必须依赖这个)`、`build-tools_r23.0.2-windows.zip(weex必须依赖这个)`和`build-tools_r23.0.3-windows.zip`，并将解压出来的文件夹，分别改名为版本号`23.0.1`、`23.0.2`和`23.0.3`；在安装目录中新建文件夹`build-tools`，并将改名为版本号之后的文件夹，放到新创建出来的`build-tools`文件夹下

在安装目录中，新建`extras`文件夹，在`extras`文件夹下新建`android`文件夹；解压`m2responsitory`文件夹和`support`文件夹，放到新建的`extras -> android`文件夹下

配置安装环境变量：在系统环境变量中新建`ANDROID_HOME`

紧接着，在Path中新增`;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;`

ReactNative快速打包

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook（与reactnative一个公司的）提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

快速体验ReactNative开发过程

运行`react-native init mypro01`创建React-Native项目

运行`cd mypro01`切换到项目根目录中，运行`adb devices`来确保有设备连接到了电脑上

运行`react-native run-android`打包编译安卓项目，并部署到模拟器或开发机中

运行上一条命令之前，要确保有设备连接到了电脑上，可以运行`adb devices`查看当前接入的设备列表，打包好的文件，放到了`android\app\build\outputs\apk`目录下

快速体验Weex开发过程

安装依赖:Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要最新稳定版的 Node.js 和 Weex CLi。

运行`npm install -g weex-toolkit`安装Weex 官方提供的 `weex-toolkit` 脚手架工具到全局环境中

运行`weex create project-name`初始化Weex项目

进入到项目的根目录中，打开cmd窗口，运行`weex platform add android`安装android模板（意味着以后项目会运行在android平台上面），首次安装模板时，等待时间较长，建议fq安装模板

打开`android studio`中的`安卓模拟器`，或者将`启用USB调试的真机`连接到电脑上，运行`weex run android`，打包部署weex项目

部署完成，查看项目效果