Windows ionic3安装、创建项目及打包Android apk

Windows ionic3安装、创建项目及打包Android apk

​ 小编用windows的cmd尝试各种方法,如:降低ionic版本到ionic3.12.0创建项目出现各种错误,把npm换成cnpm(淘宝镜像)加载依赖时还是会报错。即使创建项目成功了,运行成功了,可是修改项目内容无法及时刷新,让小编特别头疼,查找网上的方法也无法解决。创建ionic项目都如此艰辛,更别说打包Android app了。经过小编的不断尝试,终于找到一种终极方法,不用使用ionic3.12.0低版本,也不用把npm改成cnpm

​ 因为ionic 最新版本是ionic4.12.1 所以小编使用最新的ionic3的版本ionic3.20.1

1. 安装node

​ 可以到 node 官网下载稳定版本,如图:

Windows ionic3安装、创建项目及打包Android apk

​ 下载完成直接双击安装,也可以上网找教程,这里就不演示了。

​ 安装完成后可以使用一下命令进行检测

node -v 查看node的版本号,有版本号出现说明node安装成功。

npm -v 查看npm的版本号,有版本号出现说明npm安装成功。

Windows ionic3安装、创建项目及打包Android apk

重点是npm安装成功,接下来我们将使用到npm来完成一系列操作。

安装ionic3

win+r打开cmd Windows ionic3安装、创建项目及打包Android apk

输入npm install -g cordova [email protected] 这样ioniccordova (打包需要用到)就可以同时全局安装

Windows ionic3安装、创建项目及打包Android apk

Windows ionic3安装、创建项目及打包Android apk
Windows ionic3安装、创建项目及打包Android apk

出现这样的图,而且没有报错就说明成功一大半了。如果有报错,有可能是node安装有错,需要把node完全卸载,小编已经卸载一边,大家 可以百度卸载方法。接下来检测一下ionic是否安装成功

ionic -v 检查ionic 版本号,出现版本号就说明ionic安装成功

cordova -v 检查cordova版本号,出现版本号就说明cordova 安装成功

Windows ionic3安装、创建项目及打包Android apk

下载Git

进入官网 Git

Windows ionic3安装、创建项目及打包Android apk

点击Downloads进入下载页面,然后选择windows版本

Windows ionic3安装、创建项目及打包Android apk

###安装打包环境

#####安装git可以参照这个网站 安装Git

接下来就要创建 项目了,在你想要创建项目的目录下(小编选择自己的F盘创建了一个文件夹)鼠标右击就会出现下面的图,选择Git bash here

Windows ionic3安装、创建项目及打包Android apk

创建ionic项目

ionic start demo super ionic start 创建项目命令,demo 项目名称(可以换成自己想起的项目名称),super 项目模板,还有其他模板,需要读者自己查询。使用git创建项目不能像cmd可以上下移动选择模板。

Windows ionic3安装、创建项目及打包Android apk

遇到下图情况,这是问我们需不需要添加Android和ios平台,小编选择不添加,将在下面打包的时候教大家添加Android平台。

Windows ionic3安装、创建项目及打包Android apk

Windows ionic3安装、创建项目及打包Android apk

很多人在npm i这里出现错误,小编也遇到过,一些解决方法就是进入到项目里使用淘宝镜像cnpm重新加载依赖,可是加载成功了,还是会有一些文件丢失,这是使用cmd才会出现,使用git 就像下图成功

Windows ionic3安装、创建项目及打包Android apk

cd demo进入到项目里, 运行一下项目 ionic serve,能在浏览器出现,说明项目创建成功。

配置打包环境

  1. 安装jdk

    • 可以参照 jdk1.8安装 进行安装,读者也可以查询别的安装方法
  2. 安装sdk

  3. 安装gradle

    1. Gradle 官网

    2. 下载gradle 适合自己的版本,小编是用的是gradle4.5.1

    3. 把下载好的gradle压缩包随意放到自己电脑的一个磁盘上,然后解压

    4. 配置环境变量

      • 打开我的电脑的属性 ->高级系统配置 ->环境变量

      • 然后新建,输入图片的变量名,变量值未gradle解压的路径Windows ionic3安装、创建项目及打包Android apk

      • 找到path 点击编辑 ,然后点击新建,输入%GRADLE_HOME%\bin ,然后确定 -> 退出

      Windows ionic3安装、创建项目及打包Android apk

      打开cmd 输入gradle -v 出现版本号,说明gradle安装成功

开始打包

  1. 找到刚才创建的项目的目录,鼠标右击,选择git bash here

Windows ionic3安装、创建项目及打包Android apk

  1. 给项目添加Android 支持 输入ionic cordova platform add android

Windows ionic3安装、创建项目及打包Android apk

Windows ionic3安装、创建项目及打包Android apk

​ 没有报错就是已经添加成功,接下来就是最后一步了

  1. 输入 ionic cordova build android 进行打包

Windows ionic3安装、创建项目及打包Android apk

打包过程没有报错,并却出现了打包成功的apk地址(如图:红色框)

Windows ionic3安装、创建项目及打包Android apk

​ ionic打包成功后可以把apk发送到自己的手机进行安装 测试。使用Git 进行ionic创建项目,运行项目,打包都是速度很快的,不用考虑是否需要把npm换成cnpm 。小编使用这个方法没有出现过任何错误。有出现错误可以留言。