[TOC]
*****
模板二开可以参考官方开发的两套模板插件（diy_default1、diy_default2）
# 自定义模板开发
## **后端**
创建插件，此处命名为：my_template
目录结构如下：
```
│ ├─my_template 模板插件名称
│ │ ├─component 组件目录
│ │ │ ├─controller 组件控制器目录
│ │ │ │ ├─Text.php 文本组件控制器
│ │ │ ├─view
│ │ │ │ ├─text 文本组件目录
│ │ │ │ │ ├─css 样式文件
│ │ │ │ │ ├─img 图片资源
│ │ │ │ │ ├─js 脚本文件
│ │ ├─config
│ │ │ ├─diy_view.php 存放自定义组件、链接等数据结构
│ │ │ ├─event.php 事件钩子
│ │ │ ├─info.php 插件信息
│ │ ├─event 事件执行目录
│ │ │ ├─DiyIcon.php 扩展自定义图标库
│ │ │ ├─TemplateInfo.php 自定义模板信息钩子
│ │ │ ├─UseTemplate.php 使用自定义模板钩子
│ │ ├─shop
│ │ │ │ ├─view
│ │ │ │ │ ├─public
│ │ │ │ │ │ ├─css
│ │ │ │ │ │ │ ├─comp_iconfont.css 组件图标样式文件
│ │ │ │ │ │ │ ├─diy_iconfont.css 自定义图标库样式文件
│ │ │ │ │ │ ├─img 模板所用到的图片资源
│ │ │ │ │ │ │ ├─cover.png 模板封面图
│ │ │ │ │ │ │ ├─preview.png 模板预览图
```
### diy_view.php（定义自定义组件、链接等数据结构）
* [ ] 组件类型：
* SYSTEM：基础组件
* PROMOTION：营销组件
* EXTEND：扩展组件
* [ ] 推荐在[JSON格式化工具](https://qqe2.com/)中定义数据结构
* [ ] 定义数据结构时要注意以下事项：
* 字段命名要`简短`、多个单词要使用`小驼峰式命名法`，例如：text、color、goodsIds、subTitle
* 跳转链接对象不能设置为空，里面至少要有一个字段，例如：
错误写法："link" : {}
**正确写法："link" : { "name" : "" }**
* **定义颜色字段时建议大写并且保留6位数**，例如：#999999、#FFFFFF、#303133，不推荐使用缩写，后台装修时会看到颜色值闪动，#999—>#999999
*
组件的数据结构如下：
```
{
"text": "我是扩展文本组件",
"link": {
"name": ""
},
"color": "#303133",
"goodsIds": []
}
```
### component
```
<?php
return [
'util' => [
[
'name' => 'TextExtend', // 组件控制器名称
'title' => '扩展文本', // 组件名称
'type' => 'EXTEND', // 组件类型
'value' => '{"text":"我是扩展文本组件","link":{"name":""},"color":"#303133","goodsIds":[]}', // 数据结构
'sort' => '50000', // 排序号范围：50000~60000
'support_diy_view' => '', // 支持的自定义页面（为空表示公共组件都支持）
'max_count' => 0, // 限制添加次数，0表示可以无限添加该组件
'is_delete' => 0, // 组件是否可以删除，0 允许，1 禁用
'icon' => 'icon-wenben', // 组件字体图标
],
],
'link' => []
];
```
### 模板信息
文件路径：**event/TemplateInfo.php**
代码如下：
```
<?php
namespace addon\my_template\event;
/**
* 自定义模板信息
*/
class TemplateInfo
{
/**
* 模板数据
* @param $params
* @return array
*/
public function handle($params)
{
if ($params[ 'name' ] == '' || $params[ 'name' ] == '模板标识') {
$use_template = new UseTemplate();
$info = [
'title' => '模板名称',
'name' => '模板标识',
'cover' => __ROOT__ . '/addon/my_template/shop/view/public/img/cover.png',
'preview' => __ROOT__ . '/addon/my_template/shop/view/public/img/preview.png',
'desc' => '这里填写模板描述',
'page' => $use_template->getIndexPage(), // 设置要编辑第一个的页面
'price' => 0, // 模板价格
];
return $info;
}
}
}
```
### 使用自定义模板
```
namespace addon\my_template\event;
use app\model\web\DiyView as DiyViewModel;
/**
* 使用自定义模板
*/
class UseTemplate
{
/**
* 模板数据
* @param $params
* @return array
*/
public function handle($params)
{
if ($params[ 'name' ] == 'official_default_round') {
$diy_view = new DiyViewModel();
// 添加模板页面
$res = $diy_view->addTemplatePage([
'site_id' => $params[ 'site_id' ],
'name' => $params[ 'name' ],
'page' => [ $this->index_page, $this->goods_category_page ], // 自定义页面集合
]);
return $res;
}
}
// 定义自定义页面数据
private $index_page = [];
private $goods_category_page = [];
// 可以自行添加更多的自定义页面，要加入到page集合中，如下
private $promote_page = [];
private $micro_page = [];
}
```
### 定义组件
组件结构
文件路径：`config/diy_view.php`
xxxxxxxxxx
### 定义自定义链接
xxxxxxxxxx
### 扩展图标库
xxxxxxxxxx
## 组件
定义组件结构
### 前端
uni-app
# 固定模板开发
