微信小程序-button组件自定义样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/82905472

<button class='btn' bindtap='sumbit' >确定</button>

（1）修改按钮颜色

background-color：修改背景颜色，color：修改字体颜色

.btn{
   background-color:black;
   color:#ffff;
}

如果<button></button>里面定义 type='XX'，就会默认button按钮的样式

其中type有效值有三种：

值	说明
primary	绿色
default	白色
warn	红色

（2）设置按钮点击时的颜色

<button class='btn' bindtap='sumbit' hover-class="other-button-hover">确定</button>

 定义css样式

/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}

 （3）获取用户信息

getUserInfo

获取用户信息，可以从bindgetuserinfo回调中获取到用户信息

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>

在对应的js文件中：

 onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },