大家好,我是范俊,UNSV英语学习频道(www.unsv.com)创办人。今天,我将带领大家迎来激动人心的时刻——在自己的手机上安装一个自己亲自开发的手机app。这是一个真正意义上的手机app!虽然这个app一开始时是空的,什么功能都没有,但通过我的web编程与app开发班的学习,相信不远的未来,你就可以根据自己的需求,为app设计添加各种实用功能。 第一步:准备所需设备与下载安装软件 你需要准备的设备有:
你需要下载安装的软件有: 下载须知:操作系统分为Windows和MacOS,以及32位和64位。下载下面的软件时,一定要看清软件适合的版本,不要下错了。
第二步:部署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的家伙。 |
|
来自: 昵称30276536 > 《IT》