淘先锋技术网

首页 1 2 3 4 5 6 7


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文件
在这里插入图片描述
我们可以将其安装到安卓模拟器或者安卓手机上,打开软件后,页面如下
在这里插入图片描述