組件化設計 · V5魔方保養手冊

# 組件化設計組件化設計用于組建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    <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">  <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">   <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="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"> </video> </div> </div> </section>  </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>   <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>   ``` ## 四、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": "" } } } } ```