纯干货分享：一天教会你做出能装在手机上运行的app！

大家好，我是范俊，UNSV英语学习频道（www.unsv.com）创办人。今天，我将带领大家迎来激动人心的时刻——在自己的手机上安装一个自己亲自开发的手机app。这是一个真正意义上的手机app！虽然这个app一开始时是空的，什么功能都没有，但通过我的web编程与app开发班的学习，相信不远的未来，你就可以根据自己的需求，为app设计添加各种实用功能。

第一步：准备所需设备与下载安装软件

你需要准备的设备有：

1. Windows电脑或Mac电脑

2. 一台安卓手机，要求进入开发者模式。如果你不知道如何进入，请浏览以下网址文章。

   https://jingyan.baidu.com/article/ca00d56c2dcd5de99eebcfc2.html

3. 确保能用的安卓手机数据线
   

你需要下载安装的软件有：

下载须知：操作系统分为Windows和MacOS，以及32位和64位。下载下面的软件时，一定要看清软件适合的版本，不要下错了。

1. NodeJS ： 请访问以下网址（NodeJS官网）下载安装适合你的电脑的版本。

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

2. Java SE SDK：请访问以下网址（Java官网）下载 JDK 1.8。注意只能下载安装这个版本。

   https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

3. Android Studio：请访问以下网址（Google官网）下载安装最新版本。

   https://developer.android.google.cn/studio#downloads

4. Gradle：请访问以下网址（Gradle官网）下载最新版本。这个软件没有安装程序，只有.zip压缩包，直接解压就等于安装了。

   https://gradle.org/releases/

5. 请收藏van allen站长web编程与app开发教学网站

   https://myapp.comshare.cn 
   

第二步：部署Cordova开发环境

在进行这一步之前，请务必确保上面提到的4个软件都已经下载安装完成。

Windows电脑，请点击开始 -> 运行 -> 输入 cmd，打开命令提示符。

Mac电脑，请点击 LaunchPad -> 其它 -> 终端，打开命令提示符。

不论Windows命令提示符还是Mac终端，以下统统称为命令提示符。以下提到的任何要求输入的命令，必须一字不差。否则出错。

Windows 命令提示符输入：

npm install -g cordova

Mac命令提示符输入：

sudo npm install -g cordova

Mac命令提示符，npm前面加上sudo是指使用管理员权限运行npm。如果不加sudo，安装将因没有权限而失败。使用sudo运行命令时，系统可能会要求输入管理员密码。

命令开始执行后，将自动从远程下载安装Cordova所需文件，整个过程一般5-10分钟可以完成。如果网络连接条件不好，时间可能更长，请保持耐心等待。Cordova如果成功安装，你将看到以下信息：

有时，可能会因为网络条件不好，等待超过20分钟，依然没有出现成功安装提示信息。这时你可以先把命令提示符窗口关闭中止安装，然后再打开。再次执行上面的安装命令。

第二步：创建app

Windows系统输入以下命令：

cordova create myfirstapp com.unsv.myfirstapp 'My First App'

Mac系统输入以下命令：

sudo cordova create myfirstapp com.unsv.myfirstapp 'My First App'

可以看到，Mac系统下输入的命令和Windows系统下几乎一样。差别就是Mac系统下的命令行前面多个sudo。

在后续的教学中，在命令提示符里执行cordova命令，如果不做特别说明，Mac系统一律额外加上 sudo。这点一定不要忘记！请反复读三遍提醒自己！

第一次执行Cordova命令时，系统会问以下问题：

May Cordova anonymous report usage statistics to improve to tool over time? (Y/N)

这是在问：是否同意Cordova自动发送使用统计数据以帮助其改进？同意输入Y，拒绝输入N。无论你同意与否，皆不影响命令执行。如果同意，请输入Y，然后敲回车，让命令可以继续进行。

出现 Creating a new cordova project. 提示，表明命令执行成功！

没有出现上述执行结果，则代表命令执行出错。请认真仔细核对上面的命令，看看自己是否存在以下问题：

1、字母是否输入错误？

2、是否在哪个地方漏掉空格或双引号？

3、双引号确认是英文的双引号（''）吗？不能是中文双引号（“”）哦！

4、提示 Path already exists and is not empty.? ，这代表项目文件夹已经存在，请换个别的文件夹名。文件夹名不要使用中文！

cordova create myfirstapp com.unsv.myfirstapp 'My First App' 这个指令是什么意思呢？我来详细解释解释吧。它的意思是：通过cordova，创建（create）一个新的app项目，项目文件夹myfirstapp，包名 com.unsv.myfirstapp，app在手机桌面显示的名称是My First App。指令中的双引号一定要输入吗？一定要的！因为My First App中间有空格，所以一定要用双引号，否则命令执行会出现异常情况。如果app显示名称无空格，可以不用双引号。

第三步：为app添加运行平台

当你通过cordova创建一个app项目，你只是创建了一个空的项目框架。要想让这个app能在安卓或苹果手机运行，你还需要为这个app项目添加安卓或苹果手机运行平台。

