ArkUI 预览器使用说明书（Harmony OS Next）

##Harmony OS Next ##Ark Ts ##教育

本文适用于教育科普行业进行学习，有错误之处请指出我会修改。

🚀 核心功能速览

1. 实时预览（秒级刷新）

• 闪电效果：改文字/颜色后按 Ctrl+S，1 秒内自动刷新

• 省电模式：默认开启，不需要时可关闭右上角开关

• ⚠️ 配置文件修改后需手动点「重新加载」

2. 动态预览（真机体验）

• 点击/滑动/跳转：操作手感与真机完全一致

• 动态效果测试：支持页面转场动画等交互验证

📱 设备支持清单

⚠️ 使用避坑指南

功能限制（这些做不了）

❌ 禁用功能：

• 账号登录/多媒体播放/网页组件

• 组件拖拽布局

• C++代码调用

💡 文件操作禁忌：

• 禁止引用共享模块(HSP)

• 资源路径必须用 $r('app.xxx') 写法

🖥️ 启动预览器姿势

菜单导航

View → Tool Windows → Previewer

💻 电脑配置要求

✅ 显卡需支持 OpenGL 3.2+

（2018 年后电脑基本都支持，老旧设备需升级驱动）

🔴 重点红头警告

开发共享模块时，菜单栏效果：

• 预览器：不显示 menubar

• 真机：元服务显示 menubar

• 📢 重要结论：涉及菜单栏的功能必须用真机实测！

口诀总结：改样式用实时预览，测交互用动态预览避坑看限制清单，存疑时真机验证！ 🔍

ArkUI 预览技巧

一、两种预览模式怎么选？🌈 页面预览（左边图标）✅ 完整页面效果✅ 支持点击/滑动真机操作🚀 开启方法：在代码头顶加 @Entry（相当于给页面贴个"主入口"标签）

