1、按钮的基础样式

按钮有一些系统的样式

（1）绿色按钮

   其实就是按钮颜色为绿色

<button  class="btn1" type="primary">心理测评</button><!--绿色样式-->

重点是type=“primary”

(2) 红色按钮

<button class="btn1" type="warn">退出</button><!--红色样式-->

不作过多赘述，同上

（3）小尺寸

<button class="btn1" type="primary" size="mini">支付</button><!--小尺寸-->

字比正常情况下小，如图

上面为正常字大小，下面为mini

（4）plain设置按钮镂空

<!--plain设置按钮是否镂空--> <button class="btn1" type="primary" plain="true">dchbj</button><button class="btn1" type="primary" disabled >登录</button>

效果如下图所示

（5）disabled设置按钮禁用

<button class="btn1" type="primary" disabled >登录</button><!--disabled设置按钮是否禁用-->

2、按钮样式设计（尺寸）

（1）正常样式详细教程

其实和HTML很像，wxss文件如下

.btn1{float: left;//按钮靠左width: 300px;//你会发现操作不了按钮的宽度，后续会有方法height: 120px;margin-top: 40px;//离上一个模块的距离margin-left: 3px;             //离左侧的距离margin-bottom: 9rpx;           background-color: #61E6D7;   //按钮颜色}

效果图

就是这六个方块的样子

（2）设置图片按钮（按钮上有个图片）

 <button style="width:32vw" class="btn1"><image class="btn-img" src="/image/个人.jpg"></image>环境</button>

图片样式可以在wxss文件的class=btn-img中进行设置

（3）设置按钮宽度

相信有细心的伙伴发现了，这里的按钮宽度在wxss文件中设置不了，这里有一个方法可以设置

 <button style="width:32vw" class="btn1"><image class="btn-img" src="/image/个人.jpg"></image>环境</button>

就是直接在wxml文件中设置，如上述代码，直接设置style，当宽度设置合适，按钮会自动并入一排（并列）

总结

基本上我在做小程序的时候按钮方面有以上这些就解决的差不多了，欢迎留言沟通

微信小程序的自学之路一按钮篇相关推荐

微信小程序开发自学
微信小程序开发自学方向小程序基础知识一.小程序的结构目录 1.小程序文件结构与传统web对比 2.基本项目目录 3.全局配置 app,json 3.1.pages 添加页面文件 3.2.wind ...
视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事曹圣捷 ¥12.00 立即订阅扫码下载「CSDN程序 ...
微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
微信小程序勾选协议与提交按钮联动
微信小程序勾选协议与提交按钮联动在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态.如下图所示: 主要用到开发文档按钮组件的一个属性: 代码: w ...
隐藏微信小程序左上角的返回或home按钮 wx.hideHomeButton
隐藏微信小程序左上角的返回或home按钮用的是 wx.hideHomeButton方法,但是这个方法是有限制的,管网说得又不清不楚,在百度也找不到相关的问题在用这个方法的时候遇到过很多问题和官方 ...
实现微信小程序编译和运行环境系列(初始篇)
实现微信小程序编译和运行环境系列(初始篇) 前言最近一段时间在研究实现微信小程序和小游戏编译打包和运行环境平台开发目前基本可以支持微信基础库2.8.2功能迭代了所以想通过记录分享一下自己的认知过 ...
史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
(转)跳一跳带火了小程序后微信小程序电商的路越来越难走了！
https://baijiahao.baidu.com/s?id=1591002503445236944&wfr=spider&for=pc 前段时间火遍全国的"跳一跳&qu ...
微信小程序开发自学笔记 —— 九、微信开发者工具
微信开发者工具介绍由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异,所以无法使用传统的网页的开发调试工具. 开发者可以借助微信开发者工具完成小程序的代码开发.编译运行.界面和逻辑调试.真机预 ...

微信小程序的自学之路一按钮篇

文章目录