活动公告

系统通知
通知：关于部分勋章领取条件及购买价格调整的通知
05-18 21:22
系统通知
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

Ionic项目打包全攻略从开发到发布的完整流程详解常见问题解决方案

这是个蓝孩子 当前离线 威震华夏关云长
SunJu_FaceMall

3万

主题

2860

科技点

3万

积分

白金月票

碾压王

积分
32872

塔罗立华奏
<font color=白金月票" /> 发表于 2025-9-5 10:20:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1. 引言

Ionic是一个强大的开源框架，用于构建跨平台的移动应用程序。它允许开发者使用Web技术（HTML、CSS和JavaScript）来创建可以在iOS、Android和Web上运行的应用。然而，从开发到发布的过程涉及多个步骤，每个步骤都可能遇到各种挑战。本文将详细介绍Ionic项目从开发到发布的完整流程，并提供常见问题的解决方案，帮助开发者顺利完成应用打包和发布。

2. 开发环境准备

在开始Ionic项目开发之前，需要确保开发环境正确配置。以下是环境准备的详细步骤：

2.1 安装Node.js和npm

Ionic依赖于Node.js和npm（Node包管理器）。首先，需要安装Node.js，它包含了npm。
  2. # 检查是否已安装Node.js和npm
  3. node -v
  4. npm -v
  6. # 如果未安装，可以从官网下载并安装：https://nodejs.org/
复制代码

2.2 安装Ionic CLI

Ionic CLI（命令行界面）是开发Ionic应用的核心工具。
  2. # 安装Ionic CLI
  3. npm install -g @ionic/cli
  5. # 验证安装
  6. ionic -v
复制代码

2.3 安装Cordova和Native Run

Cordova允许将Web应用打包为原生应用，而Native Run用于在设备上运行应用。
  2. # 安装Cordova和Native Run
  3. npm install -g cordova native-run
  5. # 验证安装
  6. cordova -v
  7. native-run --version
复制代码

2.4 配置Android开发环境

对于Android开发，需要安装Android Studio和配置Android SDK。

1. 下载并安装Android Studio：https://developer.android.com/studio
2. 打开Android Studio，进入”Configure” > “SDK Manager”
3. 安装所需的Android SDK版本
4. 设置环境变量：
  2. # 在~/.bashrc或~/.zshrc中添加以下行
  3. export ANDROID_HOME=$HOME/Android/Sdk
  4. export PATH=$PATH:$ANDROID_HOME/tools
  5. export PATH=$PATH:$ANDROID_HOME/platform-tools
  7. # 保存后执行
  8. source ~/.bashrc  # 或 source ~/.zshrc
复制代码

2.5 配置iOS开发环境（仅限macOS）

对于iOS开发，需要macOS系统并安装Xcode。

1. 从App Store安装Xcode
2. 安装Xcode命令行工具：
  2. xcode-select --install
复制代码

3. 项目创建和开发

3.1 创建新项目

使用Ionic CLI创建新项目：
  2. # 创建一个新的Ionic项目
  3. ionic start myApp tabs
  5. # 进入项目目录
  6. cd myApp
复制代码

3.2 项目结构

了解Ionic项目的基本结构：
  2. myApp/
  3. ├── src/
  4. │   ├── app/          # 应用程序核心
  5. │   ├── assets/       # 静态资源
  6. │   ├── pages/        # 页面组件
  7. │   ├── theme/        # 主题和样式
  8. │   └── ...           # 其他目录
  9. ├── www/              # 构建输出目录
  10. ├── config.xml        # Cordova配置文件
  11. ├── ionic.config.json # Ionic配置文件
  12. └── package.json      # 项目依赖和脚本
复制代码

3.3 开发和测试

在开发过程中，可以使用以下命令在浏览器中实时预览应用：
  2. # 启动开发服务器
  3. ionic serve
  5. # 在特定平台预览
  6. ionic serve --lab
复制代码

3.4 添加平台

在打包前，需要添加目标平台：
  2. # 添加Android平台
  3. ionic cordova platform add android
  5. # 添加iOS平台（仅限macOS）
  6. ionic cordova platform add ios
