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 图解

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第1张图片


准备工作

如果我们把一个最后安装在安卓手机上的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/

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第2张图片

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

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,如下所示:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第3张图片

步骤 2 : 点击以上的Run(运行),将出现如下界面:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第4张图片

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第5张图片

步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs\” , 你可以修改目录,并点击 next(下一步):
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第6张图片

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步) :
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第7张图片

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第8张图片

点击 Finish(完成)按钮退出安装向导。
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第9张图片

检测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版本

检查node版本


第二步:安装cordova

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

npm install -g cordova

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

安装cordova


第三步:安装git

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

安装具体步骤如下:

  1. Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第10张图片

  2. Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第11张图片

  3. Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第12张图片

  4. Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第13张图片

5.至此,git安装结束。


第四步:安装java和javac

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

点击如下下载按钮:

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第14张图片

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

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第15张图片

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

配置环境变量

1.安装完成后,右击”我的电脑”,点击”属性”,选择”高级系统设置”;
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第16张图片

2.选择”高级”选项卡,点击”环境变量”;
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第17张图片

3.然后就会出现如下图所示的画面:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第18张图片

在”系统变量”中设置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.第一步
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第19张图片

2.第二步
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第20张图片

PATH设置

  1. 第一步
    Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第21张图片

  2. 第二步
    Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第22张图片

CLASSPATH 设置

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第23张图片

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

测试JDK是否安装成功

1、”开始”->”运行”,键入”cmd”;

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

end


第五步:安装gradle

下载gradle

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

http://services.gradle.org/distributions/
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第24张图片

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

配置 gradle

  1. 新建环境变量 GRADLE_HOME,即 D:\usr\local\gradle-2.4;
    Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第25张图片

  2. 修改环境变量 Path,即追加 %GRADLE_HOME%\BIN;
    Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第26张图片

验证 gradle

输入快捷键 WIN+ R,输入 cmd,在弹出的窗口输入命令行: gradle -v;
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第27张图片


第六步:下载并安装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:

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第28张图片

no2

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

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第29张图片

no3

然后就双击“SDK Manager.exe”,启动SDK Manager,如图所示:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第30张图片

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文件夹中的东西了,如下图所示,
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第31张图片

no5

理论上来说,extras中的东西如果网速允许,时间充沛的话,就都下载了吧,应为都是好东西。不过一开始安装的话,可以只用安装上图中的三个,即Android Support Repository、Android SupportLibrary和Google USB Driver。其他的以后有时间再慢慢下载吧。
接下来就可以进行安装了。要注意,由于这些东西都是在google 的服务器上下载的。由于俺们天朝有墙,所以可能会出现连接不上的情况,如下图:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第32张图片

这种时候,我们可以通过有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…”,

Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第33张图片

然后在弹出的对话框中,填写HTTP Proxy Server为mirrors.neusoft.edu.cn(镜像服务器的地址,注意前面不要加http),然后填写HTTP Proxy Port为80 (端口号)。最后在勾选下面的『Forcehttps://… sources to be fetched using http://…』复选框,如下图所示
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第34张图片

接着点击close,关闭对话框,再重新启动SDK Manager就行啦。之前选中安装的项目后面的状态都由之前的“Not installed”变为了如今的“Installed”,这就表示我们已经安装成功了!有没有很兴奋啊!
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第35张图片

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

no6

Ok,接着就是最后一步,我们熟悉的设置环境变量。这里需要把”\platform-tools“和”\tools”路径追加到系统环境变量Path中,具体如下:
首先,新建一个系统环境变量,变量名为ANDROID_SDK_HOME,变量值为你的SDK安装路径,这里我的安装路径为D:\android\android-sdk,如图所示:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第36张图片

然后就是在系统的Path变量后,追加;% ANDROID_SDK_HOME%\platform-tools;% ANDROID_SDK_HOME%\tools,如图所示:
Hybrid App(混合模式移动应用) Windows系统下开发环境的搭建_第37张图片

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

011

no7

至此,Android SDK 安装成功。


概要总结

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

最后

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

你可能感兴趣的:(源码类,社区类,跟帖类)