WeUI - 爱python的小皮

公告

介绍：

WeUI是微信设计团队为微信网站开发量身定做的微信类UI界面，旨在改善和规范微信用户体验。包括组分如button，cell，dialog，progress，toast，article，actionsheet，icon。

使用举例：

一、下载WeUI：

　　https://github.com/Tencent/weui

下载完毕后解压，在dist/style目录下找到weui.min.css文件

二、使用WeUI：

　　创建一个index.html文件，引用weui.min.css文件

　　打开https://weui.io界面，选择button，根据它对应的代码找到如下代码，粘贴到index.html中

<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样式

三、WeUI组件

　1、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

　2、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

　3、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

　4、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

　5、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

6、Icons组件

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

View Code

　7、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

　8、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

　9、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

　10、 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

11、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

posted on 2018-03-22 20:31 爱python的小皮阅读(418) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部