#星光不负码向未来# 大学生在机房偶遇 HarmonyOS：从一行 ArkTS 到宿舍“电费预警”实战原创

子泥翻庫

发布于 2025-10-30 18:02

浏览

0收藏

今年学校实验室做了一次很“前沿”的尝试：老师在课堂上说，“我们这学期除了常规的 Java / Web，你们可以试试 HarmonyOS，华为这套体系越来越成熟了，ArkTS 的语法你们学起来也不难。”
说实话，当时我脑子里只有一句话：“我还在 for 循环和 Promise 里打转，你就让我上鸿蒙了？” 但机房已经装好了 DevEco Studio，我又是那种看到新东西手就痒的学生，于是就有了下面这段“先好奇、再上头、最后真香”的故事。

#星光不负码向未来# 大学生在机房偶遇 HarmonyOS：从一行 ArkTS 到宿舍“电费预警”实战-鸿蒙开发者社区

这次征文我想走【实战案例】这条线，把我一个真正落地的小项目讲清楚：用 HarmonyOS 做了一个“宿舍电费预警 + 一键代充通知”小工具，在我们宿舍楼真的跑过，而且还被辅导员转发了一次（真的超有成就感🥹）。中间也有不少有意思的插曲，一起说说。

一、最开始：学校机房里第一次“遇见”

第一次打开 DevEco，那感觉跟第一次开 VSCode 完全不一样：左边是熟悉的项目结构，右边预览一开就是 ArkUI 组件，最关键是老师说“ArkTS 很像 TypeScript”，那我这小前端人瞬间就有安全感了。

#星光不负码向未来# 大学生在机房偶遇 HarmonyOS：从一行 ArkTS 到宿舍“电费预警”实战-鸿蒙开发者社区

有一件小趣事：我第一次跑官方 demo，模拟器卡住了，我以为是我代码写崩了，急忙去找老师。老师一看：“你这是开了俩模拟器，还同时起了 Preview，电脑顶不住了。”从那天起我就记住了鸿蒙开发的第一条经验：写 UI 的时候可以开预览，真机/模拟器调试时就别啥都开，不然以为是自己写错，其实是电脑在喘气😂。

还有一次是我被 ArkTS 的装饰器绕晕了，@Entry、@Component、@State、@Prop 一堆，我还以为是后端注解那一套，结果发现其实很好懂：加了就能让 UI 和状态连起来，这点比我之前写的小程序反而更统一。

二、为什么想到做“宿舍电费预警”？

我们学校寝室是那种要自己充电费的，问题有两个：

电费扣得悄无声息，你不查就不知道，等热水壶烧到一半突然断电，你就知道了🤯。
充电入口分散，有的是微信公众号，有的是学校自助系统，室友经常问：“谁能帮我充一下？我这边网不好/我在外面。”

我当时就在想：
“要是能在手机鸿蒙设备上，点开一个轻量的页面，自动查当前宿舍电费，不足就一键发给室友，让他点一下就能跳转到充值入口，这不就是很典型的端能力 + 云能力协同吗？”

老师也鼓励说：能和真实学校场景挂钩的应用，在比赛和社区里更有说服力，于是我就把这个当成了练手项目。

三、整体方案（学生版架构图的口头版）

我当时画在本子上的流程大概是这样的：

入口：用 App Linking，生成一个像 https://campus.example.com/power/5-401 这样的链接，寝室成员互相一发，点开就能直达宿舍电费页；
端侧展示：用 ArkUI 写一个很简单的电量卡片：当前寝室、当前电费、状态（正常/低电）、操作按钮（提醒、去充值）；
数据查询：我这边做不了学校官方接口，就做了一个“模拟电费数据云表”，用 云开发（Cloud DB/云函数） 存一份宿舍电费数据；
提醒：当电费低于阈值，就调用云函数写一条“提醒任务”，同时返回一个可跳转链接，室友点一下就能进来；
性能：页面打开时先显示本地缓存的上一次电费，后台再去云端拉新值，这样不会出现“我只是想看一下，还要等 2 秒请求”的尴尬；
可观察：我接了 应用分析 做了个简单埋点，看看大家是“主动查”多还是“被提醒”多，结果是后者多，所以我又把“提醒入口”做大了。

