Ionic移动端开发

目录

1. 基本概念

1. 原生开发

2. H5（Web APP）开发

3. 混合（原生+H5）开发

4 . 跨平台开发

5. 深入了解混合开发

2. Ionic框架

1. 基本概念

2. 使用 Ionic CLI 创建项目

3. UI 组件库

3. Capacitor工具

1. 基本概念

2. 创建 Capacitor 项目

3. 主要功能和插件

4. Capacitor 与 Ionic的关系

4. Android Studio

5. APK打包

1. 环境准备

2. 签名文件

1. 基本概念

2. 生成签名文件

3. 打包apk

1. 基本概念

本篇主要针对移动端App开发进行介绍。目前市场上主流的移动端APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的也就是原生开发、H5开发和混合开发。

1. 原生开发

开发方式：使用设备厂商提供的原生语言和工具进行开发，比如Android的Kotlin, Java；iOS的Swift, Objective-C等。

开发工具：Xcode (iOS)，Android Studio (Android)。

优点是：性能最佳，与系统的集成度高，能充分利用硬件资源（如GPS、摄像头）。

缺点是：开发时间长，成本高，可移植性差，比如同一款APP需要Android和IOS各自开发；APP版本内容更新后，用户需要手动更新App才能获取到最新数据，且App每次更新需要上传到App Store进行审核；

代表APP：微信，哔哩哔哩，抖音，移动端游戏等。可能会辅以少量H5开发以扩充功能，但对于追求性能，和硬件功能体验的部分，一定是原生APP最佳。

2. H5（Web APP）开发

开发方式：基于HTML5、CSS3和JavaScript开发的网页应用，依赖于浏览器的支持。

开发工具：VS Code，WebStorm。

优点是：支持设备范围广，能用浏览器就能访问它；开发成本低、周期短；内容样式，格式丰富；无需用户手动更新。

缺点是：受限于Web技术本身，不能直接访问硬件（如摄像头、麦克风等）和离线储存，功能，体验和性能有很大局限；对互联网要求高，离线不能做任何操作；

代表APP：微信、支付宝等应用的轻量级小程序，拼多多等电商平台的快速上线活动页面。

3. 混合（原生+H5）开发

开发方式：结合原生开发和Web技术开发，使用WebView加载网页内容，属于一种取长补短的开发模式。简单来说就是原生代码提供容器来展示web网页。

开发工具：Cordova，Capacitor，Weex。

优点是：开发效率高，节约时间，同一套代码Android和IOS基本上都可使用；版本更新无需App Store审核，只需要在服务器端升级即可，更新和部署比较方便；比web版实现功能多，可离线运行。

缺点是：加载缓慢/网络要求高，数据全部需要从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长；所有内容都是固定的，不能换界面或增加功能；手机系统发展迅速，不能跟好的兼容新系统，且安全性较低，也就是怕病毒。

代表APP：部分电商平台（淘宝部分页面使用H5技术嵌套），许多小型移动端APP。

4 . 跨平台开发

这是一种更广义的概念，可以包含原生APP、Web APP和混合APP的某些特点，但它本身并不是单独的第四种分类，而是通过特定的技术和工具实现一次开发，多端适配的一种开发策略。

典型的移动端跨平台开发框架，如：

原生APP中的，Flutter（基于Dart语言），React Native（基于JavaScript），Xamarin（基于C#）

混合APP中的，Ionic（基于HTML5/CSS/JavaScript）。

Web APP则天生带有跨平台的特性。

5. 深入了解混合开发

目前混合开发有两种开发模式：
原生主导的开发模式：需要安卓和IOS原生开发人员，整个App既有原生开发的页面，也有H5页面，在需要H5页面时由原生开发工程师实现内嵌。

H5主导的开发模式：只需要H5开发工程师，借助一些封装好的工具实现应用的打包与调用原生设备的功能，如HBuilder的云端打包功能。

2. Ionic框架

1. 基本概念

Ionic 是一个开源的跨平台前端框架，用于构建高性能移动应用 和 PWA（渐进式 Web 应用）

官网地址： Ionic 中文网         中文网地址：Ionic 中文网

总结：

Ionic框架可以将vue等框架或原生JS开发的web应用构建成移动应用，

