WeUI

時間 2019-11-08

標籤 weui 简体版

原文原文鏈接

介紹：javascript

WeUI是微信設計團隊爲微信網站開發量身定作的微信類UI界面，旨在改善和規範微信用戶體驗。包括組分如button，cell，dialog，progress，toast，article，actionsheet，icon。css

使用舉例：html

1、下載WeUI：java

　　https://github.com/Tencent/weuiios

下載完畢後解壓，在dist/style目錄下找到weui.min.css文件git

2、使用WeUI：github

　　建立一個index.html文件，引用weui.min.css文件微信

　　打開https://weui.io界面，選擇button，根據它對應的代碼找到以下代碼，粘貼到index.html中app

<div class="page__bd page__bd_spacing">
    <a href="javascript:;" class="weui-btn weui-btn_primary">頁面主操做 Normal</a>
    <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>頁面主操做 Loading</a>
    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">頁面主操做 Disabled</a>
    <a href="javascript:;" class="weui-btn weui-btn_default">頁面次要操做 Normal</a>
    <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>頁面次操做 Loading</a>
    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">頁面次要操做 Disabled</a>
    <a href="javascript:;" class="weui-btn weui-btn_warn">警告類操做 Normal</a>
    <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告類操做 Loading</a>
    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告類操做 Disabled</a>

    <div class="button-sp-area">
        <a href="javascript:;" class="weui-btn weui-btn_plain-default">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按鈕</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按鈕</a>
    </div>
</div>

　　打開該index.html文件，能夠看到button樣式ide

3、WeUI組件

　一、button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<a href="" class="weui-btn weui-btn_plain-default">默認</a>
<a href="" class="weui-btn weui-btn_primary">肯定</a>
<a href="" class="weui-btn weui-btn_plain-primary">鏤空</a>
<a href="" class="weui-btn weui-btn_mini weui-btn_warn">迷你</a>
<a href="" class="weui-btn weui-btn_mini weui-btn_disabled weui-btn_primary">不能點擊</a>
<div class="weui-btn-area">
    <a href="" class="weui-btn weui-btn_primary">肯定</a>
</div>
</body>
</html>

button

　二、List列表視圖

　　List 列表視圖，用於將信息以列表的結構顯示在頁面上，是wap上最經常使用的內容結構

　　每一個列表視圖包含weui-cells_title weui-cells兩部分，weui-cells內能夠包括一個或多個列表項，每一個列表項由縮略圖weui-cell__hd 主體內容weui-cell__db 輔助說明weui-cell__ft三部分組成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body ontouchstart>
    <div class="weui-cells__title">帶說明的列表項</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd weui-cell_primary">
                <p>標題文字</p>
            </div>
            <div class="weui-cell__ft">說明文字</div>
        </div>
    </div>
    <div class="weui-cells__title">帶圖標、說明的列表項</div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="./images/1.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>標題文字</p>
        </div>
        <div class="weui-cell__ft">說明文字</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="./images/1.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>標題文字</p>
        </div>
        <div class="weui-cell__ft">說明文字</div>
    </div>
</body>
</html>l

View Code

　三、Input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="weui-cells__title">單選列表項</div>
<label class="weui-cell weui-check__label" for="x11">
    <div class="weui-cell__bd">
        <p>cell standard</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>cell standard</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>
</body>
</html>

View Code

　四、Dialog對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog樣式一</a>
<div class="js_dialog" id="iosDialog1" style="opacity: 0; display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">彈窗標題</strong></div>
        <div class="weui-dialog__bd">彈窗內容，告知當前狀態、信息和解決方法，描述文字儘可能控制在三行內</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">輔助操做</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操做</a>
        </div>
    </div>
</div>
<script src="./js/zepto.min.js"></script>
<script>
    $('body').on('click','#showIOSDialog1', function () {
        $('#iosDialog1').show().on('click', '.weui-dialog__btn', function () {
            $('#iosDialog1').hide()
        })
    })
