自定义模板开发与模板配置参数说明文档

快速入门-必看

如果你想自定义开发一个模板，那么此文档的模板配置参数规则你一定得了解，每个模板都是需要进行配置的，让使用的人可以自由的动态修改模板页面内容

根据此文档进行自定义开发的模板对于系统管理的首页配置里面的模板和应用管理的应用官网配置里面的模板都是可以共同使用的，因为它们都是一样的规则一样的配置结构

一个文件夹对应一个模板，有2个文件是必要的(其他的模板所需文件可存放在模板所在位置)
index.html - 模板入口文件 (页面html代码,支持加入PHP代码)
config.json - 模板配置文件 (一般为以下结构)

{
    "name": "默认首页模板",
    "describe": "系统自带模板-默认首页模板",
    "config":[
        {
            "title": "配置栏目1",
            "controlShow": false,
            "config": [
                {
                    "title": "配置项1",
                    "describe": "无",
                    "componentType": "input",
                    "componentConfig": {
                        "type": "text",
                        "placeholder": "",
                        "style": {
                            "width": "auto"
                        }
                    },
                    "defaultValue": "栓Q验证系统",
                    "valueType": "string"
                }
            ]
        }
    ]
}

先不用着急了解config.json数据结构，我们可以先尝试创造一个自定义模板

在存放模板的文件夹创建一个文件夹，文件夹名称一般为模板的英文名

这时候系统还不会识别出来，因为缺少了必要的文件index.html和config.json

我们在模板文件夹创建index.html和config.json文件

然后在config.json文件粘贴以下代码

{
    "name": "我的自定义模板",
    "describe": "这是我的自定义模板描述内容",
    "config":[]
}

这时候后台就能刷新出来你的模板了

切换到自己添加的模板，可以成功切换和保存，但是模板参数配置里面是空的，因为还没有编写模板参数代码

访问效果，页面是空白的，因为模板入口文件里面就是空的，还没写任何的html代码

可以在index.html写一点东西

访问效果

既然要做自定义模板了，那自然内容不会那么简单了，可以引入一些图片、css、js，在模板文件夹里面创建对应存放文件的文件夹存放这些文件，当然你可以自定义存放在模板文件夹内的某处，这跟平常开发没区别

在模板入口文件引入这个css文件

访问效果

有的时候还需要让使用模板的人在后台进行设置，然后获取设置的数据输出到模板代码里面，那就需要在config.json编写配置参数代码了

可以复制以下代码粘贴到config.json文件(具体字段结构解释下面会讲)

{
    "name": "我的自定义模板",
    "describe": "这是我的自定义模板描述内容",
    "config":[
        {
            "title": "配置栏目一",
            "controlShow": false,
            "config": [
                {
                    "title": "配置项一",
                    "describe": "无",
                    "componentType": "input",
                    "componentConfig": {
                        "type": "text",
                        "placeholder": "",
                        "style": {
                            "width": "auto"
                        }
                    },
                    "defaultValue": "栓Q验证系统",
                    "valueType": "string"
                }
            ]
        }
    ]
}

此时后台刷新就能看见模板参数配置里面有东西了

将配置项一的内容改一下并且保存

再修改一下index.html

最后访问效果，这样就将后台设置的内容直接输出到html里了

模板配置参数与所有组件说明

上面讲到了一个模板的基本配置json代码为

{
    "name":"我的自定义模板",
    "describe":"这是我的自定义模板描述内容",
    "config":[
        {
            "title":"配置栏目一",
            "controlShow":false,
            "config":[
                {
                    "title":"配置项一",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":"栓Q验证系统",
                    "valueType":"string"
                }
            ]
        }
    ]
}

然后写了这个PHP代码，获取到后台的这个配置项的设置进行输出

其中的

co n f i g 变量就是模板配置文件里面的数据结构一样的，只不过会增加 2 个属性，以下就是

config打印输出结果

{
    "name":"我的自定义模板",
    "describe":"这是我的自定义模板描述内容",
    "config":[
        {
            "title":"配置栏目一",
            "controlShow":false,
            "currentIsShow":true,
            "config":[
                {
                    "title":"配置项一",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":"栓Q验证系统",
                    "valueType":"string",
                    "value":"你好"
                }
            ]
        }
    ]
}

对比后发现

1.在模板配置参数栏目列表root.config多了一个currentIsShow属性，这个属性就是对应的controlShow(配置参数栏目是否支持自主设置显示隐藏)设置所产生的，可以通过这个属性进行判断一整个配置参数栏目的所有组件关联的页面元素是否显示
2.在栏目内的配置项(组件)列表root.config.config字段多了一个value属性，这个属性就是每个配置项(组件)所保存的数据