复制代码

4. 打包前的准备工作

4.1 配置应用信息

编辑config.xml文件，设置应用的基本信息：
  2. <?xml version='1.0' encoding='utf-8'?>
  3. <widget id="com.example.myapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  4.     <name>MyApp</name>
  5.     <description>An awesome Ionic app</description>
  6.     <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
  7.     <content src="index.html" />
  8.     <access origin="*" />
  9.     <allow-intent href="http://*/*" />
  10.     <allow-intent href="https://*/*" />
  11.     <preference name="ScrollEnabled" value="false" />
  12.     <preference name="android-minSdkVersion" value="19" />
  13.     <preference name="BackupWebStorage" value="none" />
  14.     <preference name="SplashMaintainAspectRatio" value="true" />
  15.     <preference name="FadeSplashScreenDuration" value="300" />
  16.     <platform name="android">
  17.         <allow-intent href="market:*" />
  18.         <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
  19.         <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
  20.         <!-- 更多图标和启动屏幕配置 -->
  21.     </platform>
  22.     <platform name="ios">
  23.         <allow-intent href="itms:*" />
  24.         <allow-intent href="itms-apps:*" />
  25.         <icon height="57" platform="ios" src="resources/ios/icon/icon.png" width="57" />
  26.         <icon height="114" platform="ios" src="resources/ios/icon/icon@2x.png" width="114" />
  27.         <!-- 更多图标和启动屏幕配置 -->
  28.     </platform>
  29. </widget>
复制代码

4.2 生成应用图标和启动屏幕

Ionic提供了资源生成命令，可以自动生成各种尺寸的图标和启动屏幕：
  2. # 安装资源生成工具
  3. npm install -g cordova-res
  5. # 准备源文件
  6. # 将源图标放置在resources/icon.png
  7. # 将源启动屏幕放置在resources/splash.png
  9. # 生成资源
  10. cordova-res ios --skip-config --copy
  11. cordova-res android --skip-config --copy
复制代码

4.3 添加插件

根据应用需求，添加必要的Cordova插件：
  2. # 添加相机插件
  3. ionic cordova plugin add cordova-plugin-camera
  4. npm install @ionic-native/camera
  6. # 添加文件插件
  7. ionic cordova plugin add cordova-plugin-file
  8. npm install @ionic-native/file
  10. # 添加网络信息插件
  11. ionic cordova plugin add cordova-plugin-network-information
  12. npm install @ionic-native/network
复制代码

4.4 配置权限

在config.xml中添加必要的权限配置：
  2. <platform name="android">
  3.     <config-file parent="/manifest" target="AndroidManifest.xml">
  4.         <uses-permission android:name="android.permission.CAMERA" />
  5.         <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  6.         <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  7.     </config-file>
  8. </platform>
复制代码

5. 打包流程

5.1 构建Web资源

首先，构建Web资源：
  2. # 生产环境构建
  3. ionic build --prod
  5. # 或者使用Angular CLI
  6. ng build --prod
复制代码

5.2 Android打包
  2. # 构建调试版本的APK
  3. ionic cordova build android --debug
  5. # 构建后，APK文件位于：platforms/android/app/build/outputs/apk/debug/app-debug.apk
复制代码
  2. # 构建发布版本的APK
  3. ionic cordova build android --release --prod
  5. # 构建后，未签名的APK文件位于：platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk
复制代码

Android应用必须经过签名才能发布。以下是签名APK的步骤：

1. 生成密钥库：
  2. # 生成密钥库
  3. keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
  5. # 按照提示输入信息
复制代码

1. 配置签名信息：

创建一个名为release-signing.properties的文件，内容如下：
  2. storeFile=../my-release-key.keystore
  3. storePassword=your_store_password
  4. keyAlias=alias_name
  5. keyPassword=your_key_password
复制代码

1. 签名APK：
  2. # 使用jarsigner签名APK
  3. jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
  5. # 或者使用Android Studio的签名向导
复制代码

