[鸿蒙征文]Previewer 预览器数据模拟

2025-08-11
上海
本文字数：1985 字
阅读完需：约 7 分钟

前言

在我看来，鸿蒙应用开发最大的一个优势在于它的预览器非常方便直观，可以实时调试界面布局，并迅速生效。然而很多时候，页面上的内容依赖数据源。预览器能力有限，而且出于性能考虑，在预览的时候使用真实数据是没必要的。Dev Eco Studio 针对这种开发场景提供了一个预览数据模拟的功能。

开发环境：

Windows 11

DevEco Studio 6.0.0 Beta1

Build Version: 6.0.0.418SP, built on June 24, 2025

运行环境：

模拟器

HarmonyOS 6.0.0(20) Beta1

参考文档：

预览数据模拟

添加依赖

在工程下方的终端窗口中输入命令

cd entryohpm install @ohos/hamock

复制代码

或者在oh-package.json5中手动添加依赖

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

复制代码

UI 组件上的 Mock

Hamock 提供了@MockSetup用于修饰 Mock 方法，仅支持声明式范式的组件。当开发者预览该组件时，预览运行时将在组件初始化时执行被 @MockSetup 修饰的方法。因此，开发者可以在这个被修饰的方法内重定义组件的方法或重赋值组件的属性，其将在预览时生效。

@MockSetup修饰的方法仅在预览场景会自动触发，并先于组件的 aboutToAppear 执行。

如果写了多个以@MockSetup修饰的方法，只会执行第一个声明的方法，之后声明的方法都被忽略。

创建一个界面Index

   import { router } from '@kit.ArkUI'      @Entry   @Component   struct Index {     @State title: string = "title"        setup() {       return "setup"     }        build() {       Column() {         Text(this.title)           .fontSize(50)           .id("title")           .onClick(() => {             router.pushUrl({               url: "pages/SecondPage",             })           })       }       .alignItems(HorizontalAlign.Center)       .justifyContent(FlexAlign.Center)       .height('100%')       .width("100%")       .backgroundColor("#DCDCDC")       .padding({ top: 10, bottom: 10 })     }   }

复制代码

模拟器和预览器的截图对比，现在为止两边是一样的。

在 ArkTS 页面代码中引入 Hamock。

   import { MockKit, when, MockSetup } from '@ohos/hamock';

复制代码

在 Index 中定义一个方法mockTitle()，并用 @MockSetup 修饰该方法，这个方法名可以随意取，并且不需要传入参数。

   @MockSetup   mockTitle() {     this.title = "title mock"   }

复制代码

现在看下效果，立竿见影。预览窗的 Text 控件直接显示了"title mock"。说明预览窗执行了mockTitle()方法，但运行工程的的话，没有执行该方法。

如果在aboutToAppear()中如果对 title 属性有修改，那么运行和预览都会统一变成aboutToAppear()中修改的值。因为预览@MockSetup执行完之后会执行aboutToAppear()，运行也会直接执行aboutToAppear()。

   aboutToAppear(): void {     this.title = "aboutToAppear"   }

复制代码

除了直接改属性值，还能 mock 方法返回值。创建一个新方法setup()，返回字符串"setup"。

   setup() {     return "setup"   }

复制代码

在aboutToAppear()中用 setup()的返回值设置 title 的值

   aboutToAppear(): void {     this.title = this.setup()   }

复制代码

在@MockSetup中按如下代码编写。this.title = "title mock"继续保留，可以观察出来代码的执行顺序。然后创建一个MockKit实例，调用mocker.mockFunc()来绑定需要 mock 的方法。最后调用when()来配置 mock 的入参和出参。这一步我们先学习如何 mock 函数返回值。在afterReturn()中传入 mock 的返回值

   @MockSetup   mockTitle() {     this.title = "title mock"     const mocker: MockKit = new MockKit();     const mockfunc: Object = mocker.mockFunc(this, this.setup);     // mock 指定的方法在指定入参的返回值     when(mockfunc)().afterReturn("setup mock")   }

复制代码

现在预览器的执行顺序是，@MockSetup中修改了 title 值，并 mock 了setup()函数的返回值。之后代码走到aboutToAppear()，title 又被修改。
此处如果是运行的状态，setup()返回字符串"setup"，如果是预览器，则setup()的返回值被 mock 成了"setup mock"。
如果setup()接受参数，则配置 mock 的时候需要指定入参的内容，只有入参匹配上，mock 才会生效。
修改setup()和aboutToAppear()方法

   setup(value: string) {     return value   }      aboutToAppear(): void {     this.title = this.setup("aboutToAppear")   }

复制代码

根据修改后的setup()入参，@MockSetup应该这样修改

   @MockSetup   mockTitle() {     this.title = "title mock"     const mocker: MockKit = new MockKit();     const mockfunc: Object = mocker.mockFunc(this, this.setup);     // mock 指定的方法在指定入参的返回值     when(mockfunc)("aboutToAppear").afterReturn("aboutToAppear mock")   }

复制代码

此时 mock 生效