因此php代码就能得到解释了

$co n f i g [^{'} co n f i g^{'}] [0] = 第一个配置参数栏目 < / d i v >< d i v >$ config['config'][0]]['config'][0] = 第一个配置参数栏目的第一个配置项
$config['config'][0]['config'][0]['value'] = 第一个配置参数栏目的第一个配置项的保存的数据 = 你好

明白了后台的配置项编写规则config.json与模板页index.html如何编写页面内容和取得后台的组件选项保存的数据后就可以进行正式开发模板了，你还可以配置各式各样的配置项组件来应对合适的数据场景，参考以下

根root字段结构说明

字段名	类型	必须	说明
name	string	是	模板名称
describe	string	是	模板描述
config	array	否	模板配置参数栏目列表

模板配置参数栏目列表root.config字段结构说明

字段名	类型	必须	说明
title	string	是	栏目名称
controlShow	bool	是	栏目是否支持自主设置显示隐藏
config	array	是	栏目内的配置项列表

栏目内的配置项(组件)列表root.config.config公共字段结构说明

注意，有的组件可能会有额外的字段，详细请参照对应组件说明

字段名	类型	必须	说明
title	string	是	配置项名称
describe	string	是	配置项说明描述
componentType	string	是	组件类型(下方会讲支持哪些)
componentConfig	object	是	组件属性(每个组件属性必要的成员不同)
valueType	string	是	组件设置的值的类型，下方会将支持哪些
defaultValue	any	否	组件默认值，默认值需遵从valueType字段
tableColumnTitles	array	否	所有列名称，组件类型为table时必须
tableColumnKeys	array	否	所有列的名称对应的key，组件类型为table时必须
tableColumnComponent	array	否	所有列对应的组件配置参数，组件类型为table时必须
arrayPushDefaultValue	array	否	组件类型为table时点击增加按钮push的对象数据结构，组件类型为table时必须

componentType组件类型说明

input - 输入框

组件类型：input
组件说明

输入框、多行输入框、支持所有原生input输入框

组件代码示例

{
    "title":"文本输入框",
    "describe":"无",
    "componentType":"input",
    "componentConfig":{
        "type":"text",
        "placeholder":"提示文本",
        "style":{
            "width":"auto"
        }
    },
    "defaultValue":"",
    "valueType":"string"
}

组件字段说明

字段名	类型	可空	说明
componentConfig.type	string	否	输入框类型，text=文本输入框，textarea=多行输入框，支持所有原生的input输入框类型，可参考文档https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types
componentConfig.placeholder	string	是	提示文本
componentConfig.style	object	是	组件样式对象(原生css样式)，有斜杠的样式注意转驼峰

组件演示

radio - 单选框

组件类型：radio
组件说明

单选框

组件代码示例

{
    "title":"单选框",
    "describe":"无",
    "componentType":"radio",
    "componentConfig":{
        "radioList":[
            {
                "name":"选项A",
                "value":"a"
            },
            {
                "name":"选项B",
                "value":"b"
            }
        ]
    },
    "defaultValue":"",
    "valueType":"string"
}

组件字段说明

字段名	类型	可空	说明
componentConfig.radioList	array	否	选项对象列表
componentConfig.radioList.item	object	否	选项对象，name=选项名称，value=选项值

组件演示

input-list - 输入框列表

组件类型：input-list
组件说明

动态输入框、多行输入框、支持所有原生input输入框

组件代码示例

{
    "title":"动态输入框组件",
    "describe":"无",
    "componentType":"input-list",
    "componentConfig":{
        "type":"text",
        "placeholder":"提示文本",
        "style":{
            "width":"auto"
        }
    },
    "defaultValue":[

    ],
    "valueType":"array"
}

组件字段说明

与input组件一致

组件演示

table - 列表多列动态组件

组件类型：table
组件说明

列表多列动态组件

组件代码示例

