ArkUI预览器使用说明书
🚀 核心功能速览

1. 实时预览（秒级刷新）
   ▪ 闪电效果：改文字/颜色后按 Ctrl+S，1秒内自动刷新
   ▪ 省电模式：默认开启，不需要时可关闭右上角开关
   ▪ ⚠️ 配置文件修改后需手动点「重新加载」
2. 动态预览（真机体验） ▪ 点击/滑动/跳转：操作手感与真机完全一致
   ▪ 动态效果测试：支持页面转场动画等交互验证

📱 设备支持清单
设备类型 开发语言 典型设备 手机/平板/车机 ArkTS 华为Mate系列 智能手表 JS 华为Watch系列

⚠️ 使用避坑指南
功能限制（这些做不了）
❌ 禁用功能：
▪ 账号登录/多媒体播放/网页组件
▪ 组件拖拽布局
▪ C++代码调用
💡 文件操作禁忌：
▪ 禁止引用共享模块(HSP)
▪ 资源路径必须用 $r('app.xxx') 写法

🖥️ 启动预览器姿势
菜单导航 View → Tool Windows → Previewer

💻 电脑配置要求
✅ 显卡需支持 OpenGL 3.2+
（2018年后电脑基本都支持，老旧设备需升级驱动）

🔴 重点红头警告
开发共享模块时，菜单栏效果：
▪ 预览器：不显示 menubar
▪ 真机：元服务显示 menubar
▪ 📢 重要结论：涉及菜单栏的功能必须用真机实测！
口诀总结： 改样式用实时预览，测交互用动态预览 避坑看限制清单，存疑时真机验证！ 🔍 ArkUI预览技巧 一、两种预览模式怎么选？ 🌈 页面预览（左边图标） ✅ 完整页面效果 ✅ 支持点击/滑动真机操作 🚀 开启方法：在代码头顶加@Entry（相当于给页面贴个"主入口"标签） 示例代码：

xxxxxxxxxx

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

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

xxxxxxxxxx

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

二、组件预览的花式玩法 🛠️ 设备模拟器： 在@Preview里调参数，能模拟不同设备效果： ▪ 手机/平板切换 ▪ 中英文显示 ▪ 横竖屏旋转 ▪ 圆形手表屏 示例设置：

xxxxxxxxxx

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

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

xxxxxxxxxx

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

四、对比表格秒懂区别

页面预览 组件预览 交互体验 支持真实操作 ✅ 只能看不能摸 ❌ 使用场景 测完整流程 调单个部件样式 最大数量 1个/文件 10个/文件 核心标签 @Entry @Preview 💡 一句话总结： 写页面用@Entry，调组件用@Preview； 预览参数随便改，传参记得套壳测！ UI调试 【HarmonyOS开发必备技能】三分钟学会用虚拟设备测试多屏幕适配！ 一、这个功能解决啥问题？ 不用买一堆真机，也能测你的APP在各种手机/平板上长啥样！ → 比如同时看中文版华为手机 & 英文版荣耀平板的显示效果 二、手把手创建虚拟测试机 1 打开设备模拟器： ▪ 点预览器右上角的「衣服架」图标（Profile Manager） 2 新建模板： ▪ 点【+ New Profile】按钮 ▪ 填参数（重点看这4项）： ▪ ① 起个响亮的名字（比如"华为P70模拟机"） ▪ ② 选设备类型👉必须和工程里module.json5定义的一致！ ▪ ③ 分辨率填数字👉常用手机1080x2340，平板2560x1600 ▪ ④ 选语言👉支持中/英/日等20+种 3 保存开测： ▪ 创建后在设备列表里选它，预览器秒变对应设备 三、实测小技巧 ✔️ 横竖屏快速切换： 在代码的@Preview里加一行 orientation: 'landscape'（横屏） ✔️ 多设备同屏对比： 同时开多个预览窗口（官方文档搜"多端预览"有教程） ✔️ 规避文字溢出： 切换英文后重点检查按钮/卡片是否被长单词撑破 四、新手避坑指南 🚫 坑1：设备类型不生效？ → 检查module.json5里有没有声明这个设备类型 🚫 坑2：改语言没变化？ → 关掉预览器重新打开，清缓存 🚫 坑3：圆形手表屏显示异常？ → 创建Profile时记得勾选roundScreen选项 五、实战场景演示 老板说："咱们APP要适配华为全系平板！" 你这样做： 1 创建3个Profile： 2 MatePad 11（2560x1600） 3 MatePad Pro 13（2880x1920） 4 荣耀平板9（2200x1600） 5 在所有平板上检查： 6 ✅ 导航栏是否适配大屏幕 7 ✅ 图片是否拉伸模糊 8 ✅ 横屏时表格是否自动分栏 口诀总结： 测试不用真机堆，虚拟设备一键配 分辨率加多语言，适配问题全干碎！ 🚀 【HarmonyOS开发神器】双向预览功能保姆级教程 💡核心作用 实现「代码编辑器 ↔ 界面预览 ↔ 组件树」三向实时连线，哪里点哪里改！

