如何提高自定义组件的开发效率

引言

本文将通过前端的开发者模式带领大家提高自定义组件的开发效率

支持2024年9月6日之后用npm i安装的4.7.x之后的所有版本

介绍前端开发者模式

开发者模式的特性

  1. 浏览器控制台可以看到更多利于开发的日志输出
  2. 页面顶部状态栏消息模块的轮询接口,将只在页面刷新后请求一次,这样会减少开发阶段不必要的请求,以及解决后端断点调试的时候被消息轮询干扰的问题
  3. 页面视图的数据将不在走缓存,而是每次实时从base_view表里查询template字段获取,方便需要实时看通过xml修改的页面效果

如何进入开发者模式

通过在浏览器地址栏后追加;mode=dev刷新页面进入开发者模式,页面加载后可以在浏览器开发者工具的应用标签下的本地存储空间(即localStorage)中看到本标识的存储,如果想退出开发者模式可以手动清除该值
如何提高自定义组件的开发效率

开发者模式的应用场景

1.通过控制台跳转到视图动作(ViewAction)的调试页面

页面刷新后,可以在浏览器开发者工具的控制台看到如下图的日志输出,直接点击该链接可以跳转到当前页面的调试链接
如何提高自定义组件的开发效率
弹窗视图动作、抽屉视图动作等以弹出层为展示效果的页面,之前的版本是无法进入调试链接查看的,现在可以在弹窗等视图动作点击后在控制台看到该链接点击进入调试页面
如何提高自定义组件的开发效率

2.查看页面母版(mask)、布局(layout)的匹配情况

母版(mask)匹配结果
如何提高自定义组件的开发效率
布局(layout)匹配结果
如何提高自定义组件的开发效率
如何提高自定义组件的开发效率

3.查看视图组件(View)、字段组件(Field)、动作组件(Action)的匹配情况

通过浏览器开发者工具的控制台,我们可以看到每个视图、字段、字段匹配到的组件的class类名,这样我们就知道当前用的是那个组件,在自定义的时候可以在源码查看该组件类的实现代码,然后再选择是否继承该父类。另外我们在给组件定义SPI条件的时候,可以参考匹配入参匹配结果内的属性。

  • 匹配入参是当前元数据SPI的最全量注册条件
  • 匹配结果是当前匹配到的组件的注册条件,一般情况下我们只需要在匹配结果的条件加上当前模型编码(model)视图名称(viewName)字段名称(name)动作名称(actionName)等条件就可以完成自定义组件的覆盖。
    如何提高自定义组件的开发效率如何提高自定义组件的开发效率
    在浏览器开发者工具的控制台,通过模型编码、视图名称、字段名称、动作名称等关键字快速搜索定位到需要查找的组件

    控制台搜索快捷键:win系统通过ctrl+f,mac系统通过cmd+f
    如何提高自定义组件的开发效率

总结

在确保自定义部分代码最终正确被import导入到启动工程main.ts内的情况下,可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/17071.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(2)
nation的头像nation数式员工
上一篇 2024年9月5日 下午11:11
下一篇 2024年9月6日 上午11:38

相关推荐

  • Class Component(ts)(v4)

    Class Component 一种使用typescript的class声明组件的方式。 IWidget类型声明 IWidget是平台内所有组件的统一接口定义,也是一个组件定义的最小集。 /** * 组件构造器 */ export type WidgetConstructor<Props extends WidgetProps, Widget exte…

    2023年11月1日
    42400
  • 【前端】项目开发前端知识要点地图

    概述 下面整理了目前现有的所有文章,并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。 目录 基础篇 【路由】浏览器地址栏url参数介绍 母版-布局-DSL 渲染基础(v4)* 组件SPI机制(v4)* 组件数据交互基础(v4)* 组件生命周期(v4) 入门篇 自定义视图组件(v4)* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的…

    2024年5月25日
    2.3K00
  • 如何自定义指定页面的样式

    可以通过在layout上给页面元素加css的class来解决此问题 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <!– 给视图加class -…

    2024年8月16日
    43800
  • 登录页自定义配置如何使用

    介绍 为满足大家对登录页面不同的展示需求,oinone在登录页面提供了丰富的配置项以支持大家在业务上的个性化需求 配置方式 在manifest.js内新增以下配置选项 manifest.js文件如何配置的参考文档 runtimeConfigResolve({ login: { /** * 登录按钮label */ loginLabel: '登录&#…

    2024年4月24日
    48200
  • 「前端」获取系统配置

    「前端」获取系统配置 简介 系统配置对于前端开发至关重要,它包含了许多关键信息,通过调用「systemMajorConfig」API,可以轻松地获取这些关键配置信息。除了主要的系统配置外,底层还提供了一些快捷的API,比如获取当前主题、当前主题大小、登录页面主题、版权状态和默认浏览器信息。 使用步骤 调用「systemMajorConfig」API获取系统配…

    2023年11月1日
    34400

发表回复

登录后才能评论