首先，请输入以下指令：

cd myfirstapp

确保正确执行 cd myfirstapp 指令非常重要！它是后续操成功的基础。它的意思是进入刚刚所创建的app项目所在的文件夹，即myfirstapp。Windows系统下，这个文件夹一般在 C:\Users\<电脑用户名>\myfirstap。Mac系统下，这个文件夹一般在 /Users/<电脑用户名>/myfirstapp。

Windows系统下，指令成功执行后的样子：

Mac系统下，指令成功执行后的样子：

接下来，为app添加安卓运行平台。请输入以下命令：

cordova platform add android

如果执行这个命令出错，请注意检查是否以下问题：

1、Mac系统用户是不是要在cordova前加sudo。

2、你是不是 android 错误输入成 andriod，这是初学者很容易输入错误的地方。

3、你是否正确执行了前面的 cd myfirstapp 命令？现在的工作文件夹是否是 myfirstapp ？

Windows系统下命令成功执行，应该会显示下面的信息。

Mac系统下命令成功执行，应该会显示下面的信息。

再下步，为app添加苹果运行平台，请输入以下命令

cordova platform add ios

（Mac系统用户请不要忘记加sudo）

命令成功执行结果与上述添加安卓运行平台类似。

为app添加 android 和 ios 平台（platform）支持后，它将来就可以同时在苹果和安卓手机里运行。

第四步：创建app编译支持环境变量

现在，请输入以下指令，编译app输出 android 版本。

cordova build android

这时你可能会遭遇这样的错误：Failed to find 'ANDROID_HOME' environment variable. Failed to find 'android' command in your 'PATH'. 它的意思是找不到 ANDROID_HOME 环境变量，然后 PATH 环境变量里没有 android 这样的命令。

出现这个错误的原因是你的电脑没有建立下面几个系统环境变量。

1、JAVA_HOME：这个系统环境变量值应该是第一步中Java SE SDK安装的文件夹位置。

2、ANDROID_HOME：这个系统环境变量值应该是第一步中Android Studio安装时，存储Android SDK的位置。

3、PATH：这个系统环境变量，系统会默认创建好，但它里面应该追加 JAVA_HOME以及ANDROID_HOME对应文件夹下的几个子文件夹位置。

你可能对环境变量是什么很陌生。我就拿大学老师上课点名这件事来打个通俗的比方吧。我们假设这个老师很严谨，每天都会点名，而且每次点名都必须精确到这个学生所在的省市县村最后再名字。比如有个学生叫周杰伦。他可能会这样点名：台湾省台北市当归县周家村周杰伦。但是这个老师除了严谨还特别讲究效率。他也觉得每天这样点名效率太低了。于是他弄了个笔记本，把自己喜欢点到的几个学生的省市县村+名字登记下来，其中包括周杰伦。从此以后，当他点名周杰伦，他就直接点周杰伦三个字，而不把前面的省市县村念出来。虽然没有念出来，但这个老师还是会翻开笔记本，以确保周杰伦在这个本子里。

现在，我们再来看环境变量（笔记本）是什么。它是为了方便系统（老师）调用（点名）各种程序（学生）而创建的。如果没有环境变量（笔记本），系统要调用一个程序（点名），需要指定程序的完整路径（省市县村）。但有了环境变量，系统调用这个程序时，只需指定程序名称，而不必指定程序路径。因为程序路径已经在环境变量里指定了。系统会自动从环境变量里指定的路径里找到这个程序名称。

添加JAVA_HOME系统环境变量

在Windows系统下，添加系统环境变量 JAVA_HOME 的方法：鼠标右键点击 我的电脑 → 属性 → 高级系统设置 → 环境变量。环境变量分用户环境变量和系统环境变量。系统环境变量所有用户可用，用户环境变量只有当前登录用户可用。我们要建的JAVA_HOME是系统环境变量。在系统变量区，点击新建按钮，变量名输入 JAVA_HOME，变量值输入 JDK 安装的位置，它通常是位于 C:\Program Files\Java 下的一个以 jdk+版本号 打头的文件夹。成功添加效果如下图：

在Mac系统下，添加环境变量JAVA_HOME的方法：

1、命令提示符输入 sudo vi ~/.bash_profile  这个命令的含义是使用文本编辑器vi，编辑当前用户根目录下的配置文件 .bash_profile。一定要加sudo，否则你可能没有保存配置文件权限。

2、打开 vi 编辑器之后，准备输入文本内容。vi 编辑器很有意思，你不能直接就输入，需要先按键盘 esc 键，再按 i 键，看到 vi 编辑器左下角 显示 --insert--，才代表你现在可以用键盘输入文本了。请输入以下文本：

export JAVA_HOME='$(/usr/libexec/java_home)'

3、输入完毕，想要保存退出怎么办？vi编辑器继续有意思，你得这样操作：先按键盘 esc 键，再按 : 键，这时你会看到编辑器左下角出现一个冒号，然后你可以接着这个冒号的后面输入指令 wq，然后按回车。wq是什么意思呢？w = write，q = quit，所以 wq 就是保存退出指令。

