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

最新推荐文章于 2024-08-13 11:11:39 发布
最新推荐文章于 2024-08-13 11:11:39 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： ionic5 文章标签： android apk java ionic5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010574271/article/details/114779063
版权

文章目录


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

前进道路上的程序猿
关注
专栏目录
Ionic+Visual Studio App开发
Felix的专栏
07-10 4599
利用Visual Studio开发环境，搭建Ionic框架，实现简单的App开发和原型展示。
Ionic实现混合开发--探索之旅
mandy的博客
04-08 928
混合开发是什么？ 个人理解混合开发指的是编写一个项目将涉及原生APP的API封装成JS模块，以插件的形式可以引入或删除，从而可以实现利用HTML调用原生API，本质上是HTML调用封装API的JS模块，而这个负责编写JS模块的项目被称作框架，即现在市场上存在的PhoneGap，DCloud，以及React Native。其目的是为了减少项目成本，即使用一套...
ionic5-starter-app：:glowing_star:Ionic 5 Starter App。 它具有您启动Ionic Angular应用程序开发所需的一切！ Firebase集成，电容器，PWA，列表，卡，导航，表格和验证等等！ 获得此优质的Ionic 5 Starter，并享受许多精心设计的页面以及最必要的功能！ :rocket:
02-05
ionic5-starter-app：:glowing_star:Ionic 5 Starter App。 它具有您启动Ionic Angular应用程序开发所需的一切！ Firebase集成，电容器，PWA，列表，卡，导航，表格和验证等等！ 获得此优质的Ionic 5 Starter，并享受许多精心设计的页面以及最必要的功能！ :rocket:
ionic5 环境搭建
wmburst
04-15 2415
基本依赖环境 nodejs nodejs安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v http://nodejs.cn/ jdk 新建JAVA_HOME变量 变量值安装jdk目录 path %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; CLASSP...
Angular5 项目教程（一）
最新发布
龙哥盟
08-13 1026
Web 应用基本上包括两台相互通信的计算机，称为服务器和客户端。该概念如图 1-1 所示。图 1-1该服务器位于公司办公室或数据中心，监听 HTTP 请求，并通过应答进行响应。服务器还访问 web 应用使用的数据(存储在数据库中)。用户使用他们的 web 浏览器与 web 应用进行交互。用户的计算机与服务器通信，发送 HTTP 请求并接收回答。客户端电脑可能是各种机器，从智能手表到手机到平板电脑再到电脑。在 web 上，客户端和服务器使用 HTTP(超文本传输协议)进行通信。
Ionic开发入门教程_5
有态度的Coder
11-18 862
创建Session控制器　　今天有点时间，就多翻译一篇，现在才发现自己英语是有多滥，意思都能看懂，但就是不知道该如何表达，看来距离一个大牛还有很远的路要走啊，继续努力~~
ionic5 创建公共模块
wmburst
07-06 429
命令 ionic -help（查看帮助） ionic -v（查看版本） ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单） ionic g page login(添加页面) ionic g provider BaseService(添加服务端口) ionic platform add android（添加android平台）
使用命令行工具构建ionic项目
H小志
03-20 633
第一步：安装ionic和cordova npm install -g cordova ionic 需要首先安装好nodejs，然后通过npm来安装 第二步：创建ionic项目tabs 使用下面的命令创建一个新的项目（默认的tabs示例） ionic start --v2 myApp tabs 初始目录结构如下 第三步：运行ionic项目 cd myApp ionic
配置ionic开发环境.docx
04-08
"Ionic 开发环境配置指南" Ionic 是一个基于 Apache Cordova 的混合应用程序开发框架，它可以帮助开发者使用 Web 技术开发跨平台的移动应用程序。为了快速开始 Ionic 开发，需要配置合适的开发环境。下面是配置 ...
ionic小白前端环境搭建
故城ing的博客
09-01 3117
ionic小白环境配置，项目目录介绍，androidstudio整合ionic项目，ionic的android app开发
angular+cordova+ionic 学习混合app（一）
alice17571的博客
07-20 581
最近开始学习使用angular+cordova+ionic 制作app,开始积累 首先开始学习的第一步就是环境的配置，哈哈，这是必须的 1.需要Java,下载jdk,然后进行环境配置，这个应该不用多说，程序员应该都明白。但是之后运行的时候会发生一些报错，反正我是遇到了，说是要安装指定版本的jdk,这里大家注意一下，看看需要jdk那一个版本 还有一个android sdk安装（我是很早之前是用Android Studio 下载配置过，你们自行下载sdk进行配置） 2.node环境 3.编辑器：这..
ionic+cordova学习之环境搭建
07-30
ionic+cordova环境搭建费了一段时间，我把过程整理了下，内容有转载其他人部分，还请原作者见谅。
完整的Ionic项目实例
03-13
代码经过Cordova编译处理的，用于自学使用，如有需要，可以私信我（注：学习使用，保存资源，避免丢失）
ionicHTML5移动应用框架 v5.3.3
09-28
为您提供ionicHTML5移动应用框架下载，Ionic 是一个神奇的框架和强大前端开源系统，使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。它已经定制了在所有手机设备上的快速操作，并且确保简单的功能和大量的手机组件。您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外，该框架为它自己的组件提供了一套 Angular 指令（自定义的 HTML 元素），从而使它可以简单的编写一行 HTM
ionic日誌-5
Number_One_2015的博客
03-21 108
這是自身的SDK不能安裝，為了搞他真的是盡心盡力啦，哈哈哈哈哈 首先刪除platform的iOS。。。一定一定不能在目錄下刪除，請用命令刪除。 （1）sudo cordova platform remove ios （2）cordova platform add ios --nofetch 以上两步是删除和添加，万一第二步达不到同步，就先(1),再到（2）为了清除...
ionic基本环境的搭建
weixin_30892987的博客
09-23 80
1.下载版本大于6的Node.js https://nodejs.org/en/ 个人喜欢下载最新版本 安装成功后可以用命令行工具输入node -v和npm -v分别查看node、npm版本 2.下载安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 使用cnpm -v 查看相应的版...
ionic5 表单相关组件（单行文本框、开关、多选按钮、下拉框、多行文本框）
u010574271的博客
04-09 1225
这里写目录标题准备新建页面跳转创建表单信息的JSON字符串页面创建list页面展示peopleInfo单行文本框ion-input开关ion-toggle单选按钮组 ion-radio-group 、ion-radio多选按钮ion-checkbox下拉框ion-select、ion-select-option多行文本框 ion-textarea 准备 新建页面 首先，我们项目中新建页面form如下： 跳转 接下来我们在tab1中新建按钮跳转只form页面 <ion-button [routerLi
Ionic Framework 5官方文档翻译
分享技术，传播知识!
03-20 1692
Ionic Framework 5官方文档翻译入门Ionic Framework 5特点Ionic Framework是什么？核心概念构建你的第一个应用先进的Web应用浏览器支持版本控制发布说明支持安装 入门 Ionic Framework 5特点 全新的UI组件和手势 全新的图标、颜色和主题 官方React与Angular集成 混合开发与原生开发 了解混合应用和原生应用之间的区别。我们打...
Ionic环境配置与项目打包调试指南
"该PDF文件提供了关于Ionic框架的环境配置、项目打包以及应用调试的详细步骤，适合初学者和开发者进行 Ionic 应用开发。" 本文档主要涵盖了以下几个关键知识点： 1. **Ionic环境配置**： - **JDK安装与环境变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值