1. 优化APK：
  2. # 使用zipalign优化APK
  3. zipalign -v 4 app-release-unsigned.apk my-app-release.apk
复制代码

为了简化签名过程，可以在platforms/android/app/build.gradle中配置签名信息：
  2. android {
  3.     ...
  4.     signingConfigs {
  5.         release {
  6.             storeFile file("../../my-release-key.keystore")
  7.             storePassword "your_store_password"
  8.             keyAlias "alias_name"
  9.             keyPassword "your_key_password"
  10.         }
  11.     }
  12.     buildTypes {
  13.         release {
  14.             signingConfig signingConfigs.release
  15.             ...
  16.         }
  17.     }
  18. }
复制代码

然后，可以直接构建已签名的APK：
  2. # 构建已签名的发布版本APK
  3. ionic cordova build android --release --prod
复制代码

5.3 iOS打包（仅限macOS）
  2. # 构建iOS项目
  3. ionic cordova build ios --prod
复制代码

1. 打开Xcode项目：
  2. # 使用Xcode打开项目
  3. open platforms/ios/MyApp.xcworkspace
复制代码

1. 在Xcode中配置项目：选择项目，在”General”选项卡中设置团队、捆绑标识符和版本号在”Signing & Capabilities”选项卡中配置签名证书
2. 选择项目，在”General”选项卡中设置团队、捆绑标识符和版本号
3. 在”Signing & Capabilities”选项卡中配置签名证书
4. 选择目标设备（Generic iOS Device）或模拟器
5. 选择”Product” > “Archive”来创建归档
6. 在Organizer中，选择”Upload to App Store”或”Export”进行分发

在Xcode中配置项目：

• 选择项目，在”General”选项卡中设置团队、捆绑标识符和版本号
• 在”Signing & Capabilities”选项卡中配置签名证书

选择目标设备（Generic iOS Device）或模拟器

选择”Product” > “Archive”来创建归档

在Organizer中，选择”Upload to App Store”或”Export”进行分发

可以使用xcodebuild命令行工具进行打包：
  2. # 构建项目
  3. xcodebuild -workspace platforms/ios/MyApp.xcworkspace -scheme MyApp -configuration Release -destination generic/platform=iOS archive -archivePath MyApp.xcarchive
  5. # 导出IPA
  6. xcodebuild -exportArchive -archivePath MyApp.xcarchive -exportPath . -exportOptionsPlist exportOptions.plist
复制代码

其中，exportOptions.plist文件内容示例：
  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  4. <plist version="1.0">
  5. <dict>
  6.     <key>method</key>
  7.     <string>app-store</string>
  8.     <key>teamID</key>
  9.     <string>YOUR_TEAM_ID</string>
  10.     <key>uploadSymbols</key>
  11.     <true/>
  12.     <key>uploadBitcode</key>
  13.     <false/>
  14. </dict>
  15. </plist>
复制代码

6. Web应用打包

Ionic应用也可以作为Web应用发布：
  2. # 构建Web应用
  3. ionic build --prod
  5. # 构建后的文件位于www/目录
复制代码

可以将www目录中的内容部署到任何Web服务器上。例如，使用Firebase Hosting：
  2. # 安装Firebase CLI
  3. npm install -g firebase-tools
  5. # 登录Firebase
  6. firebase login
  8. # 初始化项目
  9. firebase init
  11. # 部署
  12. firebase deploy
复制代码

7. 常见问题及解决方案

7.1 Android打包问题

问题：构建时出现错误”Failed to install the following Android SDK packages”。

解决方案：

1. 打开Android Studio
2. 进入”Configure” > “SDK Manager”
3. 安装所需的SDK包
4. 设置ANDROID_HOME环境变量
  2. # 在~/.bashrc或~/.zshrc中添加
  3. export ANDROID_HOME=$HOME/Android/Sdk
  4. export PATH=$PATH:$ANDROID_HOME/tools
  5. export PATH=$PATH:$ANDROID_HOME/platform-tools
复制代码

问题：构建时Gradle下载超时。

解决方案：

