TypeScript大前端
HarmonyOS PC 与手机双端协同开发实战：UI 适配、窗口管理与性能调优
通过 NoteHub 案例讲解 HarmonyOS PC 与手机双端协同开发。对比两者在输入、屏幕、窗口模型等方面的差异，提出共用业务逻辑、分离 UI 交互层的架构方案。涵盖设备路由、多窗口创建、拖拽及快捷键实现、响应式布局与高 DPI 适配、性能优化及上架审核要点。旨在帮助开发者构建一套代码支持双端的优质应用，避免简单移植，充分利用 PC 桌面级能力。
通过 NoteHub 案例讲解 HarmonyOS PC 与手机双端协同开发。对比两者在输入、屏幕、窗口模型等方面的差异，提出共用业务逻辑、分离 UI 交互层的架构方案。涵盖设备路由、多窗口创建、拖拽及快捷键实现、响应式布局与高 DPI 适配、性能优化及上架审核要点。旨在帮助开发者构建一套代码支持双端的优质应用，避免简单移植，充分利用 PC 桌面级能力。
2024 年，华为正式推出 HarmonyOS PC，标志着鸿蒙生态完成'手机 → 平板 → 车机 → PC'的全场景闭环。对开发者而言，这既是机遇，也是挑战：
如何用一套代码，同时满足 手机触控交互 与 PC 鼠标键盘操作？ 如何在 PC 上实现 多窗口、拖拽、快捷键 等桌面级体验？ 如何避免'手机版放大就是 PC 版'的低质移植？
本文将通过一个 跨端笔记应用（NoteHub） 的完整开发案例，系统讲解：
无论你是工具类 APP 开发者，还是希望拓展 PC 场景的游戏厂商，本文都将提供可直接复用的技术方案。
虽然同属 Stage 模型，但 PC 与手机在硬件、交互、生命周期上存在本质区别：
| 维度 | 手机 | HarmonyOS PC |
|---|---|---|
| 输入方式 | 触摸为主 | 鼠标 + 键盘 + 触控板 |
| 屏幕尺寸 | 6~7 英寸 | 13~27 英寸（高 DPI） |
| 窗口模型 | 单任务全屏 | 多窗口、自由缩放、分屏 |
| 后台限制 | 严格冻结（2 分钟） | 宽松，支持常驻 |
| 性能资源 | 内存 ≤12GB | 内存 ≥16GB，CPU 更强 |
| 用户预期 | 快速轻量 | 功能完整、效率优先 |
📌 开发原则：共用业务逻辑（数据层、网络层）；分离 UI 与交互层（响应式布局 + 设备感知）。
我们构建一个名为 NoteHub 的笔记应用，支持：
NoteHub/
├── common/ # 共享逻辑（Model、Utils）
│ ├── NoteModel.ts # 笔记增删改查（RDB + 分布式同步）
│ └── KeyboardShortcuts.ts
├── pages/
│ ├── mobile/ # 手机专用页面
│ │ ├── NoteList.ets
│ │ └── NoteDetail.ets
│ └── pc/ # PC 专用页面
│ ├── MainView.ets # 主窗口（侧边栏 + 编辑区）
│ └── NewWindow.ets # 新建窗口（独立笔记）
└── entry/src/main/ets/
└── EntryAbility.ts # 根据设备类型路由
// EntryAbility.ts
import deviceInfo from '@ohos/deviceInfo';
import router from '@ohos/router';
export default class EntryAbility extends UIAbility {
onCreate() {
const isPC = deviceInfo.deviceType === 'pc';
if (isPC) {
router.pushUrl({ url: 'pages/pc/MainView' });
} else {
router.pushUrl({ url: 'pages/mobile/NoteList' });
}
}
}
✅ 优势：彻底解耦 UI，避免
if-else堆砌。
PC 用户期望'一个笔记一个窗口'。HarmonyOS 提供 window.create() API：
// pc/MainView.ets
import window from '@ohos/window';
@Entry
@Component
struct MainView {
async openNoteInNewWindow(noteId: string) {
const newWin = await window.create(this.context, { name: `note_${noteId}` });
// 设置窗口属性
await newWin.setWindowRect({ x: 200, y: 200, width: 800, height: 600 });
await newWin.setWindowFlags({ fullscreen: false });
// 加载独立页面
router.pushUrl({
url: 'pages/pc/NewWindow',
params: { noteId }
}, { windowStage: newWin.windowStage });
newWin.show();
}
}
💡 注意：每个窗口拥有独立的
windowStage和 JS 上下文。
PC 用户习惯拖拽文件/文本。使用 onDragStart / onDrop 实现：
// 编辑区组件
TextInput()
.onDragStart((event) => {
event.setData('text/plain', this.currentText);
return true;
})
.onDrop((event) => {
const text = event.getData('text/plain');
this.insertTextAtCursor(text);
})
// common/KeyboardShortcuts.ts
import keyEvent from '@ohos/multimodalInput.keyEvent';
export function registerSaveShortcut(context: any, onSave: () => void) {
context.on('keyEvent', (keyCode: number, action: number) => {
if (action === keyEvent.KeyAction.DOWN && keyCode === keyEvent.KeyCode.KEY_S && keyEvent.isMetaPressed()) {
// Ctrl/Cmd
onSave();
return true; // 拦截默认行为
}
return false;
});
}
// 在 PC 页面中调用
aboutToAppear() {
registerSaveShortcut(this, () => this.saveNote());
}
✅ 效果：PC 用户按
Ctrl+S自动保存，手机端无此逻辑。
| 场景 | 手机 | PC |
|---|---|---|
| 主界面 | 单列列表 | 左右分栏（Navigation + Content） |
| 字体大小 | 14fp | 16~18fp（提升可读性） |
| 间距 | 8vp | 16vp（符合桌面视觉节奏） |
| 按钮 | 全宽 | 固定宽度 + 悬停效果 |
// 公共布局组件
ResponsiveLayout({
[BreakpointType.BreakpointXS]: this.renderMobile(),
[BreakpointType.BreakpointLG]: this.renderPC()
})
renderPC() {
return Row() {
NavigationPanel().width(240)
EditorPane().expand()
}
}
PC 屏幕 DPI 可达 200%，需提供多分辨率资源：
resources/
├── base/media/icon_edit.png # 1x (16x16)
├── en_US/media/icon_edit.png
├── zh_Hans/media/icon_edit.png
└── rawfile/
├── [email protected] # 2x (32x32)
└── [email protected] # 3x (48x48)
在代码中引用：
Image($rawfile('icon_edit')).objectFit(ImageFit.Contain)
系统自动选择匹配当前 DPI 的资源。
尽管 PC 性能更强，但仍需注意：
每个窗口独立运行，但共享主进程内存。建议：
onWindowHide() {
this.editorContent = null;
imageCache.clear();
}
PC 用户对启动速度更敏感（容忍度低于手机）。优化措施：
LazyForEach 渲染长列表；onCreate 中启动异步任务）。华为 AppGallery 对 PC 应用有额外审核项：
| 要求 | 解决方案 |
|---|---|
| 必须支持鼠标操作 | 所有按钮需有悬停态（.hoverEffect(HoverEffect.Highlight)） |
| 提供窗口最小/最大/关闭 | 系统默认提供，无需自绘 |
| 截图需包含 PC 界面 | 提交 1920×1080 及 2560×1600 两种分辨率 |
| 声明 PC 权限 | 在 module.json5 中明确 deviceTypes: ["pc"] |
✅ 在 AGC 后台填写 PC 应用描述时，强调'多窗口'、'快捷键'、'高效率'等桌面特性。
| 功能 | 手机体验 | PC 体验 |
|---|---|---|
| 新建笔记 | 全屏编辑页 | 右侧面板 or 新窗口 |
| 浏览列表 | 单列滚动 | 左侧固定导航栏 |
| 保存 | 自动保存 | Ctrl+S 手动保存 + 自动备份 |
| 多任务 | 切换应用 | 同时打开 3 个笔记窗口 |
用户反馈：
HarmonyOS PC 的出现，不是简单地把手机应用搬上大屏，而是重构人机交互范式。作为开发者，我们应：
未来，随着 HarmonyOS NEXT 去除 AOSP 依赖，PC 原生应用将迎来更大爆发。现在入局，正是构建差异化竞争力的最佳时机。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online