文章目录
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文件
我们可以将其安装到安卓模拟器或者安卓手机上,打开软件后,页面如下