1. 使用本地Gradle分发：下载Gradle：https://gradle.org/releases/解压到本地目录在platforms/android/cordova/lib/builders/GradleBuilder.js中修改Gradle分发URL
2. 下载Gradle：https://gradle.org/releases/
3. 解压到本地目录
4. 在platforms/android/cordova/lib/builders/GradleBuilder.js中修改Gradle分发URL
5. 或者使用镜像：在platforms/android/gradle.properties中添加：systemProp.org.gradle.internal.http.connectionTimeout=60000
systemProp.org.gradle.internal.http.socketTimeout=60000
systemProp.org.gradle.internal.repository.maven.MavenPomFileRetriever.disableMavenRepoCache=true
6. 在platforms/android/gradle.properties中添加：

使用本地Gradle分发：

• 下载Gradle：https://gradle.org/releases/
• 解压到本地目录
• 在platforms/android/cordova/lib/builders/GradleBuilder.js中修改Gradle分发URL

或者使用镜像：

• 在platforms/android/gradle.properties中添加：
  2. systemProp.org.gradle.internal.http.connectionTimeout=60000
  3. systemProp.org.gradle.internal.http.socketTimeout=60000
  4. systemProp.org.gradle.internal.repository.maven.MavenPomFileRetriever.disableMavenRepoCache=true
复制代码

问题：APK签名失败。

解决方案：

1. 确保密钥库和密码正确
2. 检查build.gradle中的签名配置
3. 使用以下命令验证签名：
  2. # 验证APK签名
  3. jarsigner -verify -verbose -certs my-app-release.apk
复制代码

7.2 iOS打包问题

问题：Xcode中签名失败，提示”No matching provisioning profile found”。

解决方案：

1. 登录Apple开发者账户：https://developer.apple.com/
2. 创建应用ID
3. 创建开发/分发证书
4. 创建配置文件
5. 在Xcode中配置正确的团队和配置文件

问题：CocoaPods安装失败或依赖解析错误。

解决方案：

1. 更新CocoaPods：
  2. # 更新CocoaPods
  3. sudo gem install cocoapods
  5. # 更新Pod仓库
  6. pod repo update
复制代码

1. 清理并重新安装Pods：
  2. # 清理Pod缓存
  3. pod cache clean --all
  5. # 删除Podfile.lock和Pods目录
  6. rm -rf platforms/ios/Pods platforms/ios/Podfile.lock
  8. # 重新安装Pods
  9. cd platforms/ios && pod install && cd ../..
复制代码

问题：构建时出现”Bitcode bundle could not be generated”错误。

解决方案：

1. 在Xcode中禁用Bitcode：选择项目目标在”Build Settings”中搜索”Bitcode”将”Enable Bitcode”设置为”NO”
2. 选择项目目标
3. 在”Build Settings”中搜索”Bitcode”
4. 将”Enable Bitcode”设置为”NO”
5. 或者在config.xml中添加：

在Xcode中禁用Bitcode：

• 选择项目目标
• 在”Build Settings”中搜索”Bitcode”
• 将”Enable Bitcode”设置为”NO”

或者在config.xml中添加：
  2. <platform name="ios">
  3.     <preference name="SwiftVersion" value="5.0" />
  4.     <preference name="UseLegacySwiftLanguageVersion" value="true" />
  5.     <preference name="SuppressBitcode" value="true" />
  6. </platform>
复制代码

7.3 跨平台问题

问题：应用启动后显示白屏。

解决方案：

1. 检查控制台错误
2. 确保Cordova插件正确安装
3. 添加错误处理：
  2. // 在app.component.ts中添加错误处理
  3. import { ErrorHandler } from '@angular/core';
  5. export class MyApp {
  6.   constructor(errorHandler: ErrorHandler) {
  7.     // 捕获全局错误
  8.     window.onerror = (message, source, lineno, colno, error) => {
  9.       console.error('Global error:', error);
  10.       return false;
  11.     };
  12.   }
  13. }
复制代码

1. 检查路由配置和懒加载模块

问题：应用运行缓慢或卡顿。

