diy自定义组件/页面装修开发指南

概述

第三方开发者可以通过开发DIY组件来扩展系统的页面装修功能。DIY组件是指可以添加到自定义页面上的独立功能模块，这些组件既可以供开发者自己使用，也可以开放给其他用户（包括其他开发者和最终用户）使用，极大地增强了系统的扩展性和灵活性。

装修管理使用手册请参考装修管理功能

功能介绍

框架支持自定义页面装修，用户可以通过「自由可视化拖拽+组件配置+实时预览」的方式，无需代码开发即可自定义生成页面（如商城首页、活动页、个人中心页等），同时满足开发者扩展自定义组件的需求，兼顾易用性与灵活性，适配多终端（H5/微信小程序）展示场景。 装修界面采用三栏式布局：左侧展示组件库供用户选择，中间区域提供实时预览功能，右侧面板用于编辑和配置所选组件的各项属性。

框架开发的自定义功能目录位置说明

框架开发的的自定义功能代码位置：niucloud/app/dict/diy

如需了解核心原理，开发者可以自行阅读：

• ComponentDict.php 自定义组件，以及加载插件的自定义组件

• LinkDict.php 自定义链接，以及加载插件的自定义链接

• PagesDict.php 自定义页面模板，以及加载插件的页面模板

• TemplateDict.php 自定义页面类型，以及加载插件的页面类型

框架开发的自定义页面装修

自定义页面装修核心代码

如需了解自定义页面装修的核心原理，开发者可以自行阅读

文件位置：admin\src\app\views\diy\edit.vue

该文件实现了整个装修界面的交互逻辑、组件管理和实时预览功能

页面装修store状态管理代码

装修过程中的状态管理通过Store模式实现

文件位置：admin\src\stores\modules\diy.ts 装修数据最终存储到数据表中的结构主要包含两大部分：

global：global对象为整体页面的数据结构，后续还会持续完善，实现更加灵活的自定义装修 value：value为组件集合，在装修时添加自定义组件会变化

uni-app手机端渲染自定义组件diy-group组件

在移动端（uni-app）中，自定义页面通过diy-group组件进行渲染。该组件负责解析和展示装修数据中的所有组件。

文件位置：uni-app/src/addon/components/diy/group/

自定义组件渲染store状态管理代码

该文件负责处理移动端组件的数据获取、解析和渲染逻辑

文件位置：uni-app/src/app/stores/diy.ts