添加 ANDROID_HOME 系统环境变量

运行 Android Studio，在起始画面右下角有个 configure 标签，点击它，选择 SDK Manager。

因为 Android Studio 默认只安装最新版的 SDK，但 Cordova 还需要其它低版本的SDK，这样开发出来的app，才能在更多旧手机里运行。进入SDK Manager之后，可以把 版本号大于等于7的 SDK全部选上。然后点击确定，等待下载完成。

安装好全部 Android SDK 之后，我们需要在系统环境变量里添加 ANDROID_HOME 和 ANDROID_SDK_ROOT 两项。ANDROID_HOME 的值可以在上述 SDK Manager 中找到。如下图红色位置。

在 Windows 系统中，它通常类似下面这种文件路径：

C:\Users\Administrator\AppData\Local\Android\Sdk

在Mac系统中，它通常类似下面这种文件路径：

 /Users/YourUsername/Library/Android/sdk

ANDROID_HOME 和 ANDROID_SDK_ROOT 环境变量值应该设置为相同。同时，我们还需将三个变量路径值，依次添加到系统环境变量 PATH 里。这三个环境变量值分别是：

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\tools

%ANDROID_HOME%\tools\bin

请注意！千万不要覆盖环境变量 PATH 里原有的值。你只能将新值追加到 PATH 里。因为 PATH 是系统变量，是给很多程序共用的，如果你覆盖它原有的值，你的系统可能会崩溃。

Windows系统下，JAVA_HOME 环境变量添加效果如下：

Windows系统下，将%ANDROID_HOME%\platform-tools，%ANDROID_HOME%\tools，%ANDROID_HOME%\tools\bin 添加到 PATH 环境变量效果如下：

Mac系统下，Android Studio 安装完成后，我们需要创建一个名为 ANDROID_SDK_ROOT 的环境变量。添加方法与上述Mac系统添加 JAVA_HOME 环境变量一样。执行命令 vi ~/.bash_profile，先按esc，再按 i，添加下面一行代码：

export ANDROID_SDK_ROOT=$ANDROID_HOME

添加完成之后，先按 esc，再按 : 然后输入wq 保存退出。

在系统环境变量PATH中添加 Gradle 解压路径

除了设置 Java SE SDK 和 Android SDK 环境变量，我们还需要将第一步下载解压的 gradle 文件夹路径添加到系统变量 PATH 里面。否则，你在编程app时将会遇到下面这种错误。

出错的原因是：Cordova 编译输出app安装包需要 Gradle 的支持。虽然你已经在第一步下载解压了Gradle，但系统并不知道如何找到。需要你手动将Gradle的解压文件夹位置写入系统环境变量PATH中系统才能找到。

Windows 系统下，把解压缩后的文件夹（gradle-4.10.3）拷贝到 C:\Program Files 目录下，然后再将 C:\Program Files\gradle-4.10.3\bin 加入到系统环境变量 PATH。

Mac系统下，把解压缩后的文件夹（gradle-4.10.3）拷贝到 /Library 下面。然后再使用 sudo vi ~/.bash_profile 将 /Library/gradle-4.10.3/bin 加入到系统环境变量 PATH。最后 .base_profile 文件的内容如下：

第五步：准备重启电脑

Windows系统下，为了让环境变量修改生效，需要重启电脑。

Mac系统下，为了让环境变量修改生效，你需要先在命令提示符里执行一行命令：source ~/.bash_profile 。随后重启电脑。

第六步：再次编译app

到此，我们已为安卓运行平台添加了全部的 SDK 支持，环境变量也都生效。这时，再输入命令 cordova build android 你应该可以看看编译通过的提示。Mac系统不要忘了加 sudo。编译成功的样子如下图所示。

都装好了，相关环境变量也设置好了。接下来，你可以转到命令提示符窗口，输入 cordova build android 看看能不能编译通过。

----

但如果你是比较旧的电脑，也有可能出现以下编译错误。如果你没有出现错误，那恭喜你！请跳过以下关于出错的解决方案。

常见出错：Error occured during initializing of VM. Could not reserve enough space for 2097152KB object heap.

解决方案：新建系统环境变量！变量名：_JAVA_OPTIONS，变量值：-Xmx512M。记得创建后重启电脑使其生效！

第七步：让app在手机上运行

最后，编译终于通过，来到最激动人心的时刻！

请拿出你的安卓手机，确保开发者模式打开，USB连接设置为多媒体传输（或叫传输文件），USB调试模式打开。小米手机一些型号还要打开 允许USB安装。插上数据线，连接电脑。

最后，请打开命令提示符，输入以下指令：

cordova run android 

不要眨眼，这是见证奇迹的时刻 ！！！

当这个指令执行完成之后，你今天创建的app将会安装到手机里并打开运行。下面是一些学员成功安装app的样子。看到吗？桌面上那个叫做 My First App的家伙。