SuperAPI AI 工具集

ionic-angular

前端与建站

查看项目

更新于 10-15 21:39

技能介绍

用途:该资料是一份 Ionic + Angular 应用开发规范(SKILL 文件),用于指导构建基于 Capacitor 的生产级移动应用。它本身不是项目,明确要求不要在此运行 npm install;新建项目时应先索取项目路径,或在单独目录中搭建。

主要能力:涵盖项目搭建与结构、应用配置(main.ts、app.config.ts)、懒加载路由与标签导航、引导页(视频背景 + Swiper)、付费墙(RevenueCat,周/年订阅,紧随引导页展示)、设置页(语言、主题、通知、去广告、重置引导)、Signals 状态管理、服务层、内置控制流、无障碍、@defer 懒渲染、i18n(@ngx-translate/core)、最佳实践与构建命令;原生插件(AdMob、RevenueCat、推送、存储、主题)位于同级 ionic-shared/references 引用。

必要用法:使用 ion-tabs + ion-tab-bar,不得自建标签栏或引入第三方标签库。需安装的库命令为 npm install @capacitor/preferences @capacitor/push-notifications @capacitor/splash-screen @capacitor/status-bar @revenuecat/purchases-capacitor @capacitor-community/admob @ngx-translate/core @ngx-translate/http-loader swiper。完成前需依次执行 npm install、npx ng build、npx cap sync,构建须无错误,且每次 Web 构建后在原生端测试前都需 cap sync。

硬性规则:新页面/组件禁用 NgModules,使用独立组件;独立组件中不得用 IonicModule,需单独导入 IonContent、IonButton 等;@Component 禁止内联模板或样式,须用 templateUrl 与 styleUrls 分离 .html/.ts/.scss;禁用已弃用的 @angular/http,改用 @angular/common/http;禁用 any 类型;优先 Signals(signal、computed、effect),服务暴露只读 signal,避免 developer preview/experimental 特性(如 linkedSignal、resource、Signal Forms);新组件使用 signal inputs/outputs。

适用场景与限制:适用于按该规范搭建 Ionic Angular + Capacitor 移动应用的开发者。具体页面实现细节、原生插件配置内容需查阅对应引用文件,资料未在此展开。