HarmonyOS配置化应用架构——一套代码生成多款APP

技术栈：HarmonyOS 5.0 + ArkTS + 配置驱动架构

适用场景：系列应用开发、多品牌定制、快速迭代

前言

在开发声音工具类应用时，我们发现手机排水、听力测试、冥想助手等功能有很多共同点。本文将介绍如何通过配置化架构，用一套代码生成多款不同的APP。

一、架构设计思路

1.1 共性分析

功能	音频类型	频率范围	时长	震动
手机排水	纯音	100-300Hz	15-120s	是
听力测试	纯音	20-20000Hz	3-10s	否
冥想助手	噪音	1-50Hz	5-30min	否
专注模式	噪音	-	25-60min	否

1.2 配置化方案

将应用的差异点抽象为配置：

基础信息：应用ID、名称、图标
主题配置：颜色、动画类型
功能配置：音频类型、频率、时长
文案配置：标题、按钮文字、说明

二、配置接口定义

export interface AppConfig {appId: string;appName: string;appDescription: string;appIcon: string;theme: ThemeConfig;feature: FeatureConfig;content: ContentConfig;
}export interface ThemeConfig {primaryColor: string;secondaryColor: string;backgroundColor: string;buttonGradientStart: string;buttonGradientEnd: string;animationType: 'water' | 'wave' | 'pulse' | 'ripple';
}export interface FeatureConfig {audioType: 'tone' | 'noise' | 'sweep' | 'none';defaultFrequency: number;minFrequency: number;maxFrequency: number;frequencyPresets: FrequencyPreset[];waveformType: 'sine' | 'square' | 'triangle' | 'sawtooth';noiseType?: 'white' | 'pink' | 'brown';defaultDuration: number;durationOptions: number[];enableVibration: boolean;vibrationPattern: number[];defaultVolume: number;maxVolume: number;
}export interface FrequencyPreset {name: string;frequency: number;description: string;icon?: string;
}export interface ContentConfig {mainTitle: string;mainSubtitle: string;startButtonText: string;stopButtonText: string;guideTitle: string;guideSteps: GuideStep[];guideTips: string[];principleTitle: string;principleContent: string;privacyPolicy: string;userAgreement: string;
}

三、具体配置示例

3.1 手机排水配置

export const WaterEjectorConfig: AppConfig = {appId: 'water_ejector',appName: '手机排水大师',appDescription: '利用声波震动原理，快速排出手机积水',appIcon: 'app_icon_water',theme: {primaryColor: '#4ECDC4',secondaryColor: '#A8E6CF',backgroundColor: '#F8F9FA',buttonGradientStart: '#4ECDC4',buttonGradientEnd: '#44A08D',animationType: 'water'},feature: {audioType: 'tone',defaultFrequency: 165,minFrequency: 100,maxFrequency: 300,frequencyPresets: [{ name: '标准排水', frequency: 165, description: '适用于大多数情况' },{ name: '深度清理', frequency: 200, description: '顽固积水推荐' },{ name: '轻柔模式', frequency: 120, description: '轻微进水使用' }],waveformType: 'sine',defaultDuration: 30,durationOptions: [15, 30, 60, 120],enableVibration: true,vibrationPattern: [100, 50, 100, 50],defaultVolume: 0.8,maxVolume: 1.0},content: {mainTitle: '手机排水大师',mainSubtitle: '声波震动 · 快速排水',startButtonText: '开始排水',stopButtonText: '停止',// ...}
};

3.2 冥想助手配置

export const MeditationConfig: AppConfig = {appId: 'meditation',appName: '冥想助手',appDescription: '双耳节拍放松大脑',appIcon: 'app_icon_meditation',theme: {primaryColor: '#673AB7',animationType: 'wave'},feature: {audioType: 'noise',defaultFrequency: 10,frequencyPresets: [{ name: 'Delta 深睡', frequency: 2, description: '0.5-4Hz' },{ name: 'Theta 冥想', frequency: 6, description: '4-8Hz' },{ name: 'Alpha 放松', frequency: 10, description: '8-12Hz' }],noiseType: 'pink',defaultDuration: 600,durationOptions: [300, 600, 900, 1800],enableVibration: false,// ...},// ...
};

四、配置管理器

import { AppConfig } from './AppConfig';
import { WaterEjectorConfig } from './WaterEjectorConfig';
import { HearingTestConfig } from './HearingTestConfig';
import { MeditationConfig } from './MeditationConfig';let currentAppId: string = 'water_ejector';const CONFIG_MAP: Map<string, AppConfig> = new Map([['water_ejector', WaterEjectorConfig],['hearing_test', HearingTestConfig],['meditation', MeditationConfig],
]);export function getAppConfig(): AppConfig {const config = CONFIG_MAP.get(currentAppId);if (!config) throw new Error(`未找到配置: ${currentAppId}`);return config;
}export function setCurrentAppId(appId: string): boolean {if (CONFIG_MAP.has(appId)) {currentAppId = appId;return true;}return false;
}export function getAllConfigs(): AppConfig[] {return Array.from(CONFIG_MAP.values());
}

五、页面中使用配置

@Entry
@Component
struct MainPage {@State private config: AppConfig = getAppConfig();build() {Column() {Text(this.config.content.mainTitle).fontSize(28)Text(this.config.content.mainSubtitle).fontSize(16)Button(this.config.content.startButtonText).linearGradient({colors: [[this.config.theme.buttonGradientStart, 0],[this.config.theme.buttonGradientEnd, 1]]})}.backgroundColor(this.config.theme.backgroundColor)}
}