# 组件化设计
组件化设计用于组建V5组件库的最小元件
> Bootstrap@3.4.1
> Jquery@1.12.4
> **两个样式库和JS库将强制引入页面中，页面组件设计时应注意处理冲突问题或插件的依赖问题（统一或适配该版本）**
示例组件
**https://cloud.189.cn/t/fYnuAbIBf6vm**
（访问码：nnh9）
## 一、组件文件结构构成
```
组件根目录
--------
|---config.json 组件属性、设置
|---component.html 可视化组件代码（可包含js、css、htmll）
|---widget.html 后台调用组件
|---js.js 组件js脚本
|---style.css 组件样式表
|---assets 各类资源
| |---images 图片资源（暂不予支持）
| |---xxx.png
| |---xxx.jpg
```
## 二、config.json文件内容结构
``` json
{
"uuid": "3b5d1139-1fa8-4809-af20-813025d32111",
//UUID唯一不重复，不可自行定义，总部分发
"name": "package-slide-003",
//组件名称package-为前缀，分隔符使用英文中划线 -
"version": "5.0.1",
//版本，自定
"demo_url": "http://www.ctrl.cn",
//示例网址，自定
"icon": "http://www.ctrl.cn",
//图标网址，自定（统一，图片审核）
"preview_picture": "http://www.ctrl.cn",
//示例截图网址，自定（统一，图片审核）
"author": "SMO技术运营部",
//作者声明，自定
"author_url": "http://www.ctrl.cn",
//作者网址，自定
"slug": "介绍",
//介绍，自定（审核）
"keywords": "二合一,材料",
//组件关键词，自定（审核）
"description": "二合一,材料",
//详细描述，自定（审核）
"type": [
"slide",
"picture"
],
//根据分类，自定选择
"dependencies": {
//依赖网址，自定（代码审核,代码托管）
"css": [
"//lib.baomitu.com/tiny-slider/2.9.2/tiny-slider.css"
],
"js": [
"//lib.baomitu.com/tiny-slider/2.9.2/min/tiny-slider.js"
]
},
"tpl": "widget.html",
//组件模板代码，html后缀，文件地址
"html": "component.html",
//组件拖拽代码，html后缀，文件地址
"js": "js.js",
//JS脚本（代码审核,代码托管）
"style": "style.css",
//样式表（代码审核,代码托管）
"assets": [
"assets/images/xxx.jpg"
]
//使用资源（文件地址）
}
```
## 三、component.html文件结构
``` html
<!-- 组件开始 -->
<!-- component -->
<!-- 组件内的内容 -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="//lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//lib.baomitu.com/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="//lib.baomitu.com/layer/3.1.1/theme/default/layer.css">
<link rel="stylesheet" href="http://cdn.ctrlcloud.peakjs.top/static/dist/style/common.css">
<!-- css还需要在config.dependencies.css中声明引入 绝对地址引入 -->
<link rel="stylesheet" href="//lib.baomitu.com/video.js/7.6.6/video-js.min.css">
<style>
/*组件样式定义*/
/*component style*/
.player {
width: 100%;
}
/* 样式表内容定义，覆盖style.css*/
/* 尽量使用bs、common.css中已定义样式，减少代码量增加稳定性 */
/*component style*/
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- component html -->
<!-- 组件的dom结构 -->
<section class="component-wrapper package-video-001" data-uuid="0000" data-name="package-video-001">
<div class="component-icon need-cleared">
<img src="http://cdn.ctrlcloud.peakjs.top/static/assets/preview/gap001-2.png" class="img-responsive" alt="视频组件103">
</div>
<div class="component-preview need-cleared">
<img src="http://cdn.ctrlcloud.peakjs.top/static/assets/preview/gap001-2.png" class="img-responsive" alt="视频组件103">
</div>
<div class="component">
<div class="player">
<video id="video-player" class="video-js vjs-big-play-centered vjs-fluid" controls preload="meta"
poster="http://demo-videos.qnsdk.com/movies/qiniu.mp4?vframe/jpg/offset/10"
data-setup='{"autoplay":"true"}'>
<!-- <source src="http://demo-videos.qnsdk.com/movies/qiniu.mp4" type="video/mp4"> -->
<!-- <source src="http://video.cdn.ctrl.cn.peakjs.top/rick.and.morty.s04e02.m3u8" type="application/x-mpegURL"> -->
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>
</div>
</div>
</section>
<!-- component html -->
</div>
</div>
</body>
<script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="//lib.baomitu.com/wow/1.1.2/wow.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
<script src="//cdn.ctrlcloud.peakjs.top/static/dist/js/common.js"></script>
<!-- 以上为必选js库 -->
<!-- js还需要在config.dependencies.js中声明引入 绝对地址引入 -->
<script src="//lib.baomitu.com/video.js/7.6.6/video.min.js"></script>
<script>
/*component script*/
/*组件JS代码脚本，覆盖js.js*/
(function () {
var player = videojs('#video-player', {
muted: true,
preload: 'meta',
autoplay: !true,
controls: true
}, function () {
console.log('play')
// this.play()
this.on('loadeddata', function () {
});
this.on('ended', function () {
});
})
})()
/*component script*/
$(function ($) {
//注意该段位置 移出 保存区块
backgroundImage();
var wow = new WOW ({
boxClass:'wow',
animateClass:'animated',
offset:0,
mobile:false,
live:true
})
wow.init();
})
</script>
</html>
<!-- component -->
<!-- 组件结束 -->
```
## 四、widget.html文件结构
原则上与thinkphp模板代码要求一致
## 在模板中使用模板控件
在前台模板中,我们把所有模板控件放在`$theme_widgets`中,`$theme_widgets`就是一个数组,要使用模板控件只要把它当成`$theme_widgets`中的值就可以了,如:
组件名称要求使用**小写、下划线分隔**
```
<php>
print_r($theme_widgets['widget_name_001']);//记得要判断一下这个控件是否存在!
</php>
```
同时我们也增加一个 `widget`标签
```
<widget name="widget_name_001">
<!--输出控件标题-->
{$widget.title}
<!--调用控件的变量-->
{$widget.vars.varName1|default=''}
或:
<php>
echo $widget['vars']['varName1'];//记得要判断一下这个变量是否存在!
</php>
</widget>
```
如果是**公共模板**文件，应该加上`is_public`属性，并且设置值为` 1 `，这时这个配置文件里的变量和控件变成公共变量和控件，在每个页面都加载，如`simpleboot3/public/config.html`的配置文件`simpleboot3/public/config.json`
```
{
"name": "模板全局配置",
"action": "public/Config",
"description": "模板全局配置文件",
"is_public": "1",/*默认值为0，开启后会在每个页面加载这个配置*/
"order": 0.0,
"more": {
"vars": {
"enable_mobile": {
"title": "手机注册",
"value": "0",
"type": "select",
"value": 1,
"options": {
"1": "开启",
"0": "关闭"
},
"tip": ""
}
}
}
}
```