解决方案：

1. 使用Chrome DevTools分析性能
2. 启用生产模式构建：
  2. # 生产模式构建
  3. ionic build --prod
复制代码

1. 优化图片和资源
2. 使用虚拟滚动：
  2. <ion-virtual-scroll [items]="items">
  3.   <ion-item *virtualItem="let item">
  4.     {{ item }}
  5.   </ion-item>
  6. </ion-virtual-scroll>
复制代码

1. 避免过多的DOM操作

问题：Cordova插件在某些平台上不工作。

解决方案：

1. 检查插件是否支持目标平台
2. 更新插件版本：
  2. # 更新插件
  3. ionic cordova plugin update
复制代码

1. 添加平台特定的错误处理：
  2. // 使用插件前检查平台
  3. import { Platform } from '@ionic/angular';
  5. constructor(private platform: Platform) {}
  7. usePlugin() {
  8.   if (this.platform.is('android')) {
  9.     // Android特定代码
  10.   } else if (this.platform.is('ios')) {
  11.     // iOS特定代码
  12.   }
  13. }
复制代码

8. 发布流程

8.1 Android发布

1. 登录Google Play Console：https://play.google.com/console
2. 创建应用
3. 填写应用信息
4. 上传APK或AAB（Android App Bundle）
5. 配置内容评级
6. 设置价格和分发范围
7. 发布应用

Google推荐使用AAB格式发布应用：
  2. # 构建AAB
  3. ionic cordova build android --release --prod -- -- --bundle
复制代码

构建后的AAB文件位于：platforms/android/app/build/outputs/bundle/release/app-release.aab

8.2 iOS发布

1. 登录App Store Connect：https://appstoreconnect.apple.com/
2. 创建应用
3. 填写应用信息
4. 上传IPA
5. 配置价格和可用性
6. 提交审核

1. 下载并安装Application Loader
2. 使用Apple ID登录
3. 选择”Deliver Your App”
4. 上传IPA文件

1. 在Xcode中打开项目
2. 选择”Product” > “Archive”
3. 在Organizer中选择归档
4. 点击”Upload to App Store”

8.3 Web应用发布

可以将构建后的Web应用部署到任何静态托管服务：
  2. # 构建Web应用
  3. ionic build --prod
  5. # 使用Firebase Hosting部署
  6. firebase deploy
  8. # 使用Netlify部署
  9. netlify deploy --prod --dir=www
复制代码

将Ionic应用配置为PWA（Progressive Web App）：

1. 添加PWA支持：
  2. # 添加PWA支持
  3. ng add @angular/pwa
复制代码

1. 修改manifest.json：
  2. {
  3.   "name": "MyApp",
  4.   "short_name": "MyApp",
  5.   "theme_color": "#1976d2",
  6.   "background_color": "#ffffff",
  7.   "display": "standalone",
  8.   "orientation": "portrait",
  9.   "icons": [
  10.     {
  11.       "src": "assets/icon/icon-72x72.png",
  12.       "sizes": "72x72",
  13.       "type": "image/png"
  14.     },
  15.     // 更多图标尺寸
  16.   ]
  17. }
复制代码

1. 注册Service Worker：
  2. // 在app.module.ts中
  3. import { ServiceWorkerModule } from '@angular/service-worker';
  4. import { environment } from '../environments/environment';
  6. @NgModule({
  7.   imports: [
  8.     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  9.   ],
  10. })
  11. export class AppModule { }
复制代码

9. 最佳实践和优化建议

9.1 代码优化

使用懒加载提高应用启动速度：
  2. // 在app-routing.module.ts中
  3. const routes: Routes = [
  4.   {
  5.     path: 'home',
  6.     loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  7.   },
  8.   {
  9.     path: 'about',
  10.     loadChildren: () => import('./about/about.module').then(m => m.AboutPageModule)
  11.   }
  12. ];
复制代码

在*ngFor中使用trackBy提高列表性能：
  2. // 在组件中
  3. trackByFn(index: number, item: any): number {
  4.   return item.id; // 唯一标识符
  5. }
