ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ionic5混合app开发环境配置以及项目和调试apk生成

2021-03-14 12:57:46  阅读:251  来源: 互联网

标签:JDK ionic5 app next apk 点击 ionic 安装 下载


文章目录


ionic5混合App开发环境的配置需要安装JDK、Android SDK、NodeJS、以及GIT等,如果不想麻烦去官网下载,可在https://download.csdn.net/download/u010574271/15781729下载相关包,下面就开始

JDK安装

1.JDK的下载

如果不用相关包可以访问oracle官网https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html可下载jdk的相关安装包
在这里插入图片描述
在这里插入图片描述

JDK的安装

JDK下载后,双击安装
在这里插入图片描述
点击下一步,选择要安装的位置,默认安装再C盘,如果要更改可点击更改
在这里插入图片描述
点击下一步后,JDK开始安装,一直到finish后安装成功
在这里插入图片描述
在这里插入图片描述

JDK环境变量配置

右击此电脑->属性->高级系统设置->高级->环境变量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

系统变量点击新建JAVA_HOME,然后将安装的JDK的路径复制到变量值下,点击确定
在这里插入图片描述
双击path,弹窗新建%JAVA_HOME%\bin、%JAVA_HOME%\jre\bin、%MAVEN_HOME%\bin
在这里插入图片描述

cmd进入控制台,输入java -version
在这里插入图片描述

ANDROID SDK安装

Android sdk安装包下载

如果不用相关包可以去http://tools.android-studio.org/index.php/sdk下载相关sdk
在这里插入图片描述
在这里插入图片描述

安装

下载成功后,双击installer_r24.4.1-windows.exe安装
在这里插入图片描述
点击next
在这里插入图片描述
点击next->选择install for anyone using this computer
在这里插入图片描述
点击next->选择安装路径,默认为C盘
在这里插入图片描述
点击next->install
在这里插入图片描述
安装成功后,进入安装后的路径内点击SDK Manager.exe
在这里插入图片描述
选择tool和Android 10(API 29),点击install packages 安装
在这里插入图片描述
在这里插入图片描述

配置ANDROID环境变量

跟JDK环境变量配置相似如下:
在这里插入图片描述
path中新增%ANDROID%\tools、%ANDROID%\platform-tools、%ANDROID%\build-tools
在这里插入图片描述

nodejs安装

下载

如果不用相关包可以去nodejs官网https://nodejs.org下载相应安装包
在这里插入图片描述
在这里插入图片描述

安装

双击node-v14.15.5-x64.msi
在这里插入图片描述
点击next
在这里插入图片描述
点击next->选择安装路径
在这里插入图片描述
点击next
在这里插入图片描述
点击next
在这里插入图片描述
点击next->点击install
在这里插入图片描述
cmd打开控制台,输入node -v和npm -v可以看到如下就说明安装成功
在这里插入图片描述

安装GIT

下载

如果不用相关包可以去官网https://git-scm.com/downloads下载相应安装包
在这里插入图片描述
在这里插入图片描述

安装

安装git很简单,只需要一直点下一步即可,中间如果不想安装到C盘也可以选择其他路径
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
cmd进入控制台,输入git --version,如下说明安装成功
在这里插入图片描述

gradle配置

在这里插入图片描述

ionic5的项目还需要有gradle,所有我们先将包内的gradle-6.8.2-all.zip解压缩到特定的路径下
然后拷贝其路径用于配置环境变量
环境变量中,我们双击path,然后添加gradle下的bin的路径
在这里插入图片描述

ionic和cordova的安装

cmd进入控制台,输入npm install -g cordova ionic可安装最新的ionic和cordova
在这里插入图片描述
安装成功后,输入ionic -v和cordova -v显示如下表示成功
在这里插入图片描述

新建项目

创建

控制台中输入ionic start myApp tabs新建一个名为myApp的项目,其模板为tab模板
在这里插入图片描述
因为现在ionic暂时还只支持Angular和React,我们选择Angular,点击Enter
在这里插入图片描述
询问是否更改setting,输入y回车enter
在这里插入图片描述
成功后生成的myApp项目下的文件如下
在这里插入图片描述

启动项目

创建成功后,cd myApp进入项目,然后输入ionic serve启动项目
在这里插入图片描述在这里插入图片描述
启动成功后会弹出浏览器显示项目的页面如下:
在这里插入图片描述

配置平台

ctrl+c退出启动,然后输入ionic cordova platform add android配置该项目运行平台为安卓
在这里插入图片描述
在这里插入图片描述
成功后会在项目中生成platforms、plugins、resources、www等文件夹如下:
在这里插入图片描述
接下来我们就可以使用ionic cordova build android打包调试APK了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
成功后在myApp\platforms\android\app\build\outputs\apk\debug下可以看到app-debug.apk文件
在这里插入图片描述
我们可以将其安装到安卓模拟器或者安卓手机上,打开软件后,页面如下
在这里插入图片描述

标签:JDK,ionic5,app,next,apk,点击,ionic,安装,下载
来源: https://blog.csdn.net/u010574271/article/details/114779063

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有