{
    "title":"输入框-有默认值",
    "describe":"无",
    "componentType":"table",
    "componentConfig":{

    },
    "defaultValue":[
        {
            "name":"客服1QQ:775294852",
            "url":"http://shuanq.cn"
        },
        {
            "name":"客服2QQ:3333337752",
            "url":"http://shuanq.cn"
        },
        {
            "name":"官方群:123456",
            "url":"http://shuanq.cn"
        }
    ],
    "valueType":"array",
    "tableColumnTitles":[
        "标题文字",
        "点击链接"
    ],
    "tableColumnKeys":[
        "name",
        "url"
    ],
    "tableColumnComponent":[
        {
            "componentType":"input",
            "componentConfig":{
                "type":"text",
                "placeholder":"",
                "style":{
                    "width":"auto"
                }
            }
        },
        {
            "componentType":"input",
            "componentConfig":{
                "type":"text",
                "placeholder":"",
                "style":{
                    "width":"auto"
                }
            }
        }
    ],
    "arrayPushDefaultValue":{
        "name":"",
        "url":""
    }
}

组件字段说明

字段名	类型	可空	说明
tableColumnTitles	array	否	所有列名称，列表有几列这里就得有对应列数的数据
tableColumnKeys	array	否	所有列的名称对应的key，列表有几列这里就得有对应列数的数据
tableColumnComponent	array	否	所有列对应的组件配置参数，目前只支持input组件的配置参数
arrayPushDefaultValue	array	否	组件类型为table时点击增加按钮push的对象数据结构，push的对象里的所有属性得跟tableColumnKeys一致

组件演示

image - 单个图片选择

组件类型：image
组件说明

单个图片选择

组件代码示例

{
    "title":"单选图片-有默认值",
    "describe":"无",
    "componentType":"image",
    "componentConfig":{

    },
    "defaultValue":"https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/image/2023/03/51078d64b96ef5db5a738e24beae32b9.png",
    "valueType":"string"
}

组件演示

image-list - 多个图片选择

组件类型：image-list
组件说明

多个图片选择

组件代码示例

{
    "title":"多选图片-有默认值",
    "describe":"无",
    "componentType":"image-list",
    "componentConfig":{
        "quantity":6
    },
    "defaultValue":[
        "https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/about/qrcode/%E7%88%B1%E7%A0%81%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1.png",
        "https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/image/2023/03/51078d64b96ef5db5a738e24beae32b9.png"
    ],
    "valueType":"array"
}

字段名	类型	可空	说明
componentConfig.quantity	number	否	最多可选择多少张

组件演示

所有组件代码示例