示例代码：

 @Entry @Component struct Index { //...你的页面内容 }

🌈 组件预览（右边图标）✅ 单独看小部件样式❌ 不能交互（只能静态展示）🚀 开启方法：加 @Preview（1 个文件最多贴 10 个）

示例代码：

 @Preview({ title: '按钮样式' }) @Component struct MyButton { //...你的按钮设计 }

二、组件预览的花式玩法🛠️ 设备模拟器：在 @Preview 里调参数，能模拟不同设备效果：

• 手机/平板切换

• 中英文显示

• 横竖屏旋转

• 圆形手表屏

示例设置：

 @Preview({ deviceType: 'tablet',  //改成平板 orientation: 'landscape'  //横屏模式 })

三、带参数组件的正确打开方式⚠️ 需要传参的组件（比如标题文字）：❌ 错误做法：直接预览✅ 正确操作：新建个"预览专用壳"

示例代码：

 @Preview @Component struct Title预览壳 { build() { Title(文字内容: '测试标题')  //给组件喂测试数据 } }

四、对比表格秒懂区别

💡 一句话总结：写页面用 @Entry，调组件用 @Preview；预览参数随便改，传参记得套壳测！

UI 调试

【HarmonyOS 开发必备技能】三分钟学会用虚拟设备测试多屏幕适配！

一、这个功能解决啥问题？不用买一堆真机，也能测你的 APP 在各种手机/平板上长啥样！→ 比如同时看中文版华为手机 & 英文版荣耀平板的显示效果

二、手把手创建虚拟测试机

1. 打开设备模拟器：

2. 点预览器右上角的「衣服架」图标（Profile Manager）

3. 新建模板：

4. 点【+ New Profile】按钮

5. 填参数（重点看这 4 项）：① 起个响亮的名字（比如"华为 P70 模拟机"）② 选设备类型👉必须和工程里 module.json5 定义的一致！③ 分辨率填数字👉常用手机 1080x2340，平板 2560x1600④ 选语言👉支持中/英/日等 20+种

6. 保存开测：

7. 创建后在设备列表里选它，预览器秒变对应设备

三、实测小技巧✔️ 横竖屏快速切换：在代码的 @Preview 里加一行 orientation: 'landscape'（横屏）

✔️ 多设备同屏对比：同时开多个预览窗口（官方文档搜"多端预览"有教程）

✔️ 规避文字溢出：切换英文后重点检查按钮/卡片是否被长单词撑破

四、新手避坑指南🚫 坑 1：设备类型不生效？→ 检查 module.json5 里有没有声明这个设备类型

🚫 坑 2：改语言没变化？→ 关掉预览器重新打开，清缓存

🚫 坑 3：圆形手表屏显示异常？→ 创建 Profile 时记得勾选 roundScreen 选项

五、实战场景演示老板说："咱们 APP 要适配华为全系平板！"你这样做：

1. 创建 3 个 Profile：MatePad 11（2560x1600）MatePad Pro 13（2880x1920）荣耀平板 9（2200x1600）

2. 在所有平板上检查：✅ 导航栏是否适配大屏幕✅ 图片是否拉伸模糊✅ 横屏时表格是否自动分栏

口诀总结：测试不用真机堆，虚拟设备一键配分辨率加多语言，适配问题全干碎！ 🚀

【HarmonyOS 开发神器】双向预览功能保姆级教程

💡核心作用实现「代码编辑器 ↔ 界面预览 ↔ 组件树」三向实时连线，哪里点哪里改！

🔥 三大联动效果

1. 点哪亮哪

2. 点击预览界面按钮 → 代码自动高亮对应段落

3. 选中代码片段 → 预览界面组件秒闪边框

4. 组件树点选 → 代码+界面同步高亮

5. 双向秒改

6. 在右侧属性面板改字号 → 代码自动更新 + 界面立即刷新

7. 在代码里调颜色值 → 预览界面秒变新样式

8. 组件追踪

9. 复杂布局中快速定位组件位置（再也不用代码里玩「找不同」）

🛠️ 开启步骤

1. 打开任意.ets 文件

2. 点预览器顶部工具栏的「双箭头」图标 ↔

3. 看到组件树面板弹出 → 表示功能已激活

⚠️ 使用限制（这些情况用不了）

💡 实战技巧

问题：改属性面板没反应？​​解法​​：检查组件是否有@State绑定数据，这类组件需直接改代码

问题：代码改了但预览不更新？​​解法​​：

1. 确认没开多设备预览模式

2. 关闭后重新打开双向预览开关

🎯 典型应用场景

1. 快速微调 UI 细节→ 在属性面板拖拽调整边距，实时看效果

2. 排查布局错位→ 组件树点选异常组件，代码自动跳转定位

3. 团队协作演示→ 边讲解边点击组件，新人秒懂代码结构

一句话口诀：开发界面三件套，双向连线效率高数据动画要避让，微调样式不用找！ 🚀

# 开发调试神器！用Hamock实现预览环境数据模拟
## 🛠️ 快速配置### 前置条件1. 在`oh-package.json5`添加开发依赖：```json"devDependencies": {    "@ohos/hamock": "1.0.0"}

1. 执行npm install安装并同步工程

🔥 两大核心功能

一、组件级模拟（UI 部分）

场景案例：模拟按钮点击效果

// 原组件方法返回随机数method1(param: string): number {    return Math.random(); }
// Mock后固定返回1（预览专用）@MockSetupmockMethod() {    const mocker = new MockKit();    const mockFunc = mocker.mockFunc(this, this.method1);    when(mockFunc)('test').afterReturn(1); //🚀 输入'test'时固定返回1}
// 实际调用结果：const result = this.method1('test'); // 预览时返回1，真机仍返回随机数

属性模拟（如设置默认文本）

@Componentstruct MyButton {    @State text: string = '默认文字';
    @MockSetup    mockText() {        this.text = 'MOCK文字'; //🎨 预览时强制显示    }}

二、模块级模拟（系统 API/本地方法）

案例 1：模拟路由参数

// 创建mock路由组件// src/mock/module/ohos/router.mock.etsconst MockRouter = {    'getParams': () => ({name: '模拟用户'}), //📦 固定返回测试数据    'pushUrl': router.pushUrl //🔄 保持原有跳转功能};export default MockRouter;

案例 2：模拟本地工具类

// 原工具类返回"真实数据"export default class CommonUtils {    static getName() { return "真实姓名"; }}
// Mock实现返回测试数据class MockUtils extends CommonUtils {    static getName() { return "测试账号"; } //👥 预览专用}

📂 配置文件说明

在src/mock/mock-config.json5中配置映射：

{    "@ohos.router": {         "source": "mock/module/router.mock.ets" //🔄 路由Mock映射    },    "utils/CommonUtils.ets": {        "source": "mock/module/utils.mock.ets" //📁 本地工具类Mock    }}

💡 使用贴士

最佳实践：

1. 验证生效：添加 Hilog 日志打印模拟结果

hilog.debug(0x0000, 'TestTag', '当前用户：%{public}s', router.getParams().name);

避坑指南

：

• 要 Mock@ohos.router必须保留原方法（如 pushUrl）

• 组件属性如果是readonly无法被 Mock

• 本地模块路径必须包含.ets后缀

常见 Q&A：

Q1：为什么 Mock 没生效？👉检查mock-config.json5路径是否正确👉查看 Log 输出是否有模拟数据打印

Q2：能同时 Mock 多个模块吗？👉可以！每个模块独立创建 mock 文件并在配置中声明

Q3：真机会执行 Mock 代码吗？👉不会！所有 Mock 仅在预览环境生效

记住口诀：预览调试不用愁，Hamock 帮你做模拟组件属性随便改，系统接口随心配！ 🚀