本文将讲解如何将编写好的HTML页面封装成APP,以及如何在虚拟模拟器上打开。
由于博主也是一个在APP开发门外游荡的路人,所以本篇博文仅供小白参考(文章太粗略,仅供参考)。
要知道市面上有很多使用H5接口的APP,可能是因为前端原生开发的灵活性不太符合现在的市场需求天外神坛,所以这里介绍一下如何使用和Ant来封装web页面到应用程序。在使用它之前,我们需要安装四个工具:
对:JDK和SDK的安装这里不再赘述,不懂的同学百度一下 Step2:安装Ant:
进入网页后,点击zip链接下载,选择最新版本。
Ant不需要安装,下载解压即可。
Step3:设置用户变量
JDK、SDK、Ant都准备好后,必须在系统环境变量中指定工具路径。右键计算机-属性-高级系统设置-环境变量
单击系统变量区域中的“新建”按钮。
输入“变量名”(变量名可以自己定义),在“变量值”中输入你电脑上JDK的存储路径。博主的路径如下:
确认后,再次点击新建,设置SDK的变量。在“变量名”中输入(变量名可以自己定义),在“变量值”中输入SDK在电脑上的存储路径。博主的路径如下:
接下来是设置 Ant 的用户变量。
三个变量新建完成后,Path变量的变量值也设置好了。
在Path中为变量值输入以下4条路径,每个路径变量用英文分号;隔开。(新变量和原变量也直接用分号隔开)
Step4:三个必备工具安装完成后,打开命令提示符窗口(cmd)查看工具是否安装成功。测试命令是:
如果三个工具都安装成功,会分别显示版本信息。如果某个项目没有安装成功,命令行会显示“Not an or , nor a or batch file”。如果找不到该命令,主要是因为您的变量没有正确设置路径。检查路径是否拼写错误或省略。
第五步:通过 npm 安装
在此之前,我们要先安装它,下载地址:打开官网后点击,下载安装。安装完成后,可以使用npm命令进行安装。打开CMD窗口(为避免安装错误,建议以管理员身份打开CMD,右键cmd-以管理员身份运行)。输入以下语法进行安装
1
npm install -g cordova
安装完成后会自动添加环境变量。如果上述命令无法执行,请检查您的 Path 变量是否自动添加。
Step6:安装完成后,打开AVD,新建一个安卓模拟器
AVD 应用程序通常可以在 SDK 目录中找到。找不到的同学(比如博主的SDK目录没有AVD)可以直接点击打开。如下图红圈所示:
打开后网页封装,新建一个模拟器。创建完成后,可以点击右侧的开始按钮启动模拟器。但是我们还不需要启动它,因为我们接下来要把我们写的网页包装成apk
Step7:将网页转换为应用程序
软件安装文件必须是apk文件,只要将apk文件导入模拟器,就可以在模拟器上安装你的应用了。然后我们需要先获取apk文件。
(1)创建项目。打开cmd输入命令
1
cordova create hello com.example.hello HelloWorld
在输入这个创建命令之前,需要先输入某个盘符网页封装,比如D盘,然后再输入上面的命令,就会在D盘自动生成一个项目。接下来的三个参数分别对应文件夹名(hello)、App id(com..hello)和应用名()。创建完成后,打开D盘的hello文件夹,会有如下子目录,其中www就是自己的网页所在的文件夹。如图所示:
(2)添加一个平台(先在cmd中进入项目文件夹,即hello文件夹),进入后输入如下命令:
1
cordova platform add android
(3)创建APP,生成apk文件。(或者在项目文件夹下输入如下命令):
1
cordova run android
命令执行后,我们可以在如下路径中找到自己的app安装包,即apk文件:
D:ebug
(4)将你的apk导入模拟器并安装,参考地址:百度
先打开安卓模拟器(必须先打开),输入cmd命令行进入sdk文件夹的-tools文件夹(目的是在这个目录下找到adb.exe),然后执行命令安装apk文件:
1
adb install apk文件路径和地址
比如刚才博主的apk文件位置在D:ebug
那么安装命令是:
1
adb install D:helloplatformsandroidappbuildoutputsapkdebugapp-debug.apk
命令最后是你的apk文件(如下图,项目文件夹的名字变了,是另一个项目)
显示为成功,一个新的应用程序出现在您的模拟器上 |