旅行记录应用外观设置 - Cordova & OpenHarmony 混合开发实战

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

外观设置功能允许用户自定义应用的外观，包括主题、字体大小、配色方案等。外观设置提供了视觉上的个性化体验。在 Cordova 与 OpenHarmony 的混合开发框架中，外观设置需要实现主题切换和样式应用。

🔗 完整流程

第一步：主题定义与管理

外观设置需要定义多个主题，每个主题包含不同的颜色、字体等样式。主题需要保存到数据库中。

第二步：主题切换与应用

用户选择主题后，应用需要立即应用新的样式。主题切换需要更新 CSS 变量或动态加载样式表。

第三步：原生层主题同步与系统集成

OpenHarmony 原生层可以与系统主题集成，自动应用系统主题。

🔧 Web 代码实现

外观设置页面 HTML 结构

html 复制代码

<div id="appearance-page" class="page">
    <div class="page-header">
        <h1>外观设置</h1>
    </div>
    
    <div class="appearance-container">
        <div class="appearance-group">
            <h3>主题</h3>
            <div class="theme-selector">
                <button class="theme-option" onclick="applyTheme('light')">
                    ☀️ 浅色
                </button>
                <button class="theme-option" onclick="applyTheme('dark')">
                    🌙 深色
                </button>
                <button class="theme-option" onclick="applyTheme('auto')">
                    🔄 自动
                </button>
            </div>
        </div>
        
        <div class="appearance-group">
            <h3>字体大小</h3>
            <div class="font-size-selector">
                <input type="range" id="fontSize" min="12" max="20" value="14" 
                       onchange="applyFontSize(this.value)">
                <span id="fontSizeValue">14px</span>
            </div>
        </div>
        
        <div class="appearance-group">
            <h3>配色方案</h3>
            <div class="color-selector">
                <button class="color-option" style="background-color: #409EFF;" 
                        onclick="applyColor('#409EFF')">蓝色</button>
                <button class="color-option" style="background-color: #67c23a;" 
                        onclick="applyColor('#67c23a')">绿色</button>
                <button class="color-option" style="background-color: #e6a23c;" 
                        onclick="applyColor('#e6a23c')">橙色</button>
                <button class="color-option" style="background-color: #f56c6c;" 
                        onclick="applyColor('#f56c6c')">红色</button>
            </div>
        </div>
    </div>
</div>

HTML 结构包含主题选择、字体大小和配色方案。

应用主题函数

javascript 复制代码

async function applyTheme(theme) {
    try {
        // 保存主题设置
        const settings = await db.getSettings();
        settings.theme = theme;
        await db.updateSettings(settings);
        
        // 应用主题
        if (theme === 'light') {
            document.documentElement.style.colorScheme = 'light';
            document.body.classList.remove('dark-theme');
        } else if (theme === 'dark') {
            document.documentElement.style.colorScheme = 'dark';
            document.body.classList.add('dark-theme');
        } else if (theme === 'auto') {
            // 根据系统设置自动选择
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (prefersDark) {
                document.body.classList.add('dark-theme');
            } else {
                document.body.classList.remove('dark-theme');
            }
        }
        
        showToast('主题已应用');
        
        // 通知原生层
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Theme applied:', result),
                (error) => console.error('Apply error:', error),
                'AppearancePlugin',
                'applyTheme',
                [{ theme: theme, timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error applying theme:', error);
        showToast('应用主题失败');
    }
}

应用主题函数切换应用主题。

应用字体大小函数

javascript 复制代码

async function applyFontSize(size) {
    try {
        // 更新 UI
        document.getElementById('fontSizeValue').textContent = `${size}px`;
        
        // 应用字体大小
        document.documentElement.style.fontSize = `${size}px`;
        
        // 保存设置
        const settings = await db.getSettings();
        settings.fontSize = parseInt(size);
        await db.updateSettings(settings);
        
        showToast('字体大小已应用');
    } catch (error) {
        console.error('Error applying font size:', error);
        showToast('应用字体大小失败');
    }
}

应用配色方案函数

javascript 复制代码

async function applyColor(color) {
    try {
        // 应用主色
        document.documentElement.style.setProperty('--primary-color', color);
        
        // 保存设置
        const settings = await db.getSettings();
        settings.primaryColor = color;
        await db.updateSettings(settings);
        
        showToast('配色方案已应用');
        
        // 通知原生层
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Color applied:', result),
                (error) => console.error('Apply error:', error),
                'AppearancePlugin',
                'applyColor',
                [{ color: color, timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error applying color:', error);
        showToast('应用配色方案失败');
    }
}

应用配色方案函数改变应用的主色。

🔌 OpenHarmony 原生代码实现

外观设置插件

typescript 复制代码

// AppearancePlugin.ets
import { BusinessError } from '@ohos.base';

export class AppearancePlugin {
    // 应用主题
    applyTheme(args: any, callback: Function): void {
        try {
            const theme = args[0].theme;
            
            console.log(`[Appearance] Theme applied: ${theme}`);
            
            callback({ success: true, message: '主题已应用' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
    
    // 应用配色方案
    applyColor(args: any, callback: Function): void {
        try {
            const color = args[0].color;
            
            console.log(`[Appearance] Color applied: ${color}`);
            
            callback({ success: true, message: '配色方案已应用' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

外观设置插件处理主题和配色方案应用。

📝 总结

外观设置功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个主题管理系统。Web 层负责外观 UI 和样式应用，原生层负责系统集成。通过外观设置，用户可以个性化应用的视觉体验。