外观设置模块 - Cordova与OpenHarmony混合开发实战

2401_87952201

507人浏览 · 2025-12-23 13:46:52

2401_87952201 · 2025-12-23 13:46:52 发布

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

📌 概述

外观设置模块用于管理应用的视觉外观。这个模块提供了主题、颜色、字体等外观定制选项。通过Cordova框架，我们能够在Web层实现灵活的外观定制界面，同时利用OpenHarmony的主题能力应用外观设置。

外观设置模块采用了实时预览设计，用户修改外观设置时可以立即看到效果。

🔗 完整流程

外观加载流程：应用启动时加载用户保存的外观设置。如果没有保存的设置，应用使用系统默认的外观。

外观修改流程：用户在外观设置页面修改各项外观选项。修改后，应用立即应用新的外观设置。

外观保存流程：用户确认修改后，应用将外观设置保存到数据库。

🔧 Web代码实现

// 加载外观设置
async function loadAppearanceSettings() {
    try {
        const settings = await db.getAppearanceSettings();
        return settings || getDefaultAppearance();
    } catch (error) {
        console.error('加载外观设置失败:', error);
        return getDefaultAppearance();
    }
}

// 获取默认外观
function getDefaultAppearance() {
    return {
        primaryColor: '#409EFF',
        accentColor: '#67c23a',
        backgroundColor: '#ffffff',
        textColor: '#333333',
        borderRadius: 'medium'
    };
}

// 应用外观设置
function applyAppearance(appearance) {
    const root = document.documentElement;
    root.style.setProperty('--primary-color', appearance.primaryColor);
    root.style.setProperty('--accent-color', appearance.accentColor);
    root.style.setProperty('--background-color', appearance.backgroundColor);
    root.style.setProperty('--text-color', appearance.textColor);
}

// 保存外观设置
async function saveAppearanceSettings(appearance) {
    try {
        await db.updateAppearanceSettings(appearance);
        applyAppearance(appearance);
        showSuccess('外观设置已保存');
    } catch (error) {
        showError('保存失败: ' + error.message);
    }
}

这些函数处理外观设置的加载和应用。

// 渲染外观设置页面
async function renderAppearance() {
    const appearance = await loadAppearanceSettings();
    
    const html = `
        <div class="appearance-container">
            <div class="appearance-header">
                <h1>外观设置</h1>
            </div>
            
            <div class="appearance-form">
                <div class="color-settings">
                    <h2>颜色设置</h2>
                    
                    <div class="color-item">
                        <label>主色</label>
                        <div class="color-picker">
                            <input type="color" id="primary-color" value="${appearance.primaryColor}" onchange="updateAppearance('primaryColor', this.value)">
                            <span class="color-value">${appearance.primaryColor}</span>
                        </div>
                    </div>
                    
                    <div class="color-item">
                        <label>强调色</label>
                        <div class="color-picker">
                            <input type="color" id="accent-color" value="${appearance.accentColor}" onchange="updateAppearance('accentColor', this.value)">
                            <span class="color-value">${appearance.accentColor}</span>
                        </div>
                    </div>
                </div>
                
                <div class="preview-section">
                    <h2>预览</h2>
                    <div class="preview-box" style="background-color: ${appearance.backgroundColor}; color: ${appearance.textColor};">
                        <button class="btn-primary" style="background-color: ${appearance.primaryColor};">主按钮</button>
                        <button class="btn-secondary" style="background-color: ${appearance.accentColor};">次按钮</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('page-container').innerHTML = html;
}

// 更新外观设置
async function updateAppearance(key, value) {
    const appearance = await loadAppearanceSettings();
    appearance[key] = value;
    applyAppearance(appearance);
}

这个渲染函数生成了外观设置界面，包括颜色选择和实时预览。

🔌 原生代码实现

// AppearancePlugin.ets - 外观设置原生插件
import { fileIo } from '@kit.BasicServicesKit';

@Entry
@Component
struct AppearancePlugin {
    // 获取系统主题
    getSystemTheme(callback: (theme: string) => void): void {
        try {
            // 获取系统主题
            let theme = 'light';
            callback(theme);
        } catch (error) {
            console.error('[AppearancePlugin] 获取系统主题失败:', error);
            callback('light');
        }
    }
    
    build() {
        Column() {
            Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() })
        }
    }
}

这个原生插件提供了系统主题的获取功能。

Web-Native通信代码

// 获取系统主题
function getNativeTheme() {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (theme) => {
                resolve(theme);
            },
            (error) => {
                console.error('获取系统主题失败:', error);
                reject(error);
            },
            'AppearancePlugin',
            'getSystemTheme',
            []
        );
    });
}