从零到一开发鸿蒙 6 原生时钟应用：uni-app x 完全实战指南

- 核心框架：uni-app x（专为鸿蒙6优化）
- 开发语言：UTS（TypeScript 超集，编译为鸿蒙原生代码）
- 前端框架：Vue 3 Composition API
- 样式方案：SCSS + Material Design
- 数据存储：uni.storage → 鸿蒙6 Preferences API
- 目标平台：HarmonyOS 6（纯血鸿蒙系统）
- API版本：HarmonyOS API 18+

✅ 操作系统：
   - Windows 10/11（64位）
   - macOS 12.0+

✅ 开发工具：
   - HBuilderX 4.0+（内置 uni-app x + 鸿蒙6支持）
   - 下载地址：https://www.dcloud.io/hbuilderx.html

✅ 鸿蒙开发套件：
   - HarmonyOS 6 SDK（API Level 18+）
   - DevEco Studio（可选，用于查看API文档）
   - 下载地址：https://developer.huawei.com

✅ 开发语言：
   - UTS（uni-app TypeScript，编译为鸿蒙原生代码）

✅ 运行时：
   - Node.js 18.0+（LTS版本）
   - npm 9.0+ 或 pnpm 8.0+

{
  "name": "simpleclock",
"appid": "your_app_id",
"description": "多功能时钟应用",
"versionName": "1.0.0",
"versionCode": "100",
"uni-app-x": {
    "harmony": {
      "minAPIVersion": "12",
      "targetAPIVersion": "12",
      "compatibleAPIVersion": "12",
      "abilities": [
        {
          "name": "MainAbility",
          "description": "时钟应用主界面"
        }
      ],
      "permissions": [
        "ohos.permission.KEEP_BACKGROUND_RUNNING",
        "ohos.permission.NOTIFICATION_CONTROLLER",
        "ohos.permission.VIBRATE"
      ]
    }
  }
}

simpleclock/
├── pages/
│   ├── index/         # 时钟页面（世界时钟）
│   ├── alarm/         # 闹钟页面
│   ├── stopwatch/     # 秒表页面
│   ├── timer/         # 计时器页面
│   └── settings/      # 设置页面
├── App.uvue           # 应用入口（.uvue 是 uni-app x 专用格式）
├── pages.json         # 页面配置
├── uni.scss           # 全局样式变量
└── manifest.json      # 应用配置（含鸿蒙配置）

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#FF6B00",
    "backgroundColor": "#2C2C2C",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "时钟"
      },
      {
        "pagePath": "pages/alarm/alarm",
        "text": "闹钟"
      },
      {
        "pagePath": "pages/stopwatch/stopwatch",
        "text": "秒表"
      },
      {
        "pagePath": "pages/timer/timer",
        "text": "计时器"
      }
    ]
  }
}

// #ifdef APP-HARMONY
// 鸿蒙平台特有代码
import { vibrator } from '@kit.SensorServiceKit'
import { notificationManager } from '@kit.NotificationKit'
// #endif

// #ifdef APP-ANDROID
// Android 平台代码
// #endif

// #ifndef APP-HARMONY
// 非鸿蒙平台代码
// #endif

/* Material Design 深色主题颜色 */
$primary-color: #FF6B00;        // 主色调（橙色）
$background-dark: #212121;      // 深色背景
$background-card: #2C2C2C;      // 卡片背景
$background-elevated: #3A3A3A;  // 高亮背景

$text-primary: #FFFFFF;         // 主要文本
$text-secondary: #CCCCCC;       // 次要文本
$text-disabled: #999999;        // 禁用文本

export default {
  data() {
    return {
      currentTime: '9:23',
      period: 'a.m.',
      currentDate: 'Mon, 18 January',
      timeFormat: 12,
      timer: null
    }
  },
  onLoad() {
    this.updateTime()
    this.startTimer()
  },
methods: {
    updateTime() {
      const now = newDate()
      const hours = now.getHours()
      const minutes = now.getMinutes()

      if (this.timeFormat === 12) {
        const displayHours = hours % 12 || 12
        this.currentTime = displayHours + ':' +
          (minutes < 10 ? '0' : '') + minutes
        this.period = hours >= 12 ? 'p.m.' : 'a.m.'
      } else {
        this.currentTime = (hours < 10 ? '0' : '') + hours + ':' +
          (minutes < 10 ? '0' : '') + minutes
        this.period = ''
      }
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.updateTime()
      }, 1000)
    }
  }
}

