WEUI实践

作者: gzheyunying 日期: 2016-03-28

159419

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>