[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
# 固定模板開發
