diy自定义组件/页面装修开发——自定义页面模板

自定义页面模板

功能介绍

每种自定义页面类型可以定义N个自定义页面模板,维护好自定义页面模板后,可以在装修时快速创建、调整

框架定义的页面模板

系统框架定义了系统首页、系统个人中心的页面模板,同时会加载插件的自定义页面模板

如需了解自定义页面模板的核心原理,开发者可以自行阅读

文件位置:niucloud/app/dict/diy/PagesDict.php

插件开发页面模板

文件位置:niucloud/addon/shop/app/dict/diy/pages.php

代码说明

复制代码
<?php

return [
    'DIY_SHOP_INDEX' => [ // 页面类型关键字key
        'shop_index_style1' => [ // 页面模板标识key
            "title" => "商城首页1", // 页面模板名称
            'cover' => '', // 页面模板封面图
            'preview' => '', // 页面模板预览图
            'desc' => '', // 页面模板描述
            'mode' => 'diy', // 页面模式:diy:自定义,fixed:固定
            "data" => [
                // todo 自定义页面模板数据结构
            ]
        ]
    ]
];

维护自定义页面模板时,根据美工设计的原型图,先装修出来

然后打开数据库,找到diy_page数据表。在表中找到那条数据,然后复制value字段的值

格式化value的值,可以看到自定义页面的数据结构

将value转化成php的格式,当道data中即可

关键代码

复制代码
<?php

return [
    'DIY_SHOP_INDEX' => [ // 页面类型关键字key
        'shop_index_style1' => [ // 页面模板标识key
            "title" => "商城首页1", // 页面模板名称
            'cover' => '', // 页面模板封面图
            'preview' => '', // 页面模板预览图
            'desc' => '', // 页面模板描述
            'mode' => 'diy', // 页面模式:diy:自定义,fixed:固定
            "data" => [
                // 自定义页面JSON数据结构
                ...global
                ...value
            ]
        ]
    ]
];

注意:如果装修页面时上传了图片,在维护页面模板时,要把路径改成相对路径,放到自己开发的插件目录下的图片资源文件的存放位置自行管理

目录位置:niucloud/public/addon/shop

相关推荐
方安乐几秒前
react笔记之useMemo
前端·笔记·react.js
清风细雨_林木木8 分钟前
react 中 form表单提示
前端·react.js·前端框架
小二·15 分钟前
Python Web 开发进阶实战:边缘智能网关 —— 在 Flask + MicroPython 中构建轻量级 IoT 边缘推理平台
前端·python·flask
TOPGUS17 分钟前
解析200万次对话数据:ChatGPT引用内容的核心特征与优化策略
前端·人工智能·搜索引擎·chatgpt·seo·数字营销
羊仔AI探索25 分钟前
前端已死,未来已来,谷歌Gemini 3 Pro杀回来了!
前端·人工智能·ai·aigc
快起来搬砖了28 分钟前
UniApp/Vue2 通用工具函数库(完整版):覆盖校验、格式、业务全场景
前端·uni-app
GGGG寄了39 分钟前
HTML——图像标签及多媒体标签
前端·html
小小码农Come on1 小时前
QPushButton QSS(一):按钮常用qss
前端·javascript·css·qt5
Booksort1 小时前
React+js环境配置(极速版)
前端·javascript·react.js
YAY_tyy1 小时前
Cesium 基础:地球场景初始化与视角控制
前端·cesium