ArkUI预览器使用说明书

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

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

🚀 核心功能速览

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（相当于给页面贴个"主入口"标签）

示例代码：

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

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

示例代码：

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

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

• 手机/平板切换
• 中英文显示
• 横竖屏旋转
• 圆形手表屏

示例设置：

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

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

示例代码：

 @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： MatePad 11（2560x1600） MatePad Pro 13（2880x1920） 荣耀平板9（2200x1600）
2. 在所有平板上检查： ✅ 导航栏是否适配大屏幕 ✅ 图片是否拉伸模糊 ✅ 横屏时表格是否自动分栏

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

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

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

---

🔥 三大联动效果

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

---

🛠️ 开启步骤

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（预览专用）
@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，真机仍返回随机数

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

@Component
struct MyButton {
    @State text: string = '默认文字';

    @MockSetup
    mockText() {
        this.text = 'MOCK文字'; //🎨 预览时强制显示
    }
}

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

案例1：模拟路由参数

// 创建mock路由组件
// src/mock/module/ohos/router.mock.ets
const 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帮你做模拟 组件属性随便改，系统接口随心配！ 🚀