</script>
</div>
</body>
</html>

View Code

　五、toast浮層提示

　　Toast用於臨時顯示某些信息，而且會在數秒後自動消失，這些信息一般是輕量級操做的成功、失敗或等待信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="page__bd page__bd_spacing">
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加載中提示</a>
    <div id="toast" style="opacity: 0; display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
    <div id="loadingToast" style="opacity: 0; display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">數據加載中</p>
        </div>
    </div>
</div>
<script src="./js/zepto.min.js"></script>
<script>
    $('body').on('click','#showToast',function () {
        $('#toast').show()
        setTimeout(function () {
            $('#toast').hide()
        },2000)
    })
    $('body').on('click','#showLoadingToast',function () {
        $('#loadingToast').show()
        setTimeout(function () {
            $('#loadingToast').hide()
        },2000)
    })
</script>
</body>
</html>

View Code

六、Icons組件

<i class="weui-icon-success weui-icon_msg"></i>

View Code

　七、Msg Page結果頁

　　結果頁一般來講能夠認爲進行一系列操做步驟後，做爲流程結束的總結性頁面

　　結果頁做用主要是告知用戶操做處理結果以及必要的相關細節（可用於確認以前的操做是否有誤）等結果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="page msg_success js_show">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操做成功</h2>
            <p class="weui-msg__desc">內容詳情，可根據實際須要安排，若是換行則不超過規定長度，居中展示<a href="javascript:void(0);">文字連接</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推薦操做</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">輔助操做</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部連接文本</a>
                </p>
                <p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

View Code

　八、Article 文字視圖

支持分段、多層標題、引用、內嵌圖片、有/無序列列表等富文本樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
    <div class="container">
        <article class="weui-article">
            <h1>大標題</h1>
            <section>
                <h2 class="title">章標題</h2>
                <section>
                    <h3>1.1 節標題</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                    </p>
                    <p>
                        <img src="./images/2.png" alt="">
                        <img src="./images/2.png" alt="">
                    </p>
                </section>
                <section>
                    <h3>1.2 節標題</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </section>
            </section>
        </article>
    </div>
</div>
</body>
</html>

View Code

　九、Panel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="container">
    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" src="./js/3.png" alt="">
        </div>
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">標題一</h4>
            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
        </div>
    </a>
    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" src="./js/3.png" alt="">
        </div>
        <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">標題一</h4>
            <p class="weui-media-box__desc">由各類物質組成的巨型球狀天體，叫作星球。星球有必定的形狀，有本身的運行軌道。</p>
        </div>
    </a>
</div>
</body>
</html>

View Code

　十、 navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="container">
    <div class="navbar">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item weui-bar__item_on">
                    選項一
                </div>
                <div class="weui-navbar__item">
                    選項二
                </div>
                <div class="weui-navbar__item">
                    選項三
                </div>
            </div>
            <div class="weui-tab__panel">
                <div class="weui-tab__content">
                    內容一
                </div>
                <div class="weui-tab__content">
                    內容二
                </div>
                <div class="weui-tab__content">
                    內容三
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/zepto.min.js"></script>
<script>
    $('body').on('click', '.weui-navbar__item', function () {
        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
    })
</script>
</body>
</html>

View Code

十一、tabbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/weui.min.css">
    <link rel="stylesheet" href="./css/example.css">
</head>
<body>
<div class="container">
    <div class="page tabbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel">

                </div>
                <div class="weui-tabbar">
                    <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/4.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                    </span>
                        <p class="weui-tabbar__label">微信</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <img src="./images/4.png" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">通信錄</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/4.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                        <p class="weui-tabbar__label">發現</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <img src="./images/4.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                        <p class="weui-tabbar__label">我</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/zepto.min.js"></script>
<script>

</script>
</body>
</html>

View Code

　　備註： www.iconfont.cn 圖標庫

表單驗證控件 : https://github.com/efri-yang/mobileValidate

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。