HarmonyOS PC 与手机双端协同开发实战：UI 适配、窗口管理与性能调优

2.2 设备类型检测与路由

// 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 专属能力开发：多窗口与交互增强

3.1 启动新窗口（New Window）

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 上下文。

3.2 拖拽（Drag & Drop）支持

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);
    })

3.3 快捷键注册（Ctrl+S 保存）

// 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 自动保存，手机端无此逻辑。

四、UI 适配：从响应式到高 DPI 支持

4.1 布局策略对比

4.2 使用 ResponsiveLayout + Breakpoint

// 公共布局组件
ResponsiveLayout({
    [BreakpointType.BreakpointXS]: this.renderMobile(),
    [BreakpointType.BreakpointLG]: this.renderPC()
})

renderPC() {
    return Row() {
        NavigationPanel().width(240)
        EditorPane().expand()
    }
}

4.3 高 DPI 图片适配

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 不等于无限资源

尽管 PC 性能更强，但仍需注意：

5.1 多窗口内存隔离

每个窗口独立运行，但共享主进程内存。建议：

• 避免在主窗口缓存子窗口数据。
• 子窗口关闭时主动释放资源：

onWindowHide() {
    this.editorContent = null;
    imageCache.clear();
}

5.2 启动速度优化

PC 用户对启动速度更敏感（容忍度低于手机）。优化措施：

• 延迟加载非核心模块（如云同步）；
• 使用 LazyForEach 渲染长列表；
• 预加载常用资源（在 onCreate 中启动异步任务）。

六、AppGallery 上架：PC 应用特殊要求

华为 AppGallery 对 PC 应用有额外审核项：

✅ 在 AGC 后台填写 PC 应用描述时，强调'多窗口'、'快捷键'、'高效率'等桌面特性。

七、真实案例：NoteHub 双端效果对比

用户反馈：

• 手机用户：'简洁流畅，适合快速记录'；
• PC 用户：'终于不用在浏览器里写笔记了，效率翻倍'。

结语：PC 不是手机的放大版，而是新生产力入口

HarmonyOS PC 的出现，不是简单地把手机应用搬上大屏，而是重构人机交互范式。作为开发者，我们应：

• 尊重设备特性，不做'一刀切'适配；
• 拥抱多窗口、快捷键、拖拽等桌面原生能力；
• 用同一套业务逻辑，打造两套极致体验。

未来，随着 HarmonyOS NEXT 去除 AOSP 依赖，PC 原生应用将迎来更大爆发。现在入局，正是构建差异化竞争力的最佳时机。

附录：关键文档与工具

• HarmonyOS PC 开发指南
• 多窗口管理 API
• DevEco Studio → PC 模拟器：支持窗口拖拽、多开、DPI 调节