鸿蒙OS开辟实战：Inspector双向预览/预览数据模仿

DevEco Studio提供HarmonyOS应用/服务的UI预览界面与源代码文件间的双向预览功能，支持ets文件与预览器界面的双向预览。使用双向预览功能时，需要在预览器界面单击

图标打开双向预览功能。
   分析
  暂不支持服务卡片的双向预览功能。
  

开启双向预览功能后，支持代码编辑器、UI界面和Component Tree组件树三者之间的联动：

• 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同期间码编辑器中的布局文件中对应的代码块高亮显示。
  
• 选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
  

• 选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。
  

在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会自动同步到代码编辑器中修改源码，并实时的刷新UI界面；同样的，假如在代码编辑器中修改源码，也会实时刷新UI界面，并更新组件树信息及组件属性。
   分析
  

• 假如组件有做数据绑定，则其属性不支持在属性面板修改。
  
• 假如界面有使用动画效果大概动员画效果组件，则其属性不支持在属性面板修改。
  
• 多装备预览时，不支持双向预览。
  

    分析
  仅API 11及以上版本的Stage工程支持。
  在预览场景中，由于代码的运行环境与真机装备上的运行环境差异，调用部分接口时无法获取到有用的返回值（例如获取电池电量信息等，在预览场景下batteryInfo.voltage返回的是一个固定的值0），这样开辟者就无法在预览时检察到差异返回值带来的界面变革。因此，Hamock提供了预览场景的模仿功能，在不改变业务运行逻辑的同时，开辟者可以模仿UI组件上的属性或方法，或模仿import的模块接口。
使用前提

使用Hamock在预览场景模仿，需要在工程或模块的oh-package.json5中添加该依靠，然后重新同步工程。

1. "devDependencies": {
2.     "@ohos/hamock": "1.0.0"
3. }

复制代码

UI组件上的Mock

Hamock提供了@MockSetup用于修饰Mock方法，仅支持声明式范式的组件。当开辟者预览该组件时，预览运行时将在组件初始化时执行被@MockSetup修饰的方法。因此，开辟者可以在这个被修饰的方法内重界说组件的方法或重赋值组件的属性，其将在预览时生效。
   分析
  @MockSetup修饰的方法仅在预览场景会自动触发，并先于组件的aboutToAppear执行。
  UI组件的方法

• 在ArkTS页面代码中引入Hamock。
  1. import { MockKit, when, MockSetup } from '@ohos/hamock';

  复制代码
• 在目标组件中界说一个方法，并用@MockSetup修饰该方法。在这个方法中，使用MockKit模仿目标方法。
  1. import { MockKit, when, MockSetup } from '@ohos/hamock';
  3. @Entry
  4. @Component
  5. struct Index {
  6. ...
  7. @MockSetup
  8. randomName() {
  9.   let mocker: MockKit = new MockKit();
  10.   let mockfunc: Object = mocker.mockFunc(this, this.method1);
  11.   // mock 指定的方法在指定入参的返回值
  12.   when(mockfunc)('test').afterReturn(1);
  13. }
  14. ...
  15. // 业务场景调用方法
  16. const result = this.method1('test'); // in previewer, result = 1
  17. }

  复制代码

UI组件的属性

• 在ArkTS页面代码中引入Hamock。
  1. import { MockSetup } from '@ohos/hamock';

  复制代码
• 在目标组件中界说一个方法，并用@MockSetup修饰该方法。在这个方法中，对于需要Mock的属性，可以重新赋值。
  1. import { MockSetup } from '@ohos/hamock';
  3. @Component
  4. struct Person {
  5. @Prop species: string;
  6. // 在@MockSetup片段中，定义对象属性
  7. @MockSetup
  8. randomName() {
  9.   this.species = 'primates'
  10. }
  11. ...
  12. // 业务场景调用属性（如果从初始化到调用期间，该属性无变化）
  13. const result = this.species // in previewer, result = primates
  14. }

  复制代码

   分析
  

