Hybrid App（混合模式移动应用） Windows系统下开发环境的搭建

• • • 导读
    • hybrid app 图解
    • 准备工作
    • 第一步安装nodejs
    • 第二步安装cordova
    • 第三步安装git
    • 第四步安装java和javac
      • 配置环境变量
      • JAVA_HOME 设置
      • PATH设置
      • CLASSPATH 设置
      • 测试JDK是否安装成功
    • 第五步安装gradle
      • 下载gradle
      • 配置 gradle
      • 验证 gradle
    • 第六步下载并安装AndroidSDK
      • no1
      • no2
      • no3
      • no4
      • no5
      • no6
      • no7
    • 概要总结
    • 最后

---

导读

提起Hybrid App，相信很多人都不陌生，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
下面，我们枚举一下当前较为流行的Hybrid App开发框架：

• react native
• angular ionic
• jQuery Mobile
• Onsen UI

以上便是当前比较流行的Hybrid App开发框架，开发者可以根据自己的习惯和经验，选择自己喜欢的框架。

确定好开发框架以后，接下来开发者就要搭建开发环境，本文将为您详细介绍如何在Windows系统中，搭建Android application（apk）文件的环境。

路漫漫而修远兮 吾将上下而求索！

---

hybrid app 图解

---

准备工作

如果我们把一个最后安装在安卓手机上的apk比作一辆汽车，那么，我们就要知道发动机，变速箱，电池组，等组件的概念。那么，我们打包apk都需要那些组件呢？
如下（安装环境也是这个顺序）：

1. node.js
2. cordova
3. git
4. java
5. javac
6. gradle
7. AndroidSDK

这7项内容，我们是假设你的电脑没有安装过上述内容，列举的，如果你已经安装过，请忽略。

---

第一步：安装node.js

https://nodejs.org/en/download/

请对应自己的电脑，选择安装。

32 位安装包下载地址：https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi
64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

步骤 1 : 双击下载后的安装包 v0.10.26，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs\” , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步） ：

步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path”，输出如下结果：

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\
检查Node.js版本

---

第二步：安装cordova

全局安装 cordova，点击开始=》运行=》输入”cmd” => 输入命令

npm install -g cordova

命令提示符里输入 cordova -v 查看版本号证明安装成功

---

第三步：安装git

https://git-scm.com/download/win

安装具体步骤如下：

1. 

2. 

3. 

4. 

5.至此，git安装结束。

---

第四步：安装java和javac

首先我们需要下载java开发工具包JDK，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

点击如下下载按钮：

在下载页面中你需要选择接受许可，并根据自己的系统选择对应的版本，本文以 Window 64位系统为例：

下载后JDK的安装根据提示进行，还有安装JDK的时候也会安装JRE，一并安装就可以了。
安装JDK，安装过程中可以自定义安装目录等信息，例如我们选择安装目录为 C:\Program Files (x86)\Java\jdk1.8.0_91。

配置环境变量

1.安装完成后，右击”我的电脑”，点击”属性”，选择”高级系统设置”；

2.选择”高级”选项卡，点击”环境变量”；

3.然后就会出现如下图所示的画面：

在”系统变量”中设置3项属性，JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击”编辑”，不存在则点击”新建”。

变量设置参数如下：

• 变量名：JAVA_HOME
• 变量值：C:\Program Files (x86)\Java\jdk1.8.0_91 // 要根据自己的实际路径配置
• 变量名：CLASSPATH
• 变量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //记得前面有个”.”
• 变量名：Path
• 变量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

JAVA_HOME 设置

1.第一步

2.第二步

PATH设置

1. 第一步
   

2. 第二步
   

CLASSPATH 设置

注意：如果使用1.5以上版本的JDK，不用设置CLASSPATH环境变量，也可以正常编译和运行Java程序。

测试JDK是否安装成功

1、”开始”->”运行”，键入”cmd”；

2、键入命令: java -version、java、javac 几个命令，出现以下信息，说明环境变量配置成功；

---

第五步：安装gradle

下载gradle

首先到官网下载 gradle-2.4-all.zip

http://services.gradle.org/distributions/

解压 ZIP 文件，本案例解压于 D:\usr\local

配置 gradle

1. 新建环境变量 GRADLE_HOME，即 D:\usr\local\gradle-2.4；
   

2. 修改环境变量 Path，即追加 %GRADLE_HOME%\BIN;
   

验证 gradle

输入快捷键 WIN+ R，输入 cmd，在弹出的窗口输入命令行： gradle -v；

---

第六步：下载并安装AndroidSDK

no1