{
    "name":"我的自定义模板",
    "describe":"这是我的自定义模板描述内容",
    "config":[
        {
            "title":"输入框组件",
            "controlShow":false,
            "config":[
                {
                    "title":"文本输入框",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":"",
                    "valueType":"string"
                },
                {
                    "title":"数字输入框",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"number",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":"",
                    "valueType":"string"
                },
                {
                    "title":"日期输入框",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"date",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":"",
                    "valueType":"string"
                },
                {
                    "title":"自定义样式",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"100%",
                            "fontSize":"20px"
                        }
                    },
                    "defaultValue":"文本内容",
                    "valueType":"string"
                },
                {
                    "title":"多行输入框",
                    "describe":"无",
                    "componentType":"input",
                    "componentConfig":{
                        "type":"textarea",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        },
                        "rows":6
                    },
                    "defaultValue":"type字段还可以支持textarea 和其他 原生 input 的 type 值 参考文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types",
                    "valueType":"string"
                }
            ]
        },
        {
            "title":"单选框组件",
            "controlShow":false,
            "config":[
                {
                    "title":"单选框",
                    "describe":"无",
                    "componentType":"radio",
                    "componentConfig":{
                        "radioList":[
                            {
                                "name":"选项A",
                                "value":"a"
                            },
                            {
                                "name":"选项B",
                                "value":"b"
                            }
                        ]
                    },
                    "defaultValue":"",
                    "valueType":"string"
                },
                {
                    "title":"单选框-默认选中A",
                    "describe":"无",
                    "componentType":"radio",
                    "componentConfig":{
                        "radioList":[
                            {
                                "name":"选项A",
                                "value":"a"
                            },
                            {
                                "name":"选项B",
                                "value":"b"
                            }
                        ]
                    },
                    "defaultValue":"a",
                    "valueType":"string"
                }
            ]
        },
        {
            "title":"输入框列表",
            "controlShow":false,
            "config":[
                {
                    "title":"动态输入框组件",
                    "describe":"无",
                    "componentType":"input-list",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":[

                    ],
                    "valueType":"array"
                },
                {
                    "title":"动态输入框组件-默认值-2个",
                    "describe":"无",
                    "componentType":"input-list",
                    "componentConfig":{
                        "type":"text",
                        "placeholder":"提示文本",
                        "style":{
                            "width":"auto"
                        }
                    },
                    "defaultValue":[
                        "默认值1",
                        "默认值2"
                    ],
                    "valueType":"array"
                }
            ]
        },
        {
            "title":"列表多列动态组件",
            "controlShow":false,
            "config":[
                {
                    "title":"输入框",
                    "describe":"无",
                    "componentType":"table",
                    "componentConfig":{

                    },
                    "defaultValue":[

                    ],
                    "valueType":"array",
                    "tableColumnTitles":[
                        "大标题",
                        "小标题",
                        "点击链接"
                    ],
                    "tableColumnKeys":[
                        "title",
                        "sub_title",
                        "url"
                    ],
                    "tableColumnComponent":[
                        {
                            "componentType":"input",
                            "componentConfig":{
                                "type":"text",
                                "placeholder":"",
                                "style":{
                                    "width":"auto"
                                }
                            }
                        },
                        {
                            "componentType":"input",
                            "componentConfig":{
                                "type":"text",
                                "placeholder":"",
                                "style":{
                                    "width":"auto"
                                }
                            }
                        },
                        {
                            "componentType":"input",
                            "componentConfig":{
                                "type":"text",
                                "placeholder":"",
                                "style":{
                                    "width":"auto"
                                }
                            }
                        }
                    ],
                    "arrayPushDefaultValue":{
                        "name":"",
                        "url":""
                    }
                },
                {
                    "title":"输入框-有默认值",
                    "describe":"无",
                    "componentType":"table",
                    "componentConfig":{

                    },
                    "defaultValue":[
                        {
                            "name":"客服1QQ:775294852",
                            "url":"http://shuanq.cn"
                        },
                        {
                            "name":"客服2QQ:3333337752",
                            "url":"http://shuanq.cn"
                        },
                        {
                            "name":"官方群:123456",
                            "url":"http://shuanq.cn"
                        }
                    ],
                    "valueType":"array",
                    "tableColumnTitles":[
                        "标题文字",
                        "点击链接"
                    ],
                    "tableColumnKeys":[
                        "name",
                        "url"
                    ],
                    "tableColumnComponent":[
                        {
                            "componentType":"input",
                            "componentConfig":{
                                "type":"text",
                                "placeholder":"",
                                "style":{
                                    "width":"auto"
                                }
                            }
                        },
                        {
                            "componentType":"input",
                            "componentConfig":{
                                "type":"text",
                                "placeholder":"",
                                "style":{
                                    "width":"auto"
                                }
                            }
                        }
                    ],
                    "arrayPushDefaultValue":{
                        "name":"",
                        "url":""
                    }
                }
            ]
        },
        {
            "title":"图片组件",
            "controlShow":false,
            "config":[
                {
                    "title":"单选图片",
                    "describe":"无",
                    "componentType":"image",
                    "componentConfig":{

                    },
                    "defaultValue":"",
                    "valueType":"string"
                },
                {
                    "title":"单选图片-有默认值",
                    "describe":"无",
                    "componentType":"image",
                    "componentConfig":{

                    },
                    "defaultValue":"https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/image/2023/03/51078d64b96ef5db5a738e24beae32b9.png",
                    "valueType":"string"
                },
                {
                    "title":"多选图片-有默认值",
                    "describe":"无",
                    "componentType":"image-list",
                    "componentConfig":{
                        "quantity":6
                    },
                    "defaultValue":[
                        "https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/about/qrcode/%E7%88%B1%E7%A0%81%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1.png",
                        "https://aimakeji-static.oss-cn-hangzhou.aliyuncs.com/image/2023/03/51078d64b96ef5db5a738e24beae32b9.png"
                    ],
                    "valueType":"array"
                }
            ]
        }
    ]
}

自定义模板开发与模板配置参数说明文档

快速入门-必看#

模板配置参数与所有组件说明#

根root字段结构说明#

模板配置参数栏目列表root.config字段结构说明#

栏目内的配置项(组件)列表root.config.config公共字段结构说明#

componentType组件类型说明#

input - 输入框#

radio - 单选框#

input-list - 输入框列表#

table - 列表多列动态组件#

image - 单个图片选择#

image-list - 多个图片选择#

所有组件代码示例#

快速入门-必看

模板配置参数与所有组件说明

根root字段结构说明

模板配置参数栏目列表root.config字段结构说明

栏目内的配置项(组件)列表root.config.config公共字段结构说明

componentType组件类型说明

input - 输入框

radio - 单选框

input-list - 输入框列表

table - 列表多列动态组件

image - 单个图片选择

image-list - 多个图片选择

所有组件代码示例