自定义页面类型

功能介绍

开发者可以根据自身业务需求，开发页面类型。后续开发自定义页面模版、uni-app 手机端渲染、初始化站点数据都会用到

框架定义的页面类型

系统框架开发的页面类型：首页、个人中心、微页面

以及加载插件的自定义页面类型

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

文件位置：niucloud-core/src/main/resources/core/loader/diy/template.json

插件开发的页面类型

文件位置：：niucloud-addon/shop/src/main/resources/shop/loader/diy/ 目录下，新建 template.json

关键代码

{
    "DIY_SHOP_INDEX": {     // 页面类型关键字key
        "title": "商城首页",    // 页面类型名称
        "page": "/addon/shop/pages/index",  // 页面路由
        "action": "decorate",   // 页面是否装修标识，为空标识不装修，decorate：装修
        "type": "index" // 页面类型，index：首页、member_index：个人中心，空：普通页面
    }
}

自定义页面模版

功能介绍

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

框架定义的页面模版

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

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

文件位置：niucloud-core/src/main/resources/core/loader/diy/pages.json

插件开发页面模版

文件位置：niucloud-addon/shop/src/main/resources/shop/loader/diy/pages.json

代码说明

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

data 实际是编辑自定义模版后的数据结构，你可以自己编辑一个自定义模板，然后根据返回的数据整理一下做为制作自定义样式的数据，比如上述双十一模板样式

最后要站点数据初始化

自定义链接

功能介绍

自定义链接功能支持用户在 DIY 页面装修中为按钮、图片、文字等组件配置点击跳转行为，支持内部页面、外部 URL 和特殊场景的跳转类型，精准且符合业务场景需求

自定义链接会在页面路径功能中显示

框架开发的自定义链接

系统框架定义了一些自定义链接，同时还会加载插件的自定义链接

如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：niucloud-core/src/main/resources/core/loader/diy/links.json

插件开发自定义链接

文件位置：niucloud-addon/shop/src/main/resources/shop/loader/diy/links.json

关键代码：

{
    "SHOP_BASE_LINK": {     // 自定义链接分组关键字key
        "title": "商城系统",    // 自定义链接分组名称
        "type": "folder",   // 类型，folder 表示文件夹，link 表示链接
        "addon_info": {
            "title": "商城",
            "key": "shop"
        },
        "child_list": [
            {
                "name": "SHOP_LINK",    // 二级自定义链接分组关键字key
                "title": "商城链接",    // 分组名称
                "child_list": [
                    {
                        "name": "SHOP_INDEX", // 链接关键字key
                        "title": "商城首页",    // 链接名称
                        "url": "/addon/shop/pages/index",   // uni-app 手机端路由地址
                        "is_share": 1,  // 是否支持分享  1：支持，0：不支持
                        "action": "decorate"    // 是否支持装修，空为不支持，decorate：表示支持装修
                    },
                    {
                        "name": "SHOP_GOODS_CATEGORY",
                        "title": "商品分类",
                        "url": "/addon/shop/pages/goods/category",
                        "is_share": 1,
                        "action": ""
                    }

                ]
            }

        ]
    }
}

打开完成后，添加一个标题组件，点击链接地址，打开链接选择弹框即可看到

diy-link 框架封装的自定义链接组件

开发者在开发自定义组件的右侧编辑属性组件时，可能需要设置自定义链接的业务场景。此时可以引入系统框架封装的 diy-link 自定义链接选择弹框组件

效果图

如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：admin/src/components/diy-link/index.vue

前端调用自定义链接组件的关键代码

diyStore.editComponent 为当前选中装修组件的数据结构

<el-form-item :label="t('link')">
    <diy-link v-model="diyStore.editComponent.link" />
</el-form-item>

效果图

uni-app 调用自定义链接跳转

框架定义了 diyRedirect 自定义跳转链接方法

diyStore 定义了 toRedirect 自定义链接跳转方法，开发者可以调用

自定义组件中调用自定义链接跳转，代码参考