setTimeFormat(format) {
  this.timeFormat = format
  this.updateTime()
  // 在鸿蒙平台会自动使用 Preferences API
  uni.setStorageSync('timeFormat', format)
}

// 鸿蒙平台的存储路径
// /data/storage/el2/base/preferences/时钟应用/

// #ifdef APP-HARMONY
import { systemDateTime } from '@kit.BasicServicesKit'

// 获取鸿蒙系统时间（更精确）
const harmonyTime = systemDateTime.getCurrentTime()
// #endif

// manifest.json - 鸿蒙权限配置
{
  "uni-app-x": {
    "harmony": {
      "permissions": [
        "ohos.permission.NOTIFICATION_CONTROLLER",  // 通知权限
        "ohos.permission.VIBRATE",                  // 振动权限
        "ohos.permission.KEEP_BACKGROUND_RUNNING"   // 后台运行
      ],
      "backgroundModes": ["dataTransfer", "audioPlayback"]
    }
  }
}

// 运行时请求权限（鸿蒙平台）
// #ifdef APP-HARMONY
import { abilityAccessCtrl } from'@kit.AbilityKit'

asyncfunction requestPermissions() {
const atManager = abilityAccessCtrl.createAtManager()
try {
    await atManager.requestPermissionsFromUser(getContext(), [
      'ohos.permission.NOTIFICATION_CONTROLLER',
      'ohos.permission.VIBRATE'
    ])
  } catch (err) {
    console.error('权限申请失败', err)
  }
}
// #endif

{
  time: '08:00',              // 时间
label: '起床',              // 标签
repeat: [false, true, ...], // 重复（周日到周六）
ringtone: 0,                // 铃声索引
vibrate: true,              // 振动
gradualVolume: true,        // 音量渐增
snooze: 10,                 // 贪睡时长（分钟）
enabled: true               // 是否启用
}

methods: {
  // 加载闹钟
  loadAlarms() {
    const saved = uni.getStorageSync('alarms')
    if (saved) {
      this.alarms = JSON.parse(saved)
    }
  },

// 保存闹钟
  saveAlarms() {
    uni.setStorageSync('alarms', JSON.stringify(this.alarms))
  },

// 添加/编辑闹钟
  saveAlarm() {
    if (this.editIndex >= 0) {
      // 编辑现有闹钟
      this.alarms[this.editIndex] = this.editAlarmData
    } else {
      // 添加新闹钟
      this.alarms.push(this.editAlarmData)
    }
    this.saveAlarms()
    this.closeDialog()
  },

// 删除闹钟
  deleteAlarm() {
    uni.showModal({
      title: '确认删除',
      content: '确定要删除这个闹钟吗？',
      success: (res) => {
        if (res.confirm) {
          this.alarms.splice(this.editIndex, 1)
          this.saveAlarms()
        }
      }
    })
  }
}

// #ifdef APP-HARMONY
import notificationManager from'@ohos.notificationManager'

// 发送鸿蒙通知
asyncfunction sendAlarmNotification(alarmData) {
const notificationRequest = {
    id: alarmData.id,
    content: {
      contentType: notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
      normal: {
        title: '闹钟提醒',
        text: alarmData.label || '该起床了！',
        additionalText: newDate().toLocaleTimeString()
      }
    },
    actionButtons: [
      {
        title: '贪睡',
        wantAgent: createSnoozeWantAgent()
      },
      {
        title: '关闭',
        wantAgent: createCloseWantAgent()
      }
    ]
  }

try {
    await notificationManager.publish(notificationRequest)
  } catch (err) {
    console.error('通知发送失败', err)
  }
}
// #endif