Ionic组件库提供了 兼容移动端的的样式组件

Ionic框架与 Capacitor 深度集成 ，通过它让web技术开发的应用获得访问硬件资源的能力

下面是基于vue框架的示例，其他框架，请查看官方文档

1. 安装 Ionic CLI

#Ionic 提供了一个强大的命令行工具，用于创建和管理项目。
npm install -g @ionic/cli

2. 创建项目

#Ionic CLI 支持与不同前端框架结合。以下是基于 Vue 的示例：
ionic start myApp --type=vue

​

3. 运行应用

# 切换到应用
cd .\myApp
#在浏览器中调试：
ionic serve

打开浏览器仿真设备调试：

​

3. UI 组件库

• Button（按钮）
• Card（卡片）
• Modal（模态框）
• Toast（轻提示）
• Tabs（标签页）
• Segment（分段控制）
• Grid（网格布局）
• Infinite Scroll（无限滚动）

建议，跟随官方文档学习,  ion-action-sheet: Action Sheet Dialog for iOS and Android

注意：和移动设备的适配性，是 Ionic组件最重要的作用。

3. Capacitor工具

1. 基本概念

Capacitor 是由 Ionic 团队开发的一个跨平台工具，可以帮助开发者使用 Web 技术来构建 原生移动应用、PWA（渐进式 Web 应用） 和 桌面应用。

Capacitor 被设计为现代化的 Web 原生桥梁，它允许开发者将 Web 应用程序部署到不同的平台，同时访问原生设备功能，比如摄像头、文件系统和推送通知等硬件资源。

官方网址：Capacitor - Cross-platform Native Runtime for Web Apps | Capacitor Documentation

Capacitor 与 Cordova 的区别

2. 创建 Capacitor 项目

1. 创建项目

可以直接创建新项目，或者将现有 Web 项目添加 Capacitor 支持。

npm i @capacitor/core            # 核心依赖
npm i -D @capacitor/cli          # CLI 工具#或创建新项目
npx cap init [appName] [appId]    例如：
* appId: com.example.myapp 应用的唯一标识符。
* appName: 应用名称 MyApp

注意 ：如果你是使用Ionic CLI创建的项目，则可直接跳过这一步。

 ionic cil在创建项目时，已经帮我们安装好了这部分依赖

2. 添加平台

添加目标平台（iOS、Android、Web）

npm i @capacitor/android @capacitor/ios  # Android/ios 平台支持的官方包npx cap add android             # 添加Android平台
npx cap add ios                 # 添加Android平台

这一步之后会在项目目录下生成一个android目录

3. 构建与同步

构建 Web 代码并将其同步到目标平台

ionic build    #打包
npx cap sync     #代码同步

注意打包指令，如果你用pnpm，npm包管理器进行打包，有可能会出现以下错误，

vue-tsc 与某些依赖（比如 TypeScript、Vue 或 Vite）版本不兼容

​​​4. 运行

在模拟器或真机上运行，需要先下载Android Studio这样的开发和测试移动应用的工具，

见下方 “4. Android Studio”

npx cap open ios
npx cap open android      # 在 Android Studio 中打开

3. 主要功能和插件

1. 核心 Capacitor 插件

• Camera: 访问设备相机。

• Geolocation: 获取设备位置信息。

• Storage: 本地存储键值对数据。

• Filesystem: 访问设备文件系统。

• Network: 检测网络状态变化。

• Push Notifications: 实现推送通知。

2. 自定义插件

• 开发者可以根据需求自定义插件，用以访问更复杂的原生功能。

3. 集成原生 SDK

• Capacitor 支持直接集成平台原生的 SDK（例如 Firebase、支付 SDK）。

建议：跟随官方文档学习：Capacitor Plugins | Capacitor Documentation

4. Capacitor 与 Ionic的关系

• Ionic 提供前端 UI 组件。
• Capacitor 提供与设备功能（如相机、GPS）的集成。

4. Android Studio

下载地址：下载 Android Studio 和应用工具 - Android 开发者  |  Android Developers

关于 “提示Error running app:No target device found ” 错误的解决方案

这是因为没有开启虚拟设备（模拟器）