[email protected]版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】

 网上大部分ionic1打包apk都是老版本，需要老版本的node，然而老版本的gulp又不兼容，造成打包编译失败，整个过程配置繁琐还需要额外下载sdk manager，所以笔者使用最新版的ionic创建ionic1项目，使用capacitor编译项目为AndroidStudio工程引入AndroidStudio中打包apk。

一、运行环境配置

1.安装jdk，配置环境变量(安装方法略过)

打开此电脑->属性->高级系统设置->环境变量

在环境变量系统变量里面新建JAVA_HOME，变量值为jdk的安装目录，接着找到系统变量里面的Path点击编辑

新建 %JAVA_HOME%\bin和%JAVA_HOME%\jre\bin 然后确定 确定。然后按下win键+R打开运行输入cmd确定，分别输入

java -version

和

javac -version

没有报错，jdk环境配置就成功了

2.安装AndroidStudio，配置sdk环境变量

AndroidStudio下载地址

直接点击页面内download下载最新版本(安装步骤略)，安装完成后设置androidSDK目录(也可以默认)

打开主界面 点击右下角 configure然后点击setting打开设置界面

第一次安装androidstudio如果电脑内没有sdk会自动去下载sdk，下载的地址就在这个设置的目录，记下目录待会用到

sdk下载好后，先新建工程编译一下【会运行到sdk编译工具 为接下来环境变量创建做准备】，编译完成就可以配置环境变量了

还是像配置jdk一样新建

ANDROID_SDK_ROOT

变量值为刚刚记下的sdk安装目录，建好后找到系统变量下的Path点击编辑(跟刚刚jdk一样) 添加如下内容:

SDK环境变量配置好后 打开命令行(上面提到过)分别输入android和adb，弹出一堆 说明配置成功

3.安装最新版nodejs

下载地址:下载 笔者下载的是12.18.0版本，在安装过程中有一个安装tools的选项把它勾选

在安装完nodejs后会自动打开命令行安装python2.7和windows构建工具及Visual Studio构建工具，安装过程缓慢耐心等待(笔者是用科学上网安装的)

到此所需环境安装成功

二、使用npm命令安装@ionic/cli @capacitor/core @capacitor/cli

1.这里笔者使用了cnpm 阿里云镜像，下载快一些，命令行输入

npm install cnpm -g --registry=https://registry.npm.taobao.org

完成后 输入cnpm -v 显示版本 安装成功

2.命令行输入

cnpm install -g @ionic/cli

来安装ionic/cli ,如果安装过ionic则要先输入

npm uninstall -g ionic

来卸载ionic

3.命令行输入

cnpm install -g @capacitor/core @capacitor/cli

来安装capacitor构建工具

工具准备就绪接下来就是创建ionic1项目并打包apk了

三、创建项目并且打包apk

1.选择一个将要创建项目的目录打开命令行，输入

ionic start myapp tabs --type=ionic1

按回车执行,myapp是项目文件夹名称 tabs是项目界面的构建方式为tabs

执行过程视网络情况，如果之前安装nodejs的时候tools没有勾选可能会报python的错误，则要手动安装python2.7，后面可能会报错缺少构建工具 则复制报错内容百度解决

项目创建完成会多出项目文件夹，打开文件夹在文件夹内打开命令行 输入

ionic capacitor add android

并执行，构建android项目，构建完成会有提示输入

npx cap open android

按照提示输入，执行完会自动打开androidstudio并且自动编译项目

androidstudio编译所需内容下载完后会自动编译 此时无报错 证明编译成功,如果提示xxx缺少git库删除即可，编译过程会下载符合项目的gradle构建文件什么的，下载过程很慢 耐心等待

接着点击build 在里面选择生成apk，生成完成后

点击提示的local后会打开apk生成的目录，到此打包apk就完成了。

参考文档

ionic官方文档:https://ionicframework.com/docs/developing/android

capacitor官方文档:https://capacitor.ionicframework.com/docs/getting-started/#adding-capacitor-to-an-existing-ionic-app