// 跨平台兼容写法
function sendNotification(alarmData) {
// #ifdef APP-HARMONY
  sendAlarmNotification(alarmData)
// #endif

// #ifndef APP-HARMONY
  uni.showModal({
    title: '闹钟提醒',
    content: alarmData.label || '该起床了！'
  })
// #endif
}

// #ifdef APP-HARMONY
import vibrator from'@ohos.vibrator'

// 鸿蒙振动效果
function vibrateHarmony() {
try {
    // 预定义振动效果
    vibrator.startVibration({
      type: 'preset',
      effectId: 'haptic.clock.timer',
      count: 3
    })

    // 或自定义振动
    vibrator.startVibration({
      type: 'time',
      duration: 1000
    })
  } catch (err) {
    console.error('振动失败', err)
  }
}
// #endif

// 跨平台振动封装
function triggerVibration() {
// #ifdef APP-HARMONY
  vibrateHarmony()
// #endif

// #ifndef APP-HARMONY
  uni.vibrateShort()
// #endif
}

<view v-if="showDialog" class="dialog-mask" @click="closeDialog">
  <view class="dialog" @click.stop>
    <view class="dialog-header">
      <text class="dialog-title">
        {{editIndex >= 0 ? '编辑闹钟' : '添加闹钟'}}
      </text>
    </view>

    <view class="dialog-content">
      <!-- 时间选择器 -->
      <picker mode="time" :value="editAlarmData.time"
              @change="onTimeChange">
        <text>{{editAlarmData.time}}</text>
      </picker>

      <!-- 周重复选择 -->
      <view class="week-selector">
        <text v-for="(day, i) in weekDays" :key="i"
              :class="{'active': editAlarmData.repeat[i]}"
              @click="toggleDay(i)">
          {{day}}
        </text>
      </view>
    </view>
</view>
</view>

export default {
  data() {
    return {
      isRunning: false,
      totalTime: 0,      // 总时间（毫秒）
      startTime: 0,
      timer: null,
      laps: []           // 圈数记录
    }
  },
computed: {
    formattedTime() {
      const totalSeconds = Math.floor(this.totalTime / 1000)
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      return (minutes < 10 ? '0' : '') + minutes + ':' +
             (seconds < 10 ? '0' : '') + seconds
    },
    milliseconds() {
      returnString(Math.floor((this.totalTime % 1000) / 10))
        .padStart(2, '0')
    }
  },
methods: {
    start() {
      this.isRunning = true
      this.startTime = Date.now() - this.totalTime
      this.timer = setInterval(() => {
        this.totalTime = Date.now() - this.startTime
      }, 10)  // 10ms 更新一次
    }
  }
}

methods: {
  recordLap() {
    const lapTime = this.totalTime - this.lastLapTime
    this.lapCounter++

    this.laps.unshift({
      id: Date.now(),
      index: this.lapCounter,
      time: this.formatTime(lapTime),
      rawTime: lapTime
    })

    this.lastLapTime = this.totalTime
  }
},
computed: {
  sortedLaps() {
    let sorted = [...this.laps]

    // 根据排序模式排序
    if (this.sortMode === 'fastest') {
      sorted.sort((a, b) => a.rawTime - b.rawTime)
    } elseif (this.sortMode === 'slowest') {
      sorted.sort((a, b) => b.rawTime - a.rawTime)
    }

    // 标记最快和最慢
    if (sorted.length > 1) {
      const times = this.laps.map(l => l.rawTime)
      const fastest = Math.min(...times)
      const slowest = Math.max(...times)

      sorted = sorted.map(lap => ({
        ...lap,
        isFastest: lap.rawTime === fastest,
        isSlowest: lap.rawTime === slowest && fastest !== slowest
      }))
    }

    return sorted
  }
}

<view class="picker-row">
  <view class="picker-group">
    <picker-view class="picker" :value="[hours]"
                 @change="onHoursChange">
      <picker-view-column>
        <view v-for="n in 24" :key="n" class="picker-item">
          <text>{{n - 1}}</text>
        </view>
      </picker-view-column>
    </picker-view>
    <text class="picker-label">小时</text>