🔥 三大联动效果 1 点哪亮哪 ▪ 点击预览界面按钮 → 代码自动高亮对应段落 ▪ 选中代码片段 → 预览界面组件秒闪边框 ▪ 组件树点选 → 代码+界面同步高亮 2 双向秒改 ▪ 在右侧属性面板改字号 → 代码自动更新 + 界面立即刷新 ▪ 在代码里调颜色值 → 预览界面秒变新样式 3 组件追踪 ▪ 复杂布局中快速定位组件位置（再也不用代码里玩「找不同」）

🛠️ 开启步骤 1 打开任意.ets文件 2 点预览器顶部工具栏的「双箭头」图标 ↔ 3 看到组件树面板弹出 → 表示功能已激活

⚠️ 使用限制（这些情况用不了） 场景 具体表现 服务卡片开发 完全不可用 数据绑定的组件 属性面板变灰无法修改 带动画效果的组件 宽高/位置等属性锁死 多设备同时预览时 功能自动关闭

💡 实战技巧 问题：改属性面板没反应？ ​​解法​​：检查组件是否有@State绑定数据，这类组件需直接改代码 问题：代码改了但预览不更新？ ​​解法​​： 1 确认没开多设备预览模式 2 关闭后重新打开双向预览开关

🎯 典型应用场景 1 快速微调UI细节 2 → 在属性面板拖拽调整边距，实时看效果 3 排查布局错位 4 → 组件树点选异常组件，代码自动跳转定位 5 团队协作演示 6 → 边讲解边点击组件，新人秒懂代码结构

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

xxxxxxxxxx

开发调试神器！用Hamock实现预览环境数据模拟

​

🛠️ 快速配置

前置条件

1. 在oh-package.json5添加开发依赖：

"devDependencies": {
    "@ohos/hamock": "1.0.0"
}

	1	执行`npm install`安装并同步工程
🔥 两大核心功能
一、组件级模拟（UI部分）
场景案例：模拟按钮点击效果

xxxxxxxxxx


 


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

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

xxxxxxxxxx


 


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

二、模块级模拟（系统API/本地方法）
案例1：模拟路由参数

xxxxxxxxxx


 


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

案例2：模拟本地工具类

xxxxxxxxxx


 


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

📂 配置文件说明
在`src/mock/mock-config.json5`中配置映射：

xxxxxxxxxx


 


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

💡 使用贴士
最佳实践：
	1	**验证生效**：添加Hilog日志打印模拟结果

xxxxxxxxxx


 


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

	1	
避坑指南
：
	▪	要Mock`@ohos.router`必须保留原方法（如pushUrl）
	▪	组件属性如果是`readonly`无法被Mock
	▪	本地模块路径必须包含`.ets`后缀
常见Q&A：
**Q1：为什么Mock没生效？**
 👉检查`mock-config.json5`路径是否正确
 👉查看Log输出是否有模拟数据打印
**Q2：能同时Mock多个模块吗？**
 👉可以！每个模块独立创建mock文件并在配置中声明
**Q3：真机会执行Mock代码吗？**
 👉不会！所有Mock仅在预览环境生效

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