复制代码
  2. <!-- 在模板中 -->
  3. <ion-item *ngFor="let item of items; trackBy: trackByFn">
  4.   {{ item.name }}
  5. </ion-item>
复制代码

使用适当的图片格式和尺寸：
  2. <!-- 使用srcset提供不同尺寸的图片 -->
  3. <img [src]="imageUrl" [srcset]="imageSrcset" alt="Description">
复制代码
  2. // 在组件中
  3. imageUrl = 'assets/images/image-400w.jpg';
  4. imageSrcset = `
  5.   assets/images/image-200w.jpg 200w,
  6.   assets/images/image-400w.jpg 400w,
  7.   assets/images/image-800w.jpg 800w
  8. `;
复制代码

9.2 构建优化

通过自定义Webpack配置优化构建：
  2. // 在angular.json中修改配置
  3. "architect": {
  4.   "build": {
  5.     "options": {
  6.       "outputPath": "www",
  7.       "index": "src/index.html",
  8.       "main": "src/main.ts",
  9.       "polyfills": "src/polyfills.ts",
  10.       "tsConfig": "tsconfig.app.json",
  11.       "assets": [
  12.         "src/favicon.ico",
  13.         "src/assets"
  14.       ],
  15.       "styles": [
  16.         "src/theme/variables.scss",
  17.         "src/global.scss"
  18.       ],
  19.       "scripts": []
  20.     },
  21.     "configurations": {
  22.       "production": {
  23.         "fileReplacements": [
  24.           {
  25.             "replace": "src/environments/environment.ts",
  26.             "with": "src/environments/environment.prod.ts"
  27.           }
  28.         ],
  29.         "optimization": true,
  30.         "outputHashing": "all",
  31.         "sourceMap": false,
  32.         "extractCss": true,
  33.         "namedChunks": false,
  34.         "aot": true,
  35.         "extractLicenses": true,
  36.         "vendorChunk": false,
  37.         "buildOptimizer": true,
  38.         "budgets": [
  39.           {
  40.             "type": "initial",
  41.             "maximumWarning": "2mb",
  42.             "maximumError": "5mb"
  43.           },
  44.           {
  45.             "type": "anyComponentStyle",
  46.             "maximumWarning": "6kb",
  47.             "maximumError": "10kb"
  48.           }
  49.         ]
  50.       }
  51.     }
  52.   }
  53. }
复制代码

在构建时启用压缩：
  2. # 生产环境构建
  3. ionic build --prod -- --gzip
复制代码

9.3 持续集成/持续部署（CI/CD）

创建.github/workflows/build.yml文件：
  2. name: Build and Deploy
  4. on:
  5.   push:
  6.     branches: [ main ]
  8. jobs:
  9.   build:
  10.     runs-on: ubuntu-latest
  11.    
  12.     steps:
  13.     - uses: actions/checkout@v2
  14.    
  15.     - name: Setup Node.js
  16.       uses: actions/setup-node@v2
  17.       with:
  18.         node-version: '14'
  19.         
  20.     - name: Install dependencies
  21.       run: npm ci
  22.       
  23.     - name: Build for production
  24.       run: npm run build -- --prod
  25.       
  26.     - name: Upload artifact
  27.       uses: actions/upload-artifact@v2
  28.       with:
  29.         name: www
  30.         path: www/
  31.         
  32.   deploy-android:
  33.     needs: build
  34.     runs-on: ubuntu-latest
  35.    
  36.     steps:
  37.     - uses: actions/checkout@v2
  38.    
  39.     - name: Setup Node.js
  40.       uses: actions/setup-node@v2
  41.       with:
  42.         node-version: '14'
  43.         
  44.     - name: Install dependencies
  45.       run: npm ci
  46.       
  47.     - name: Download artifact
  48.       uses: actions/download-artifact@v2
  49.       with:
  50.         name: www
  51.         path: www/
  52.         
  53.     - name: Setup Java
  54.       uses: actions/setup-java@v2
  55.       with:
  56.         distribution: 'adopt'
  57.         java-version: '11'
  58.         
  59.     - name: Setup Android SDK
  60.       uses: android-actions/setup-android@v2
  61.       
  62.     - name: Add Android platform
  63.       run: npx cordova platform add android
  64.       
  65.     - name: Build Android
  66.       run: npx cordova build android --release --prod
  67.       
  68.     - name: Sign APK
  69.       run: |
  70.         echo $ANDROID_KEYSTORE_BASE64 | base64 -d > keystore.jks
  71.         jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore keystore.jks -storepass $ANDROID_KEYSTORE_PASSWORD -keypass $ANDROID_KEY_PASSWORD platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk $ANDROID_KEY_ALIAS
  72.         $ANDROID_HOME/build-tools/30.0.3/zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk myapp.apk
  73.       env:
  74.         ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
  75.         ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
  76.         ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
  77.         ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
  78.         
  79.     - name: Upload APK
  80.       uses: actions/upload-artifact@v2
  81.       with:
  82.         name: myapp.apk
  83.         path: myapp.apk