</view>

<!-- 分钟和秒的选择器类似 -->
</view>

computed: {
  progressPercent() {
    if (this.totalSeconds === 0) return 0
    return Math.floor(
      (this.totalSeconds - this.remainingTime) /
      this.totalSeconds * 100
    )
  }
}

<view class="progress-bar">
  <view class="progress-fill"
        :style="{width: progressPercent + '%'}">
  </view>
</view>

onTimerComplete() {
  this.stopTimer()
this.isRunning = false

// 振动提醒
if (this.vibrate) {
    // uni.vibrateLong()
  }

// 弹窗通知
if (this.notification) {
    uni.showModal({
      title: '计时完成',
      content: '计时器时间已到！',
      showCancel: false
    })
  }
}

onKeepScreenOnChange(e) {
  this.keepScreenOn = e.detail.value
  uni.setStorageSync('keepScreenOn', this.keepScreenOn)

  uni.setKeepScreenOn({
    keepScreenOn: this.keepScreenOn
  })

  uni.showToast({
    title: this.keepScreenOn ?
      '屏幕常亮已开启' : '屏幕常亮已关闭',
    icon: 'none'
  })
}

clearData() {
  uni.showModal({
    title: '确认清除',
    content: '此操作将清除所有闹钟和设置数据，无法恢复。确定要继续吗？',
    confirmText: '清除',
    confirmColor: '#F44336',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorageSync()
        uni.showToast({
          title: '数据已清除',
          icon: 'success'
        })
        // 重启应用
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
      }
    }
  })
}

.card {
  background-color: #2C2C2C;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.add-btn {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 60px;
  height: 60px;
  background-color: #FF6B00;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

<view v-if="alarms.length === 0" class="empty-state">
  <text class="empty-text">暂无闹钟</text>
  <text class="empty-hint">点击下方 "+" 按钮添加闹钟</text>
</view>

// 操作成功提示
uni.showToast({
title: '保存成功',
icon: 'success'
})

// 确认对话框
uni.showModal({
title: '确认删除',
content: '确定要删除这个闹钟吗？',
success: (res) => {
    if (res.confirm) {
      // 执行删除
    }
  }
})

export default {
  onUnload() {
    this.stopTimer()
  },
  methods: {
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    }
  }
}

<view v-for="(alarm, index) in alarms"
      :key="alarm.id || index"
      class="alarm-item">
  <!-- 内容 -->
</view>

// #ifdef APP-HARMONY
let firstBackTime = 0

exportdefault {
onLastPageBackPress: function () {
    console.log('HarmonyOS 返回键按下')
    if (firstBackTime == 0) {
      uni.showToast({
        title: '再按一次退出应用',
        position: 'bottom',
      })
      firstBackTime = Date.now()
      setTimeout(() => {
        firstBackTime = 0
      }, 2000)
    } elseif (Date.now() - firstBackTime < 2000) {
      uni.exit() // 退出应用
    }
  }
}
// #endif

// #ifdef APP-HARMONY
import { runningLock } from'@kit.BasicServicesKit'

let screenLock = null

// 保持屏幕常亮
function keepScreenOn() {
try {
    screenLock = runningLock.createRunningLock('screen',
      runningLock.RunningLockType.RUNNINGLOCK_SCREEN)
    screenLock.lock(0) // 0 表示永久锁定
  } catch (err) {
    console.error('屏幕常亮失败', err)
  }
}

// 释放屏幕锁
function releaseScreenLock() {
if (screenLock) {
    screenLock.unlock()
    screenLock = null
  }
}
// #endif

// 跨平台封装
function setKeepScreenOn(keep) {
// #ifdef APP-HARMONY
if (keep) {
    keepScreenOn()
  } else {
    releaseScreenLock()
  }
// #endif

// #ifndef APP-HARMONY
  uni.setKeepScreenOn({ keepScreenOn: keep })
// #endif
}

