本章节我们来介绍微信weui反馈组件中的Msg 提示页,Msg提示页组件效果使用了jquery，所以案例依赖于jquery库大家注意。按照下面的步骤就可以做出网页效果，案例中引用的微信weui的css样式库我已经上传到百度网盘了，地址 http://pan.baidu.com/s/1cvQlLc ，大家可以下载下来进行引用，当然你也可以引用网络地址，但是有个弊端，微信weui的样式库更新比较频繁，可能将来某一天会失效，所以最好下载到本地使用。
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
二、 引入jquery库依赖
由于本节weui Dialog对话框需要js操作，按照官方文档的方法依赖于jquery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
三、Msg 提示页html代码
在<body></body>之间添加如下代码，注意其中有两个div块样式为隐藏的
<div class="page msg js_show"> <div class="page__hd"> <h1 class="page__title">Msg</h1> <p class="page__desc">提示页--V型知识库www.vxzsk.com原创</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:aa()" class="weui-btn weui-btn_default" id="aa">成功提示页</a> <a href="javascript:bb()" class="weui-btn weui-btn_default">失败提示页</a> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a> </div> </div> <div class="page msg_success js_show" style="display:none"> <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> <div class="page msg_warn js_show" style="display:none"> <div class="weui-msg"> <div class="weui-msg__icon-area"><i class="weui-icon-warn 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>
四、jquery操作方法
最好把下面代码放在</body>后面
<script type="text/javascript">
function aa(){
jQuery(".msg_success").show();
}
function bb(){
jQuery(".msg_warn").show();
}
</script>五、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
六、完整html代码
msg.html源码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
<div class="page msg js_show">
<div class="page__hd">
<h1 class="page__title">Msg</h1>
<p class="page__desc">提示页--V型知识库www.vxzsk.com原创</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:aa()" class="weui-btn weui-btn_default" id="aa">成功提示页</a>
<a href="javascript:bb()" class="weui-btn weui-btn_default">失败提示页</a>
</div>
<div class="page__ft j_bottom">
<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
</div>
</div>
<div class="page msg_success js_show" style="display:none">
<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>
<div class="page msg_warn js_show" style="display:none">
<div class="weui-msg">
<div class="weui-msg__icon-area"><i class="weui-icon-warn 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>
<script type="text/javascript">
function aa(){
jQuery(".msg_success").show();
}
function bb(){
jQuery(".msg_warn").show();
}
</script>
</html>如果读者想直接浏览效果，可新建个html页面，把上述的完整代码复制进去即可。
此文章本站原创，地址 https://www.vxzsk.com/1021.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：Nodejs 事件循环
下一篇：redis msget 命令
^