本人刚刚接触Ionic3,初步进行打包操作,将其遇到的问题和整个流程记录下载,方便以后的巩固,也为小白们提供一个参考。因本人没有appleヽ(ー_ー)ノ,而且使用的是WIN7系统,所以暂时只提供了WIN7的Android环境搭建(Android环境已经搭建好了可直接移至第三步),等我有时间会补上其他的(`・ω・´)
ionic项目创建(上一篇):Ionic3环境搭建及创建
Android环境搭建参考地址:https://www.cnblogs.com/puresoul/p/4597211.html
一、安装JDK并配置环境变量
1、在Java官方网站上下载相应系统的jdk文件安装,如win7 64 位系统下安装jdk-8u191-windows-x64。
2、下载完成后运行安装,我的装在D:\Program Files\Java\jre1.8.0_191
3、配置环境变量
右键计算机属性,点击系统高级配置
点击环境变量
点击新建
(1)配置JAVA_HOME
新建 JAVA_HOME 环境变量,变量值是自己安装JDK 的路径,找到你之前安装的路径,我的是:D:\Program Files\Java\jdk1.8.0_191
(2)配置ClASSPATH
新建 CLASSPATH 环境变量,变量值是:%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar
(3)配置PATH
找到PATH变量,追加如下目录:;%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin(注意是追加)
4、验证安装是否成功
打开CMD执行java -version,显示如下内容表示安装成功
二、下载安装Android SDK
1、进入AndroidDevTools网站下载ADT Bundle,点我点我
2、解压文件,尽量不要解压到带有中文路径的文件目录下,我的是E:\adt-bundle
3、安装更新SDK
(1)运行SDK Manager.exe,点击Tools中的Options
(2)配置国内镜像地址mirrors.neusoft.edu.cn
(3)回到主界面,点packages再点reload
先勾选这三个安装
同意认证安装,等待安装完成
安装完成后重新运行SDK Manager.exe,你会发现变多了,我们来安装最新的,按照之前一样安装就行了。
4、配置环境变量
(1)配置ANDROID_HOME
新建ANDROID_HOME 环境变量,变量值是上面的sdk路径,我的是E:\adt-bundle\sdk
(2)配置PATH
找到PATH变量,追加如下目录:(注意是追加)
tools目录:;%ANDROID_HOME%\tools
platform-tools目录:;%ANDROID_HOME%\platform-tools
build-tools目录:;%ANDROID_HOME%\build-tools\28.0.3(28.0.3是bulid-tool目录中的,改为你对应的)
5、验证环境变量
(1)验证 tools 目录下的环境变量:在命令行输入 android,该命令会启动Android SDK Manager
(2)验证 build-tools 目录下的环境变量:在命令行输入 aapt,会看到这条命令的使用帮助信息
三、Ionic的Android构建及打包
经历过上面的步骤,需要用到的Android环境终于搭好了,现在可以向你的Ionic构建Android平台了
1、运行cmd,进入到项目目录
2、执行ionic cordova platform
接着运行ionic cordova build android命令,出现了一个错误,原因是要求安装Gradle,基于Gradle来编译、打包android
所以我们还要手动安装Gradle
(1)手动下载gradle
gradle-x.x-bin.zip (x.x代表版本)
根据需要下载某一版本
地址: (点击这里)
我下载的是gradle-3.5
下载完成后,解压到任意文件夹下,我的是E:\gradle-3.5
(2)添加环境变量
找到PATH变量,追加如下目录;E:\gradle-3.5\bin(注意是追加)
(3)打开cmd,输入gradle -v命令,查看是否安装成功
完成后继续进入项目目录,重新运行ionic cordova build android命令
又报错了,(╯‵□′)╯︵┻━┻
查看错误,是需要Android SDK Platform 27,因此我们打开Android SDK Manager下载对应的文件
下载完成后回去重新运行ionic cordova build android命令,终于安装成功了,下面是文件的apk路径
最后将apk拷贝到手机里就可以安装了。( ̄▽ ̄)~*
这里挂上手机截图(~ ̄▽ ̄)~
剩下的就是自己编辑、制作页面和功能了,可以使用软件进行编码(我用的是VS Code),这里就不过多赘述了,就酱紫了
var index;
function piyixia(){
$("#pi").hover(function(){index = layer.tips('(其实我还没摸透 ̄▽ ̄)', '#pi', {
tips: [1, '#3595CC'],
time: 30000
});}, function() {
layer.close(index);
})
}
piyixia();