67 lines
3.1 KiB
Markdown
67 lines
3.1 KiB
Markdown
# 自定义页面
|
||
|
||
|
||
## 对应的组件存放到数据表中
|
||
|
||
表: lucky_diy_view_util
|
||
|
||
```sql
|
||
create table if not exists lucky_diy_view_util
|
||
(
|
||
id int auto_increment
|
||
primary key,
|
||
name varchar(50) default '' not null comment '标识',
|
||
title varchar(50) default '' not null comment '组件名称',
|
||
type varchar(50) default 'SYSTEM' not null comment '组件类型',
|
||
value text null comment '配置:json格式',
|
||
addon_name varchar(50) default '' not null comment '插件标识',
|
||
sort int default 0 not null comment '排序号',
|
||
support_diy_view varchar(500) default '' not null comment '支持的自定义页面（为空表示公共组件都支持）',
|
||
max_count int default 0 not null comment '限制添加次数',
|
||
is_delete int default 0 not null comment '是否可以删除，0 允许，1 禁用',
|
||
icon varchar(255) default '' not null comment '组件图标',
|
||
icon_type int default 0 not null comment '0图片1图标',
|
||
constraint name
|
||
unique (name)
|
||
)
|
||
```
|
||
|
||
## 页面设计及组件展示
|
||
|
||
- src\app\model\web\DiyView.php
|
||
- src\app\shop\view\diy\edit.html
|
||
- src\public\static\ext\diyview\js\components.js
|
||
|
||
## 如何添加新组件
|
||
|
||
|
||
### 1. 添加组件到数据表中
|
||
|
||
```sql
|
||
insert into lucky_diy_view_util (name, title, type, value, addon_name, sort, support_diy_view, max_count, is_delete, icon, icon_type)
|
||
values ('test', '测试', 'SYSTEM', '{"test": "test"}', '', 0, '', 0, 0, '', 0);
|
||
|
||
--- 微信视频号组件
|
||
-- 仅当WechatChannel不存在时添加记录
|
||
INSERT INTO lucky_diy_view_util (`name`, `title`, `type`, `value`, `addon_name`, `sort`, `support_diy_view`, `max_count`, `is_delete`, `icon`, `icon_type`)
|
||
SELECT 'WechatChannel', '微信视频号', 'SYSTEM', '{ "list": [{ "channelName":"", "finderUserName": "", "avatarImageType": "url", "avatarUrl": "", "videoTitle": "", "coverImageType": "url", "coverUrl": "", "feedId": "", "feedToken": "", "viewCount": 0, "showViewCount": true, "embedMode": false, "channelType":"wechat" }], "rowCount": 2, "showStyle": "fixed", "aspectRatio":"16:9", "titleLineClamp": 1, "showPlayBtn": true}', '', 100110, '', 0, 0, '/public/static/img/svg/xuanxiangka.svg', 0
|
||
WHERE NOT EXISTS (
|
||
SELECT 1 FROM lucky_diy_view_util WHERE name = 'WechatChannel'
|
||
);
|
||
|
||
```
|
||
|
||
|
||
### 2. 建立组件的控制器
|
||
在 `src\app\component\controller` 目录下创建对应的控制器文件，处理组件的业务逻辑。
|
||
|
||
例如：创建 `src\app\component\controller\TestController.php` 文件，用于处理测试组件的业务逻辑。
|
||
|
||
### 3. 建立组件的视图
|
||
在 src\app\component\view 目录下创建对应的视图文件，处理组件的前端展示。
|
||
|
||
例如：创建 `src\app\component\view\test.php` 文件，用于展示测试组件。
|
||
|
||
|
||
### 4. 在前端页面中使用组件
|
||
在前端页面中使用组件，需要在页面中添加对应的组件标签。 |