閱讀目錄
正文
前言：年前的兩個(gè)星期，學(xué)習(xí)了下微信公眾號(hào)的開(kāi)發(fā)。后端基本能夠基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關(guān)于手機(jī)端的瀏覽器的兼容性，一直是博主的一塊心病，因?yàn)椴┲饕恢睂Ｗ⒂赽ootstrap的相關(guān)組件學(xué)習(xí)，知道bootstrap做響應(yīng)式?jīng)]有任何問(wèn)題，所以曾經(jīng)嘗試過(guò)直接用bootstrap來(lái)布局，對(duì)于一些簡(jiǎn)單的柵格布局，bootstrap沒(méi)有任何問(wèn)題，可是一旦涉及前端組件這一塊的時(shí)候，總是找不到合適的移動(dòng)端組件，什么都要自己去實(shí)現(xiàn)，這個(gè)開(kāi)發(fā)成本就大了去了。于是乎博主打算另辟蹊徑，找找基于微信開(kāi)發(fā)的移動(dòng)端UI組件，最后找到了微信官方開(kāi)發(fā)的一套前端組件：WeUI。
本文原創(chuàng)地址：http://www.cnblogs.com/landeanfen/p/8473755.html
WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。有了這個(gè)作為基礎(chǔ)，媽媽再也不用擔(dān)心微信開(kāi)發(fā)的瀏覽器兼容性問(wèn)題了，微信官方推出的東西應(yīng)該比較靠譜吧！
WeUI開(kāi)源地址：https://github.com/Tencent/weui
WeUI使用示例：https://weui.io/
基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方組件庫(kù)）
考慮到一些園友對(duì)于第三方組件的使用不知道如何下手或者不太熟悉，博主不厭其煩從最基礎(chǔ)的開(kāi)始，手把手教你入門WeUI。已經(jīng)很熟悉的園友請(qǐng)直接跳過(guò)此段，前往官方網(wǎng)站查看demo。
如果你用的是原始的開(kāi)發(fā)方式，比如基于jQuery的開(kāi)發(fā)，那么你首先需要去Github上面將WeUI的源文件down下來(lái)，然后引入到你的項(xiàng)目；如果是基于npm管理組件，使用npm命令的方式引入WeUI組件即可。這里博主使用的是原始的開(kāi)發(fā)方式。需要說(shuō)明的是，如果你只需要WeUI的css樣式支持，那么你只需要引入weui.css文件即可；如果除了樣式之外，還需要WeUI的js組件支持，那么你還需要引用另外一個(gè)包：weui.js。今天這篇，博主就先介紹下基礎(chǔ)的WeUI樣式庫(kù)，先來(lái)看看WeUI到底能為我們帶來(lái)啥，以后如果有機(jī)會(huì)再來(lái)分享WeUI.js以及jquery.WeUI.js的相關(guān)技術(shù)。
這里首先引入必須的css樣式文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
官方的demo里面為了使演示的效果更好，還引入了example.css文件，但這個(gè)并不是必須的！
第一個(gè)例子我們還是用最基礎(chǔ)的表單來(lái)說(shuō)明。我們來(lái)看看下面一個(gè)基礎(chǔ)的個(gè)人資料錄入的頁(yè)面效果：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <--example.css可以不引用--> <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" /> </head> <body> <div class="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">填寫(xiě)個(gè)人資料</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="請(qǐng)輸入姓名" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">QQ</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ號(hào)" /> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"> <label class="weui-label">手機(jī)號(hào)</label> </div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)" /> </div> <div class="weui-cell__ft"> <button class="weui-vcode-btn">獲取驗(yàn)證碼</button> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">注冊(cè)時(shí)間</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="datetime-local" value="" placeholder="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">性別</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_radio"> <label class="weui-cell weui-check__label" for="x11"> <div class="weui-cell__bd"> <p>男</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="radio1" id="x11" /> <span class="weui-icon-checked"></span> </div> </label> <label class="weui-cell weui-check__label" for="x12"> <div class="weui-cell__bd"> <p>女</p> </div> <div class="weui-cell__ft"> <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" /> <span class="weui-icon-checked"></span> </div> </label> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">愛(ài)好</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check__label" for="s11"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>籃球</p> </div> </label> <label class="weui-cell weui-check__label" for="s12"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s12" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>足球</p> </div> </label> <label class="weui-cell weui-check__label" for="s13"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s13" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>游泳</p> </div> </label> </div> </div> </div> <div class="weui-cell weui-cell_select"> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信號(hào)</option> <option value="2">QQ號(hào)</option> <option value="3">Email</option> </select> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"><label class="weui-label">驗(yàn)證碼</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" /> </div> <div class="weui-cell__ft"> <img class="weui-vcode-img" src="~/Content/weui-master/dist/example/images/vcode.jpg" /> </div> </div> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">確定</a> </div> </div> </div> </div> </body> </html>
我們用google瀏覽器的移動(dòng)端模式測(cè)試效果如下：
代碼說(shuō)明
（1）網(wǎng)頁(yè)上面的 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> 這一句必須要有，這個(gè)和WeUI無(wú)關(guān)，是瀏覽器的顯示比例問(wèn)題。建議各位準(zhǔn)備做移動(dòng)端開(kāi)發(fā)之前可以百度下viewport的含義，這樣更容易理解響應(yīng)式。根據(jù)博主的理解，加這一句是告訴瀏覽器在不同的設(shè)備上面的顯示比例問(wèn)題。
（2）最外面必須要有一個(gè)大的容器div，即上述代碼里面的 <div class="container" id="container"> 這個(gè)標(biāo)簽；頁(yè)面的所有標(biāo)簽必須放在這個(gè)里面；
（3）上述代碼里面的radio和checkbox的效果是可以切換的。比如上述代碼改下可以將性別這一項(xiàng)變成多選選，愛(ài)好這一項(xiàng)變成單選，你只需要將radio和checkbox切換即可。
有了上面的基礎(chǔ)表單作為基礎(chǔ)，我們演示其他示例就簡(jiǎn)單很多了。這里并不會(huì)將WeUI官網(wǎng)上面的例子挨個(gè)演示個(gè)遍，只是抽其中幾個(gè)來(lái)演示和講解。
（1）switch開(kāi)關(guān)
<div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">開(kāi)關(guān)</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">是否顯示</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox" /> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">是否置頂（兼容IE瀏覽器寫(xiě)法）</div> <div class="weui-cell__ft"> <label for="switchCP" class="weui-switch-cp"> <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" /> <div class="weui-switch-cp__box"></div> </label> </div> </div> </div> </div> </div> </div>
效果如下
（2）文本框搜索組件
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> @*<--example.css可以不引用-->*@ <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form" onsubmit="return false;"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required /> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> <label class="weui-search-bar__label" id="searchText"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> <div class="weui-cells searchbar-result" id="searchResult"> </div> </div> </div> </div> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ var $searchBar = $('#searchBar'), $searchResult = $('#searchResult'), $searchText = $('#searchText'), $searchInput = $('#searchInput'), $searchClear = $('#searchClear'), $searchCancel = $('#searchCancel'); function hideSearchResult(){ $searchResult.hide(); $searchInput.val(''); } function cancelSearch(){ hideSearchResult(); $searchBar.removeClass('weui-search-bar_focusing'); $searchText.show(); } $searchText.on('click', function(){ $searchBar.addClass('weui-search-bar_focusing'); $searchInput.focus(); }); $searchInput .on('blur', function () { if(!this.value.length) cancelSearch(); }).on('keydown', function (event) { if (event.keyCode == 13) { alert("執(zhí)行搜索"); } }); ; $searchClear.on('click', function(){ hideSearchResult(); $searchInput.focus(); }); $searchCancel.on('click', function(){ cancelSearch(); $searchInput.blur(); }); }); </script> </body> </html>
效果如下
（3）正在加載、暫無(wú)更多、查看更多效果
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-loadmore"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加載</span> </div> <div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暫無(wú)數(shù)據(jù)</span> </div> <div class="weui-panel__ft"> <a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link"> <div class="weui-cell__bd" style="font-size:16px;">查看更多</div> <span class="weui-cell__ft"></span> </a> </div> </div> </div> </div> </body> </html>
效果展示
這些東西雖然不難，但如果全部都要我們自己去實(shí)現(xiàn)，估計(jì)也得花不少時(shí)間吧。
雖然在移動(dòng)端大部分情況下不建議使用彈出操作，但某些情況下，彈出一些東西操作起來(lái)其實(shí)也挺方便的，還是那句話：存在即合理。沒(méi)有最好的方式，只有最適合的方式。我們來(lái)看博主簡(jiǎn)單封裝的一段彈出層代碼。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <style type="text/css"> #kongzhi .weui-cell__bd { text-align: left; } #kongzhi .weui-cell__bd label { color: #31c1d5; display: inline-block; font-size: 14px; padding: 5px 5px 3px 5px; } #kongzhi .weui-cell__bd .active { color: white; background-color: #31c1d5; border-radius: 5px; } </style> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">查詢條件</a> </div> </div> </div> </div> <!--彈出層begin--> <div id="dialogs"> <div class="js_dialog" id="diaquery" style="opacity: 1; display: none;"> <div class="weui-mask"> </div> <div class="weui-dialog" style="width:92%;max-width:372px;"> <div class="weui-dialog__bd" style="padding-left:0px;padding-right:10px;"> <div id="kongzhi"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">區(qū)域:</label></div> <div class="weui-cell__bd"> <label class="active">全部</label> <label>上海</label> <label>北京</label> <label>重慶</label> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名:</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="請(qǐng)輸入姓名" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">生日:</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">性別:</label></div> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信號(hào)</option> <option value="2">QQ號(hào)</option> <option value="3">Email</option> </select> </div> </div> </div> </div> <div class="weui-dialog__ft"> <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a> <a href="javascript:;" id="query" class="weui-dialog__btn weui-dialog__btn_primary">查詢</a> </div> </div> </div> </div> <!--彈出層end--> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var $diaquery = $('#diaquery'); $('#dialogs').on('click', '.weui-dialog__btn', function () { $(this).parents('.js_dialog').fadeOut(200); }); $('#showQuery').on('click', function () { $diaquery.fadeIn(200); }); </script> </body> </html>
效果展示
以上都是一些最基礎(chǔ)的Dom操作，如果需要在項(xiàng)目里面用起來(lái)，可以進(jìn)行簡(jiǎn)單的dialog組件封裝。
第二個(gè)例子博主不打算再演示原生的WeUI效果了，來(lái)看一個(gè)基于jquery的WeUI封裝示例。
首先引入必須的文件
<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" />
在body最后面引入js
<script src="~/scripts/jquery-1.9.1.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script>
需要說(shuō)明的是這個(gè)效果需要jquery-weui.js組件的支持。你需要去down這個(gè)組件的dist目錄，然后引用dist目錄下面的swiper.js文件。這塊有問(wèn)題的可以單獨(dú)留言。
引入了文件之后，然后第二部就是我們的html了
<div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">瀏覽圖片</a> </div></div> </div> </div>
最后是js初始化
<script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg" ] }); $('#showQuery').on('click', function () { pb1.open(); //打開(kāi) });
</script>
效果如下：
這里是通過(guò)圖片的物理路徑去動(dòng)態(tài)渲染生成img標(biāo)簽的。效果還不過(guò)！除此之外，swiper組件還提供了帶圖片文字描述的效果，和PC端的焦點(diǎn)圖效果一樣一樣的。
我們將上述js代碼稍作修改：
<script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ { image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", caption: "文字描述1" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", caption: "文字描述2" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg", caption: "文字描述3" } ] }); $('#showQuery').on('click', function () { pb1.open(); //打開(kāi) }); </script>
效果如下：
當(dāng)然，大部分情況下，我們?cè)趯?shí)際使用的時(shí)候這種通過(guò)已經(jīng)存在的圖片文件的路徑渲染的場(chǎng)景不是很多，更多的是通過(guò)頁(yè)面上已經(jīng)存在的img標(biāo)簽的來(lái)渲染圖片的。我們來(lái)個(gè)例子試試水。
比如我們復(fù)制一段網(wǎng)頁(yè)內(nèi)容，里面是圖文混合的。然后用js去提取其中圖片的src。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" /> <style type="text/css"> </style> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">瀏覽正文圖片</a> </div> <article id="content" class="weui-article"> <h1>“尋找龍海名片”福建省攝影大賽征稿啟事</h1> <section id="content" style="text-align: justify;"> <img class="weui-media-box__thumb" src="/Content/jquery-weui-master/dist/demos/images/1.jpg" width="100%" height="100%"> <p style="text-align: center;"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/2.jpg" width="1080" height="809" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/3.jpg" width="1080" height="589" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/4.jpg" width="1080" height="608" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/5.jpg" width="1080" height="1080" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/6.jpg" width="1080" height="608" class="fr-fic fr-dii"></p> </section> </article> </div> </div> </div> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script> <script type="text/javascript"> var collection = []; $('#content img').each(function (key, item) { collection.push($(item).attr('src')); }); var pb1 = $.photoBrowser({ items: collection }); $('#showQuery').on('click', function () { pb1.open(0); //打開(kāi)第一張圖片 }); </script> </body> </html>
效果如下：
我們繼續(xù)優(yōu)化下，將最上面的按鈕去掉，然后給每個(gè)圖片加上點(diǎn)擊事件，這樣是不是更加真實(shí)呢！
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI測(cè)試</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <article id="content" class="weui-article"> <h1>“尋找龍海名片”福建省攝影大賽征稿啟事</h1> <section id="content" style="text-align: justify;"> <img class="weui-media-box__thumb" src="/Content/jquery-weui-master/dist/demos/images/201802091018361725920180210172813933.jpg" width="100%" height="100%"> <p style="text-align: center;"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/151825461301820180210172339803.jpg" width="1080" height="809" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/151825460457920180210172330085.jpg" width="1080" height="589" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/151825460714020180210172332855.jpg" width="1080" height="608" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/151825462155720180210172349410.jpg" width="1080" height="1080" class="fr-fic fr-dii"> <img alt="《尋找龍海名片》——福建省攝影大賽征稿啟事" src="/Content/jquery-weui-master/dist/demos/images/151825460838220180210172335668.jpg" width="1080" height="608" class="fr-fic fr-dii"></p> </section> </article> </div> </div> </div> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script> <script type="text/javascript"> var collection = []; $('#content img').each(function (key, item) { collection.push($(item).attr('src')); $(item).on('click', function () { pb1.open(key); }); }); var pb1 = $.photoBrowser({ items: collection }); </script> </body> </html>
效果如下
在尋找微信前端框架的時(shí)候，關(guān)注過(guò)各種微信公眾號(hào)，發(fā)現(xiàn)一個(gè)叫“愛(ài)攝匯”的公眾號(hào)，它的前端效果就是基于WeUI去做的，跟著學(xué)習(xí)了下，覺(jué)得它功能簡(jiǎn)單，但是頁(yè)面效果做得還可以，對(duì)攝影有興趣或者想學(xué)習(xí)WeUI基礎(chǔ)方法的園友可以關(guān)注看看。
至此本篇基本結(jié)束。就這么泛泛總結(jié)了下，花了幾乎兩天時(shí)間，寫(xiě)點(diǎn)東西不容易。如果大家有其他關(guān)于WeUI的使用問(wèn)題，可以留言！等以后再用到更多WeUI的高級(jí)功能，再來(lái)跟大家做分享。如果你覺(jué)得本文能夠幫助你，可以右邊隨意 打賞 博主。
本文原創(chuàng)出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉(zhuǎn)載，但是未經(jīng)作者本人同意，轉(zhuǎn)載文章之后必須在文章頁(yè)面明顯位置給出作者和原文連接，否則保留追究法律責(zé)任的權(quán)利
聯(lián)系客服
