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

引言

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

支持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

相关推荐

  • 【界面设计器】自定义字段组件实战——千分位输入框

    阅读之前 此文章为实战教程,已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解,请自行学习相关内容。【前端】文章目录 业务背景 用户在输入【金额】字段时,实时展示千分位格式。 业务分析 从需求来看,我们需要实现一个【千分位】组件,并且该组件允许在【表单】视图中使用。 扩展实现:该组件虽然仅要求在【表单】中使…

    2023年11月1日
    23400
  • 弹窗或抽屉表单视图rootRecord获取不到对应的数据

    在平台默认的实现中,rootRecord 代表的是根视图的数据。比如,在表格页面点击按钮打开了弹窗,弹窗里面包含一个表单视图,但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据,需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据: @S…

    2023年11月13日
    67100
  • 如何自定义表格单元格样式

    介绍 OinOne的表格是基于Vxe-Table实现的,我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式,表头的样式、表尾的样式、全部都可以完全自定义,通过设置 cellClassN…

    2024年10月30日
    42600
  • 【界面设计器】自定义字段组件实战——轮播图

    阅读之前 此文章为实战教程,已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解,请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片,并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看,我们需要实现一个【轮播图】组件,并且该组件允许在【详情】视图中使…

    2023年11月1日
    88600
  • 前端进阶知识点讲解

    相关知识点参考 前端文章大纲:https://doc.oinone.top/shu-shi-oinone-xue-yuan/xiang-mu-shi-jian-qian-duan-kai-fa-chong-dian-zhan/qian-duan-ji-chu/19196.html 前端项目开发前端知识要点地图:https://doc.oinone.top/f…

    2024年10月8日
    35000

发表回复

登录后才能评论