• ArkUI部分类型属性不支持Mock，如readonly、@ObjectLink。
  
• 被@Link/@Consume/@Prop/@BuilderParam装饰器修饰的变量，ArkUI语法要求父容器需要有对应属性的界说，因此更推荐开辟者通过界说⼀个预览场景父容器（并通过父容器传递合适的数据）来预览这⼀类的组件。
  

  模块的Mock

系统模块/依靠的模块

• 在src/mock目次下新建一个ArkTS文件，在这个文件内界说目标Module的Mock实现。
  1. import router from '@ohos.router';
  3. // 定义或导入 routerParam 的返回值类型
  4. interface PageRouterParam {
  5. name: string
  6. }
  8. // 定义 mock 实现
  9. const MockRouter: Record<string, Object> = {
  10. 'getParams': () => {
  11.   return { name: 'Mocked' } as PageRouterParam;
  12. },
  13. // 复用原始实现
  14. 'pushUrl': router.pushUrl,
  15. 'replaceUrl': router.replaceUrl,
  16. ...
  17. };
  19. export default MockRouter;

  复制代码
        分析
     
  
  
  
  • 假如用户在界说Mock的实现时，未复用原始实现，则在预览运⾏时，当业务代码调用到未被Mock的接口方法时，实际将调用到undefined的对象。
    
  • 目标模块与Mock实现代码是⼀对⼀的关系。对同⼀个模块，只⽀持有⼀份Mock实现代码。预览运行时所有页面import该模块都将指向为Mock实现代码。
    
  
  
• 在Mock配置文件（src/mock/mock-config.json5）中界说目标Module与Mock实现的替换关系。该替换关系仅会在预览场景下生效。
  1. {
  2. "@ohos.router": { // 待替换的moduleName
  3.   "source": "src/mock/module/ohos/router.mock.ets" // mock代码的路径，相对于模块根目录
  4. },
  5. ...
  6. }

  复制代码
• 在原调用处中添加Hilog日志，方便在预览时，在Log中打印获取返回值，从而验证Mock是否生效。
  1. hilog.debug(DomainNumber, logTag, 'Mock %{public}s', router.getParams()['name']);

  复制代码

本地模块

• 在src/mock目次下新建一个ArkTS文件，在这个文件内界说目标Module的Mock实现。
  1. // import local module
  2. import LibDefaultExport from '../../../main/ets/utils/CommonUtils'; // get origin default export
  3. import { methodA, ObjectB } from '../../../main/ets/utils/CommonUtils'; // get origin export on demand
  4. class DefaultExportMock extends LibDefaultExport {
  5.   // 定义mock实现
  6.   public static getName(): String {
  7.     return "Mocked Name";
  8.   }
  9. };
  10. export {
  11.   methodA,
  12.   ObjectB,
  13. }
  14. export default DefaultExportMock;

  复制代码
  此中CommonUtils.ets文件示例如下：
  
  1. export default class CommonUtils {
  2.   public static getName(): String {
  3.     return "origin name";
  4.   }
  6.   public static getTitle(): String {
  7.     return "origin title";
  8.   }
  9. }
  11. export const methodA = (): string => {
  12.   return "methodA"
  13. }
  15. export const ObjectB: Object = new Object();

  复制代码
        分析
      本地Module的Mock仅支持src/main/ets目次下的ArkTS或TS文件。
  
• 在Mock配置文件（src/mock/mock-config.json5）中界说目标Module与Mock实现的替换关系。该替换关系仅会在预览场景下生效。
  1. {
  2. "utils/CommonUtils.ets": { // 本地module只支持ets/xxx的相对路径，并需明确文件后缀
  3.   "source": "src/mock/module/utils/CommonUtils.mock.ts"
  4. },
  5. ...
  6. }

  复制代码
• 在原调用处中添加Hilog日志，方便在预览时，在Log中打印获取返回值，从而验证Mock是否生效。
  1. hilog.debug(DomainNumber, logTag, 'Mock %{public}s', CommonUtils.getName());

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。