ArkUI预览器使用说明书
🚀 核心功能速览
- 实时预览（秒级刷新）
▪ 闪电效果：改文字/颜色后按Ctrl+S，1秒内自动刷新
▪ 省电模式：默认开启，不需要时可关闭右上角开关
▪ ⚠️ 配置文件修改后需手动点「重新加载」 - 动态预览（真机体验）
▪ 点击/滑动/跳转：操作手感与真机完全一致
▪ 动态效果测试：支持页面转场动画等交互验证
📱 设备支持清单
设备类型
开发语言
典型设备
手机/平板/车机
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实现预览环境数据模拟
🛠️ 快速配置
前置条件
在
oh-package.json5添加开发依赖：
```json
"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帮你做模拟
组件属性随便改，系统接口随心配！ 🚀
