微信小程序设置字体-微信小程序 字体

按钮.png

上图下字.png

当你需要使用微信小程序按钮组件的open-type来实现授权等操作时，发现样式不是你想要的，而且改起来不是很方便。 我们一起来看看：

默认状态

确定

此时所有值都是默认值微信小程序设置字体，效果如下：带边框和圆角

默认状态.png

设置其css如下： background color background-color text color color，设置type为primary且背景色为微信绿，背景色不可设置

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
}

设置背景颜色和文字颜色.png

修改圆角：

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
  border-radius: 98rpx; 
}

截图 2018-07-03 18.52.02.png

效果不好，此时增加

.btn1::after {
  border-radius: 98rpx;
}

效果图如下：

完美圆角效果.png

如果需要取消边框，添加border: 0; 在::之后

无边框按钮.png

这样的按钮不能满足UI的要求，我们需要添加图片。 . . 不允许定制。 . . 我没有任何前端基础。 我一开始直接在按钮上加了图片，但是没有对齐。 然后问了别人微信小程序设置字体，得到的答案如下（其实我也知道这个，只是突然想不起来了。。。）：

 
    
    确定
 

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}
.btn1::after {
  border-radius: 98rpx;
  border: 0; 
}

效果图如下：

Button.png 带图片图标

还有上图下字的效果：

 
    
    联系客服
 
  
    
    授权设置
 

.btn1{
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}
.btnImg {
  width: 50rpx;
  height: 50rpx;
}
.btn1::after {
  border: 0; 
}
 .btn2 {
       width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
 }
 .btn2::after {
  border: 0; 
}

效果图如下：

上图下字.png

单击突出显示的状态

    //设置none则无高亮状态
    hover-class="none"
    //可以绑定一个class，到css中设置高亮样式

无点击状态

disable="true"

此时按钮的状态由系统决定，不能改变，但有时我们需要自定义，所以

 确定

根据是否可点击绑定不同的类，最后在点击事件回调中判断，如果禁止点击，直接返回

同时，hover-class也可以绑定一个style和一个“none”。 可点击时，有点击效果，更好的模拟禁用状态，自定义效果。

给我一个赞~~~