复制代码

配置Fastlane简化Android和iOS发布流程：

1. 安装Fastlane：
  2. # 安装Fastlane
  3. brew install fastlane
复制代码

1. 初始化Fastlane：
  2. # 在项目根目录
  3. cd platforms/android
  4. fastlane init
  6. # 对于iOS
  7. cd ../ios
  8. fastlane init
复制代码

1. 创建Fastfile：
  2. # platforms/android/fastlane/Fastfile
  3. platform :android do
  4.   desc "Build a signed APK"
  5.   lane :build do
  6.     gradle(
  7.       task: 'assemble',
  8.       build_type: 'Release',
  9.       properties: {
  10.         "android.injected.signing.store.file" => "../my-release-key.keystore",
  11.         "android.injected.signing.store.password" => ENV['ANDROID_KEYSTORE_PASSWORD'],
  12.         "android.injected.signing.key.alias" => ENV['ANDROID_KEY_ALIAS'],
  13.         "android.injected.signing.key.password" => ENV['ANDROID_KEY_PASSWORD']
  14.       }
  15.     )
  16.   end
  18.   desc "Upload to Google Play"
  19.   lane :upload do
  20.     upload_to_play_store(
  21.       track: 'internal',
  22.       aab: '../app/build/outputs/bundle/release/app-release.aab'
  23.     )
  24.   end
  25. end
复制代码
  2. # platforms/ios/fastlane/Fastfile
  3. platform :ios do
  4.   desc "Build and sign the app"
  5.   lane :build do
  6.     match(
  7.       type: "appstore",
  8.       readonly: is_ci
  9.     )
  10.     gym(
  11.       scheme: "MyApp",
  12.       export_method: "app-store"
  13.     )
  14.   end
  16.   desc "Upload to App Store"
  17.   lane :upload do
  18.     upload_to_app_store(
  19.       skip_metadata: true,
  20.       skip_screenshots: true,
  21.       force: true
  22.     )
  23.   end
  24. end
复制代码

1. 运行Fastlane：
  2. # 构建Android
  3. cd platforms/android && fastlane build
  5. # 上传Android
  6. cd platforms/android && fastlane upload
  8. # 构建iOS
  9. cd platforms/ios && fastlane build
  11. # 上传iOS
  12. cd platforms/ios && fastlane upload
复制代码

10. 结论

Ionic项目打包是一个复杂但有序的过程，涉及开发环境配置、项目开发、资源准备、平台打包和发布等多个环节。通过本文的详细介绍，开发者应该能够掌握从开发到发布的完整流程，并能够解决打包过程中遇到的常见问题。

随着Ionic框架的不断演进，打包流程可能会有所变化，但基本原理和最佳实践仍然适用。建议开发者持续关注Ionic官方文档和社区动态，以便及时了解最新的开发工具和最佳实践。

最后，合理利用自动化工具（如CI/CD和Fastlane）可以显著提高打包和发布效率，减少人为错误，使开发者能够更专注于应用功能的开发和优化。
管理器, 跨平台, 全攻略
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则