巧筑虚拟星河:Dev中的预览技巧

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帮你做模拟