微信開發系列——微信訂閱號前端開發利器：WeUI

時間  2019-11-12
標籤 微信 開發 系列 訂閱 前端 利器 weui 简体版
原文   原文鏈接

 

正文css

前言：年前的兩個星期，學習了下微信公衆號的開發。後端基本可以基於盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關於手機端的瀏覽器的兼容性，一直是博主的一塊心病，由於博主一直專一於bootstrap的相關組件學習，知道bootstrap作響應式沒有任何問題，因此曾經嘗試過直接用bootstrap來佈局，對於一些簡單的柵格佈局，bootstrap沒有任何問題，但是一旦涉及前端組件這一塊的時候，老是找不到合適的移動端組件，什麼都要本身去實現，這個開發成本就大了去了。因而乎博主打算另闢蹊徑，找找基於微信開發的移動端UI組件，最後找到了微信官方開發的一套前端組件：WeUI。html

本文原創地址：http://www.cnblogs.com/landeanfen/p/8473755.html前端

1、WeUI組件介紹

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。有了這個做爲基礎，媽媽不再用擔憂微信開發的瀏覽器兼容性問題了，微信官方推出的東西應該比較靠譜吧！java

WeUI開源地址：https://github.com/Tencent/weuijquery

WeUI使用示例：https://weui.io/git

基於jquery的WeUI：http://jqweui.com/（提供了大量的第三方組件庫）github

2、組件基本用法

 考慮到一些園友對於第三方組件的使用不知道如何下手或者不太熟悉，博主不厭其煩從最基礎的開始，手把手教你入門WeUI。已經很熟悉的園友請直接跳過此段，前往官方網站查看demo。npm

一、引用必須的文件

若是你用的是原始的開發方式，好比基於jQuery的開發，那麼你首先須要去Github上面將WeUI的源文件down下來，而後引入到你的項目；若是是基於npm管理組件，使用npm命令的方式引入WeUI組件便可。這裏博主使用的是原始的開發方式。須要說明的是，若是你只須要WeUI的css樣式支持，那麼你只須要引入weui.css文件便可；若是除了樣式以外，還須要WeUI的js組件支持，那麼你還須要引用另一個包：weui.js。今天這篇，博主就先介紹下基礎的WeUI樣式庫，先來看看WeUI到底能爲咱們帶來啥，之後若是有機會再來分享WeUI.js以及jquery.WeUI.js的相關技術。bootstrap

這裏首先引入必須的css樣式文件

<link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />

官方的demo裏面爲了使演示的效果更好，還引入了example.css文件，但這個並非必須的！

二、最基礎的組件樣式

第一個例子咱們仍是用最基礎的表單來講明。咱們來看看下面一個基礎的我的資料錄入的頁面效果：

複製代碼 
<!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測試</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">填寫我的資料</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="請輸入姓名" />
                        </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號" />
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd">
                            <label class="weui-label">手機號</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="tel" placeholder="請輸入手機號" />
                        </div>
                        <div class="weui-cell__ft">
                            <button class="weui-vcode-btn">獲取驗證碼</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">註冊時間</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">愛好</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">微信號</option>
                                <option value="2">QQ號</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">驗證碼</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" placeholder="請輸入驗證碼" />
                        </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瀏覽器的移動端模式測試效果以下：

代碼說明

（1）網頁上面的  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> 這一句必需要有，這個和WeUI無關，是瀏覽器的顯示比例問題。建議各位準備作移動端開發以前能夠百度下viewport的含義，這樣更容易理解響應式。根據博主的理解，加這一句是告訴瀏覽器在不一樣的設備上面的顯示比例問題。

（2）最外面必需要有一個大的容器div，即上述代碼裏面的 <div class="container" id="container"> 這個標籤；頁面的全部標籤必須放在這個裏面；

（3）上述代碼裏面的radio和checkbox的效果是能夠切換的。好比上述代碼改下能夠將性別這一項變成多選選，愛好這一項變成單選，你只須要將radio和checkbox切換便可。

三、其餘基礎組件效果示例

有了上面的基礎表單做爲基礎，咱們演示其餘示例就簡單不少了。這裏並不會將WeUI官網上面的例子挨個演示個遍，只是抽其中幾個來演示和講解。

（1）switch開關

複製代碼 
　　<div class="container" id="container">
        <div class="page navbar js_show">
            <div class="page__bd">
                <div class="weui-cells__title">開關</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瀏覽器寫法）</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測試</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("執行搜索");
                }
            });
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
    });
    </script>
</body>
</html>
複製代碼

效果以下

（3）正在加載、暫無更多、查看更多效果

複製代碼 
<!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測試</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">暫無數據</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>
複製代碼

效果展現

這些東西雖然不難，但若是所有都要咱們本身去實現，估計也得花很多時間吧。

3、自定義組件

一、簡單的彈出層

雖然在移動端大部分狀況下不建議使用彈出操做，但某些狀況下，彈出一些東西操做起來其實也挺方便的，仍是那句話：存在即合理。沒有最好的方式，只有最適合的方式。咱們來看博主簡單封裝的一段彈出層代碼。

複製代碼 
<!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測試</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">區域:</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="請輸入姓名" />
                            </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">微信號</option>
                                    <option value="2">QQ號</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>
複製代碼

 

效果展現

以上都是一些最基礎的Dom操做，若是須要在項目裏面用起來，能夠進行簡單的dialog組件封裝。

二、圖片全屏預覽

第二個例子博主不打算再演示原生的WeUI效果了，來看一個基於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>

須要說明的是這個效果須要jquery-weui.js組件的支持。你須要去down這個組件的dist目錄，而後引用dist目錄下面的swiper.js文件。這塊有問題的能夠單獨留言。

引入了文件以後，而後第二部就是咱們的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();  //打開
        });
</script>
複製代碼

效果以下：

 這裏是經過圖片的物理路徑去動態渲染生成img標籤的。效果還不過！除此以外，swiper組件還提供了帶圖片文字描述的效果，和PC端的焦點圖效果同樣同樣的。

咱們將上述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();  //打開
        });
    </script>
複製代碼

效果以下：

 固然，大部分狀況下，咱們在實際使用的時候這種經過已經存在的圖片文件的路徑渲染的場景不是不少，更多的是經過頁面上已經存在的img標籤的來渲染圖片的。咱們來個例子試試水。

好比咱們複製一段網頁內容，裏面是圖文混合的。而後用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測試</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;">&nbsp; 
                        <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);  //打開第一張圖片
        });
    </script>
</body>
</html>
複製代碼

效果以下：

咱們繼續優化下，將最上面的按鈕去掉，而後給每一個圖片加上點擊事件，這樣是否是更加真實呢！

複製代碼 
<!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測試</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;">&nbsp; 
                        <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>
複製代碼

效果以下

 

4、使用示例

在尋找微信前端框架的時候，關注過各類微信公衆號，發現一個叫「愛攝匯」的公衆號，它的前端效果就是基於WeUI去作的，跟着學習了下，以爲它功能簡單，可是頁面效果作得還能夠，對攝影有興趣或者想學習WeUI基礎方法的園友能夠關注看看。

5、總結

 至此本篇基本結束。就這麼泛泛總結了下，花了幾乎兩天時間，寫點東西不容易。若是你們有其餘關於WeUI的使用問題，能夠留言！等之後再用到更多WeUI的高級功能，再來跟你們作分享。若是你以爲本文可以幫助你，能夠右邊隨意 打賞 博主。

本文原創出處：http://www.cnblogs.com/landeanfen/

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利


 

出處：https://www.cnblogs.com/landeanfen/p/8473755.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程