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

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

一、运行环境配置

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

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第1张图片
Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第2张图片
Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第3张图片
Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第4张图片

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第5张图片
Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第6张图片

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

java -version

javac -version

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第7张图片

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

AndroidStudio下载地址
直接点击页面内download下载最新版本(安装步骤略),安装完成后设置androidSDK目录(也可以默认)
打开主界面 点击右下角 configure然后点击setting打开设置界面

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第8张图片
Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第9张图片

第一次安装androidstudio如果电脑内没有sdk会自动去下载sdk,下载的地址就在这个设置的目录,记下目录待会用到
sdk下载好后,先新建工程编译一下【会运行到sdk编译工具 为接下来环境变量创建做准备】,编译完成就可以配置环境变量了

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第10张图片

还是像配置jdk一样新建

ANDROID_SDK_ROOT

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第11张图片

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第12张图片

3.安装最新版nodejs

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第13张图片

在安装完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并且自动编译项目

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第14张图片

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第15张图片

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

Ionic@6.10.0版本创建ionic1项目使用Androidstudio打包apk【node版本12.18.0最新稳定版】_第16张图片

点击提示的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

你可能感兴趣的:(AngularJS,android,windows)