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

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

概述

外观设置模块是福报养成计应用中的一个视觉定制功能，它为用户提供了多种应用主题和外观选项。用户可以根据自己的审美偏好选择不同的主题，如浅色主题、深色主题等。这个模块的设计目的是为用户提供舒适的视觉体验，减少长时间使用应用时的眼睛疲劳。

外观设置模块支持多种主题选项。系统预定义了多个主题，用户可以实时预览主题效果。用户选择主题后，系统会立即应用新主题，整个应用的外观会相应改变。用户的主题选择会被保存，下次打开应用时会应用用户选择的主题。

完整流程

第一部分：主题展示与预览

系统展示所有可用的主题选项，包括浅色主题、深色主题等。用户可以点击主题卡片预览该主题的效果。系统会在预览区域展示应用在该主题下的外观。

第二部分：主题选择与应用

用户选择喜欢的主题。系统立即应用新主题，整个应用的颜色、字体等外观元素会相应改变。用户可以看到实时的主题变化效果。

第三部分：主题保存与持久化

系统将用户选择的主题保存到本地存储。下次打开应用时，系统会自动加载用户选择的主题。用户可以随时更改主题选择。到本地存储。

Web 代码实现

html 复制代码

<div class="appearance-container">
  <h1>外观设置</h1>
  <div class="theme-selector">
    <button class="theme-btn" data-theme="light" onclick="setTheme('light')">浅色</button>
    <button class="theme-btn" data-theme="dark" onclick="setTheme('dark')">深色</button>
    <button class="theme-btn" data-theme="auto" onclick="setTheme('auto')">自动</button>
  </div>

  <div class="color-picker">
    <label>主题色</label>
    <input type="color" id="primaryColor" onchange="setColor()">
  </div>

  <div class="font-selector">
    <label>字体大小</label>
    <select id="fontSize" onchange="setFont()">
      <option value="small">小</option>
      <option value="medium">中</option>
      <option value="large">大</option>
    </select>
  </div>
</div>

HTML 结构包含主题选择按钮、颜色选择器和字体大小选择器。

JavaScript 逻辑

javascript 复制代码

class AppearanceModule {
  setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);

    cordova.exec(
      (result) => {
        console.log('主题已更新');
      },
      (error) => console.error('更新主题失败:', error),
      'AppearancePlugin',
      'setTheme',
      [{ theme }]
    );
  }

  setColor() {
    const color = document.getElementById('primaryColor').value;
    document.documentElement.style.setProperty('--primary-color', color);

    cordova.exec(
      (result) => {
        console.log('颜色已更新');
      },
      (error) => console.error('更新颜色失败:', error),
      'AppearancePlugin',
      'setColor',
      [{ color }]
    );
  }

  setFont() {
    const size = document.getElementById('fontSize').value;
    document.documentElement.setAttribute('data-font-size', size);

    cordova.exec(
      (result) => {
        console.log('字体已更新');
      },
      (error) => console.error('更新字体失败:', error),
      'AppearancePlugin',
      'setFont',
      [{ size }]
    );
  }
}

const appearanceModule = new AppearanceModule();

JavaScript 代码实时更新DOM的主题属性和CSS变量，同时通过Cordova调用原生插件保存用户的外观设置。

原生代码

typescript 复制代码

export class AppearancePlugin {
  setTheme(params: any, callback: (success: boolean) => void): void {
    try {
      const db = this.getDatabase();
      const userId = this.getUserId();

      db.execute(
        'UPDATE settings SET theme = ? WHERE user_id = ?',
        [params.theme, userId]
      );

      callback(true);
    } catch (error) {
      callback(false);
    }
  }

  private getDatabase(): any { return null; }
  private getUserId(): string { return ''; }
}

原生代码将用户的主题选择保存到数据库，确保用户的外观设置在应用重启后仍然生效。

📝 总结

外观设置模块提供了丰富的自定义选项，满足用户的个性化需求。关键技术包括：主题切换、CSS变量、设置持久化等。通过 Cordova 与 OpenHarmony 的结合，实现了完整的外观设置功能。