按钮可以使用 a 或者 button 标签。wap 上要触发按钮的 active 态，必须触发 ontouchstart 事件，可以在 body 上加上 ontouchstart="" 全局触发。
按钮常见的操作场景：确定、取消、警示，分别对应 class：weui_btn_primary、weui_btn_default、weui_btn_warn，每种场景都有自己的置灰态weui_btn_disabled，除此外还有一种镂空按钮 weui_btn_plain_xxx，客户端 webview 里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：
下载微信WeUI css样式文件weui.css，请点击【实例源码下载】
新建button.jsp，在<head></head>之间引入css样式文件：
<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
记住一定加上<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">便于手机浏览器浏览。
在<body></body>添加不同的button按钮代码：
<a href="#" class="weui_btn weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_warn">确认</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a> <a href="#" class="weui_btn weui_btn_default">按钮</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a> <div class="button_sp_area"> <a href="#" class="weui_btn weui_btn_plain_default">按钮</a> <a href="#" class="weui_btn weui_btn_plain_primary">按钮</a> <a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> </div>
运行项目，浏览器中输入http://localhost:8080/weChat/button.jsp，效果如下：
模拟的是苹果6
Button.jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>按钮样式</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <link rel="stylesheet" type="text/css" href="resources/css/weui.css"> </head> <body> <br><br><br> <a href="#" class="weui_btn weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_warn">确认</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a> <a href="#" class="weui_btn weui_btn_default">按钮</a> <a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a> <div class="button_sp_area"> <a href="#" class="weui_btn weui_btn_plain_default">按钮</a> <a href="#" class="weui_btn weui_btn_plain_primary">按钮</a> <a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a> <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/60.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程