做有态度的前端团队

网易FEG前端团队

WEUI实践

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
有时候希望做一些比较简洁、对样式没有特定要求的移动端页面,可以考虑直接使用。不过不知道能否通过组里QA同学的测试,将来等QA同学有空时可以安排测试。

以最常用的表单进行示例

信息填写页面:
QQ截图20160328112136.jpg
提交成功页面:
QQ截图20160328112203.jpg

两个页面只引用了库里的example.css文件和weui.css文件。

信息填写页面的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>检获卡登记</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
</head>
<body ontouchstart>
        <div class="weui_cells_title">检获卡信息</div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">学号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]{12}" placeholder="请输入学号"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">姓名</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" placeholder="请输入姓名"/>
                </div>
            </div>
        </div>
        <div class="weui_cells_title">登记人信息</div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">手机号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" pattern="[0-9]{11}" placeholder="请输入手机号"/>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd"><label for="" class="weui_label">微信号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="" placeholder="请输入微信号"/>
                </div>
            </div>
        </div>
        <div class="weui_opr_area">
            <p class="weui_btn_area">
                <a href="javascript:;" class="weui_btn weui_btn_primary">提交登记</a>
            </p>
        </div>
</body>
</html>

提交成功页面的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>提交成功</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
</head>
<body ontouchstart>
<div class="weui_msg">
        <div class="weui_icon_area">
            <i class="weui_icon_success weui_icon_msg"></i>
        </div>
        <div class="weui_text_area">
            <h2 class="weui_msg_title">提交成功</h2>
            <p class="weui_msg_desc">你的信息我们已经收到,谢谢</p>
        </div>
        <div class="weui_opr_area">
            <p class="weui_btn_area">
                <a href="javascript:;" class="weui_btn weui_btn_primary">关闭</a>
            </p>
        </div>
</div>
</body>
</html>

原本从设计到制作要花至少一天时间完成的页面,现在优化至一小时,是一种突破。
组里如果有需要,也可以考虑个性化编写一套。

最后附上WEUI的相关链接,方便大家进行学习。

预览地址:http://weui.github.io/weui/
GitHub 下载地址:https://github.com/weui/weui

手机阅读请扫描下方二维码: