WEUI实践
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
有时候希望做一些比较简洁、对样式没有特定要求的移动端页面，可以考虑直接使用。不过不知道能否通过组里QA同学的测试，将来等QA同学有空时可以安排测试。
以最常用的表单进行示例
信息填写页面：
提交成功页面：
两个页面只引用了库里的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
手机阅读请扫描下方二维码：
上一篇：常用js汇总
下一篇：浅谈NIE组件加载方式的变化和原理
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
niysgjkawnpcnbascaxz
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1