这次，我决定挑战一个全新的模块——Live View Kit，它提供了实况窗的创建、更新和管理功能。作为 API 13 的全新特性，我想用它开发一个智能餐厅的点餐和取餐提醒功能。
Live View Kit
这篇文章不仅是我的学习记录，也是我探索 HarmonyOS Next API 13 的实践总结，伴随着思考与代码分享。
学习起点：什么是 Live View Kit？
Live View Kit 是 HarmonyOS 中一个用于展示实时动态信息的模块，它支持各种应用场景，比如物流跟踪、航班信息更新、取餐提醒等。它通过实况窗（Live View）的形式展示信息，分为卡片形态和胶囊形态。
根据官方文档，Live View Kit 具备以下核心能力：
创建实况窗（如取餐通知）。
更新实况窗内容（如实时更新物流状态）。
结束实况窗。
查询实况窗状态。
这一切听起来很棒，但作为开发者，我知道技术文档和实际开发之间，总会有些需要摸索的部分。
搭建开发环境
工具准备
如果你是真的从零开始，那么你需要先准备下面的内容：
不过你不会 ArkTS，那么我建议你先学一下，因为这个并不难，我也可以简单的介绍一下。ArkTS（Ark TypeScript）是华为生态的全新语言，其语法和 TypeScript 非常相似，同时支持声明式编程。ArkUI 则是基于 ArkTS 的 UI 框架，采用组件化和声明式开发。
实战开始：开发一个取餐提醒应用
功能设计
我的目标是开发一个智能餐厅的取餐提醒功能，包含以下特点：
创建实况窗：当餐品准备好时，显示取餐码和窗口号。
更新实况窗：实时更新剩余等待时间。
结束实况窗：用户完成取餐后关闭提醒。
项目初始化
在 DevEco Studio 中创建 Stage 模型应用后，我引入了以下模块：
import { liveViewManager } from '@kit.LiveViewKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { BusinessError } from '@kit.BasicServicesKit';
复制代码
1. 检查实况窗功能是否开启
首先，我需要确保设备支持并启用了 Live View 功能。以下是代码实现：
async function checkLiveViewEnabled() { try { const isEnabled = await liveViewManager.isLiveViewEnabled(); hilog.info(0x0000, 'LiveViewCheck', `LiveView is enabled: ${isEnabled}`); if (!isEnabled) { console.error('Live View is not enabled on this device.'); } } catch (err) { let error: BusinessError = err as BusinessError; hilog.error(0x0000, 'LiveViewCheck', `Error checking LiveView: ${error.message}`); }}
checkLiveViewEnabled();
复制代码
我的思考：这一步虽然简单，但它是项目启动的关键。设备支持和功能启用是 Live View 能否正常运行的基础。
2. 创建实况窗
接下来，我实现了创建实况窗的功能。当餐品准备好时，实况窗会显示取餐码和窗口号。
async function startLiveView() { try { const liveView = { id: 101, event: 'PICK_UP', sequence: 1, isMute: false, liveViewData: { primary: { title: '餐品已备好', content: [ { text: '请前往' }, { text: '一号窗口', textColor: '#FF0000' } ], keepTime: 3600, layoutData: { layoutType: liveViewManager.LayoutType.LAYOUT_TYPE_PICKUP, title: '取餐码', content: 'A12345', underlineColor: '#0000FF' } }, capsule: { type: liveViewManager.CapsuleType.CAPSULE_TYPE_TEXT, status: 1, title: '待取餐', content: '取餐码：A12345', backgroundColor: '#308977' } } };
const result = await liveViewManager.startLiveView(liveView); hilog.info(0x0000, 'LiveViewStart', `LiveView started successfully: ${JSON.stringify(result)}`); } catch (err) { let error: BusinessError = err as BusinessError; hilog.error(0x0000, 'LiveViewStart', `Failed to start LiveView: ${error.message}`); }}
startLiveView();
复制代码
我的思考：Live View 的 UI 布局是通过 layoutType 控制的。API 提供了多种布局类型，如 LAYOUT_TYPE_PICKUP、LAYOUT_TYPE_PROGRESS 等。在这个场景中，我选择了取餐专用的 LAYOUT_TYPE_PICKUP。
3. 更新实况窗
如果用户需要实时更新取餐等待时间，可以调用以下代码：
async function updateLiveView(sequence: number, remainingTime: string) { try { const liveView = { id: 101, event: 'PICK_UP', sequence: sequence, liveViewData: { primary: { content: [ { text: `预计等待时间：${remainingTime}` } ] } } };
const result = await liveViewManager.updateLiveView(liveView); hilog.info(0x0000, 'LiveViewUpdate', `LiveView updated successfully: ${JSON.stringify(result)}`); } catch (err) { let error: BusinessError = err as BusinessError; hilog.error(0x0000, 'LiveViewUpdate', `Failed to update LiveView: ${error.message}`); }}
// Example usageupdateLiveView(2, '5分钟');
复制代码
4. 结束实况窗
用户完成取餐后，可以调用以下代码关闭实况窗：
async function stopLiveView() { try { const liveView = { id: 101, event: 'PICK_UP' };
const result = await liveViewManager.stopLiveView(liveView); hilog.info(0x0000, 'LiveViewStop', `LiveView stopped successfully: ${JSON.stringify(result)}`); } catch (err) { let error: BusinessError = err as BusinessError; hilog.error(0x0000, 'LiveViewStop', `Failed to stop LiveView: ${error.message}`); }}
stopLiveView();
复制代码
项目总结
通过这次实践，我对 HarmonyOS Next 的 ArkTS 和 ArkUI 有了更深的理解。Live View Kit 的功能为开发者提供了极大的便利，特别是在实时信息展示的场景中，具有不可替代的优势。
我的小收获：
熟悉了 ArkTS 的 Promise 用法以及错误处理机制。
深刻理解了 Live View 的数据模型和布局设计。
学会了如何高效调试 HarmonyOS 应用。
下一步计划：探索 Live View Kit 的更多场景，比如物流跟踪和赛事比分展示，进一步挖掘其潜力。
参考资料
Live View Kit 官方文档
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/liveveiw-liveviewmanager-V13
学习 ArkTS 语言
https://developer.huawei.com/consumer/cn/arkts/
评论