四、核心页面 ArkTS（简化版，可贴论坛）

// pages/PowerPage.ets
@Entry
@Component
struct PowerPage {
  @State dormId: string = ''         // 宿舍号，例如 5-401
  @State balance: number = 0.0       // 当前电费
  @State status: string = '加载中...'
  @State lastUpdate: string = ''

  aboutToAppear() {
    // 1. 从 App Linking / want 里取宿舍号
    this.dormId = getDormIdFromWant() ?? '5-401'
    // 2. 先读本地缓存，提升首屏
    const cache = loadLocalBalance(this.dormId)
    if (cache) {
      this.balance = cache.balance
      this.status = cache.status
      this.lastUpdate = cache.time
    }
    // 3. 再异步拉云端最新
    fetchBalanceFromCloud(this.dormId).then(res => {
      this.balance = res.balance
      this.status = res.balance < 5 ? '⚠ 电费过低，请尽快充值' : '电费充足'
      this.lastUpdate = new Date().toLocaleString()
      saveLocalBalance(this.dormId, this.balance, this.status)
    })
  }

  build() {
    Column({ space: 12 }) {
      Text(`宿舍：${this.dormId}`).fontSize(22).fontWeight(FontWeight.Medium)
      Text(`当前电费：${this.balance.toFixed(2)} 元`).fontSize(20)
      Text(this.status).fontSize(14).fontColor(this.balance < 5 ? 0xFF0000 : 0x00AA00)

      Row({ space: 8 }) {
        Button('提醒室友代充').onClick(() => this.notifyRoommates())
        Button('去充值').onClick(() => openRechargePage(this.dormId))
      }

      if (this.lastUpdate) {
        Text(`最近更新：${this.lastUpdate}`).fontSize(12).fontColor(0x888888)
      }
    }.padding(24)
  }

  async notifyRoommates() {
    const ok = await createRechargeTask(this.dormId, this.balance)
    this.status = ok ? '已发送提醒给室友~' : '提醒失败，请稍后再试'
  }
}

这里的重点不是代码多炫，而是思路：

先本地 → 再云端；
有 App Linking → 宿舍点开即用；
有云函数 → 能给室友下发“你帮我冲一下”的消息；
有状态提示 → 论坛用户看到就能明白你做的是“真实场景”。

五、云端函数的“学生版写法”（伪代码）

// cloudfunctions/createRechargeTask.js
exports.main = async (event, context) => {
  const { dormId, balance } = event
  // 写入一个提醒任务，后面可以做订阅/消息推送
  await db.collection('recharge_tasks').add({
    dormId,
    balance,
    createdAt: Date.now(),
    status: 'PENDING'
  })
  return { ok: true }
}

后面我又用应用分析看了一下，发现很多人打开页面只是看一下，并不点“提醒室友”，所以我做了个小改动：当余额 < 3 元时，自动弹一个“要不要提醒室友”对话框，点击量立刻上去了，这也算是我第一次用数据来“反向改 UI”，挺有成就感的。

六、学习中的几件小趣事 😂

“这不就是 TS 吗？”
我室友第一次看到 ArkTS 说：“这不就是 TS 吗，行了我会了。”结果他写 UI 的时候忘了 @Entry，页面死都出不来，我们俩坐在寝室床上对着文档看，最后发现只是少了装饰器。那天我们总结：鸿蒙会长得像你认识的东西，但还是得按鸿蒙的规矩来。
“老师你这个示例版本太老了！”
我照着老师 PPT 上的代码写，报了命名空间的错，后来一查是老师 PPT 的 SDK 版本没更新。我就跑去和老师说：“老师你这个要不我帮你改成新的？我正好也要写征文。”老师还真答应了，还说“那你把你这个电费项目写细一点，到时候我上课给学弟学妹看。”那一刻我突然觉得：原来学生也可以反向给学校补内容。
“我妈以为我在玩手机”
我回家调 UI 的时候，用真机连着 DevEco 热重载，一会儿按钮变绿，一会儿字体变粗，我妈路过说：“上课玩手机？”我说：“这是给老师做的功课。”我妈说：“哦，那玩吧。”我：🙂