diy装修自定义组件开发

什么是DIY组件？我们把可以添加到自定义页面上的每个小功能叫做组件，通过子当以页面的装修可以实现所见即所得的自定义页面，目前系统默认的自定义页面有首页和会员中心，开发者可以通过配置实现自身业务的自定义页面的装修。

• 自定义页面后台配置如下

下面说明如何开发一个自定义组件

• 系统开发的自定义组件配置在niucloud-core模块对应/resources/core/loader/diy/components下面，如图所示

• 配置文件是一个json，其中第一级对应组件分组（如BASIC），然后对应分组名称(title),然后list列表，其中每一项就是一个组件

• 下面咱们针对图文导航组件进行说明，具体一个组件的字段如下

注意这里有几个方面继续说明，这里的后台自定义只是配置，需要前端管理端配置代码以及uniapp代码开发，后面会具体讲解，这里先说明原理，比如现在的图文导航

path是edit-graphic-nav， 这里指后台diy管理端配置的前端代码位置这里的图文导航有很多配置选项，比如横排，竖排，每行显示几个等等都有一个配置，这些配置成功之后会组装成json传到后台，同时系统配置也有初始化，这些都在后台的配置文件,具体配置字段多少与开发的组件有关

• 上面是针对后台的配置，再继续说明uniapp的配置，uniapp作用有两方面，一方面后台配置实时展示，另一方面针对配置后的结果展示在用户端

比如上述图文导航组件

• 前端uniapp的组件位置在app或者插件对应components/diy/组件，主题组件名称命名，这里是根据json中配置的组件名称按照小写与中划线

比如上面图文导航组件名称GraphicNav，对应uniapp的自定义组件名称就是graphinc-nav，下面就是针对图文导航的文件定义以及页面

• 关于自定义组件开发需要比较强的前端专业只是，开发之前可以复制一个比较简单的组件，改一下名称，反复调试。