// #ifdef APP-HARMONY
import backgroundTaskManager from'@ohos.resourceschedule.backgroundTaskManager'

// 申请长时任务
asyncfunction requestBackgroundTask() {
try {
    await backgroundTaskManager.requestSuspendDelay('时钟后台任务', () => {
      console.log('后台任务即将被挂起')
      // 保存状态
    })
  } catch (err) {
    console.error('后台任务申请失败', err)
  }
}
// #endif

.container {
  // 鸿蒙安全区域
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

// 鸿蒙折叠屏适配
@media screen and (min-width: 600px) {
  .container {
    max-width: 600px;
    margin: 0 auto;
  }
}

export default {
// 应用前台
  onShow() {
    // #ifdef APP-HARMONY
    console.log('HarmonyOS 应用进入前台')
    this.resumeTimers() // 恢复计时器
    // #endif
  },

// 应用后台
  onHide() {
    // #ifdef APP-HARMONY
    console.log('HarmonyOS 应用进入后台')
    this.pauseTimers() // 暂停计时器
    this.saveState() // 保存状态
    // #endif
  }
}

// #ifdef APP-HARMONY
import { configuration } from'@kit.AbilityKit'

// 监听系统主题变化
function watchThemeChange() {
const config = configuration.getConfiguration()
const isDark = config.colorMode === configuration.ColorMode.COLOR_MODE_DARK

// 应用深色主题
if (isDark) {
    this.applyDarkTheme()
  } else {
    this.applyLightTheme()
  }
}
// #endif

# 1. 连接鸿蒙设备
# 2. 在 HBuilderX 中选择运行设备
# 3. 点击"运行" → "运行到手机或模拟器" → "运行到 HarmonyOS"

# 查看日志
hdc shell hilog | grep "simpleclock"

// 使用鸿蒙性能追踪
// #ifdef APP-HARMONY
import hiTraceMeter from '@ohos.hiTraceMeter'

// 开始性能追踪
hiTraceMeter.startTrace('stopwatch_timing', 1001)

// 执行计时逻辑
this.updateStopwatchTime()

// 结束追踪
hiTraceMeter.finishTrace('stopwatch_timing', 1001)
// #endif

// 防止重复点击
if (this.totalSeconds === 0) {
  uni.showToast({
    title: '请设置计时时间',
    icon: 'none'
  })
return
}

// 数据验证
if (!editAlarmData.time) {
  uni.showToast({
    title: '请选择时间',
    icon: 'none'
  })
return
}

simpleclock/
├── pages/
│   ├── index/index.uvue      # 264 行
│   ├── alarm/alarm.uvue      # 430 行
│   ├── stopwatch/stopwatch.uvue  # 280 行
│   ├── timer/timer.uvue      # 300 行
│   └── settings/settings.uvue    # 350 行
├── App.uvue                  # 124 行
├── pages.json                # 76 行
├── uni.scss                  # 77 行
├── README.md                 # 项目说明
└── 使用指南.md               # 用户手册

# 在华为开发者联盟申请应用签名
# 下载签名文件并配置到 manifest.json

{
"uni-app-x": {
    "harmony": {
      "signing": {
        "profile": "path/to/profile.p7b",
        "certFile": "path/to/cert.pem",
        "keyFile": "path/to/key.p12",
        "keyPassword": "your_password"
      }
    }
  }
}

# HBuilderX 中操作：
# 1. 发行 → 原生App-云打包
# 2. 选择 HarmonyOS 平台
# 3. 填写应用信息和签名配置
# 4. 点击打包，等待云端编译
# 5. 下载 .hap 安装包

# 命令行打包（可选）
npm run build:app-harmony

// 在应用启动时主动请求权限
// #ifdef APP-HARMONY
asyncfunction checkAndRequestPermissions() {
const permissions = [
    'ohos.permission.NOTIFICATION_CONTROLLER',
    'ohos.permission.VIBRATE'
  ]

for (let permission of permissions) {
    const result = await checkPermission(permission)
    if (!result) {
      await requestPermission(permission)
    }
  }
}
// #endif