首先，下载Android SDK Tools，翻过墙的朋友可以去Google Android的官网上下载（http://developer.android.com/sdk/index.html）。或者去这个网站下载（http://www.androiddevtools.cn/）。下面介绍一下在这个网站上下载的情况，首先打开http://www.androiddevtools.cn/，我们可以看到这里面有Android开发所需的各种工具，首先找到SDK Tools：

no2

选择一个最新的版本就行了。注意，这里有exe和zip两种文件可供下载，exe的就是个安装程序，下载下来需要自己双击安装。这里建议下载zip压缩包，下载后，直接解压缩到你想要安装Android的路径就行了。解压后的文件目录如下：

no3

然后就双击“SDK Manager.exe”，启动SDK Manager，如图所示：

no4

然后就是Android SDK Platform-tools和Android SDKBuild-tools，注意只需要下载最新的版本就行了。
然后就是API的选择了。我们可以看到这里提供了很多很多从Android 2.2到Android 5.x的很多版本的API，那么怎么选择呢。这里我建议，新手的话，选择一个最新的版本就好了，因为Android是向下兼容的。其他的以后你要用到了在下载就行了（因为下载安装的速度实在太慢啦。。。）。所以如上图所示，这里我只选择了下载当前最新的Android 5.1.1(API 22)。这里需要说明的是，如果你以后不打算用模拟器调试，而是一直用真机来调试的话，那么就可以不用装“system images“了。不过新手的话，不知道怎么选择，还是建议直接全部勾上吧，
最后就是extras文件夹中的东西了，如下图所示，

no5

理论上来说，extras中的东西如果网速允许，时间充沛的话，就都下载了吧，应为都是好东西。不过一开始安装的话，可以只用安装上图中的三个，即Android Support Repository、Android SupportLibrary和Google USB Driver。其他的以后有时间再慢慢下载吧。
接下来就可以进行安装了。要注意，由于这些东西都是在google 的服务器上下载的。由于俺们天朝有墙，所以可能会出现连接不上的情况，如下图：

这种时候，我们可以通过有Android SDK的国内镜像服务器来下载安装，这里推荐几个：
1、中科院开源协会镜像站地址:
IPV4/IPV6 : http://mirrors.opencas.ac.cn 端口：80
2、北京化工大学镜像服务器地址：
IPv4: http://ubuntu.buct.edu.cn/ 端口：80
IPv4: http://ubuntu.buct.cn/ 端口：80
IPv6: http://ubuntu.buct6.edu.cn/ 端口：80
3、大连东软信息学院镜像服务器地址:
http://mirrors.neusoft.edu.cn 端口：80

随便选择一个就行啦。这里我选择的是第三个站点，即大连东软的镜像，使用方法如下：
首先，点击菜单中的“Tools”,然后选择下拉中的“Options…”，

然后在弹出的对话框中，填写HTTP Proxy Server为mirrors.neusoft.edu.cn（镜像服务器的地址，注意前面不要加http），然后填写HTTP Proxy Port为80 （端口号）。最后在勾选下面的『Forcehttps://… sources to be fetched using http://…』复选框，如下图所示

接着点击close，关闭对话框，再重新启动SDK Manager就行啦。之前选中安装的项目后面的状态都由之前的“Not installed”变为了如今的“Installed”，这就表示我们已经安装成功了！有没有很兴奋啊！

由于直接使用SDK Manager在线下载安装的方式，非常漫长，如果不想等待那么长的朋友，可以自己到国内的站点（http://www.androiddevtools.cn/）上去下载需要安装的package，这种方式要快得多，不过就是要注意选择好自己需要下载的package以及相应的版本，在此就不加详述了，有选择恐惧症的硼油可以给我留言。

no6

Ok，接着就是最后一步，我们熟悉的设置环境变量。这里需要把”\platform-tools“和”\tools”路径追加到系统环境变量Path中，具体如下：
首先，新建一个系统环境变量，变量名为ANDROID_SDK_HOME，变量值为你的SDK安装路径，这里我的安装路径为D:\android\android-sdk，如图所示：

然后就是在系统的Path变量后，追加;% ANDROID_SDK_HOME%\platform-tools;% ANDROID_SDK_HOME%\tools，如图所示：

然后我们可以检验一下Android SDK是否安装成功：在命令行窗口中输入”adb version“，出现如下显示，则安装成功了：

no7

至此，Android SDK 安装成功。

---

概要总结

经过漫长的安装配置过程，你已经完成了cordova打包环境的搭建工作，由于本文中涉及的各个组件比较多，所以安装起来比较耗费时间，请各位开发者hold住自己，如果在过程中遇到什么问题，可以留言给博主。

最后

环境已经搭建完成，本文偏向于使用cordova打包application，不过具体情况还是要看个人喜好。
本文旨在交流学习，未经博主同意，谢绝转载或用于商业等用途！
最后，希望本文对你有所帮助！0-0