微信小程序 button的样式设置为某张图片

请首先记住，button可以使用任何想要使用的样式，没有限制，前端都可以做。

step1 wxml

button 因为自带的各种各样的作用，所以open-type选一个就可以了。

注意：

1. plain='true'与只是将plain放在那里的效果是一样的，这是一类，默认只要放上去就会相当于有了一个默认的值。
2. 其实此处的plain完全没有起作用，起作用的是样式里的opacity:0的设置

bug1 :
小程序如果使用直接给button设置背景图片的方式，那么，安卓不显示。
解决方式：将button设为opacity:0 然后定位放在那副图片的上边。

opacity:0VSvisibility: hidden;VSdisplay:none：

opacity是用来设置元素的不透明级别的。
visibility是虽然不可见，但是占据着那个位置，元素也不在，用来作为一些表单提醒的位置占位符最好了，比如这种

image.png

style='visibility: {{numEnough?"hidden":"visible"}};'此时应用是最好的。但是元素hidden的时候是不存在的，只保留了位置。
display是既不保存位置，也看不到，元素也不存在于那个位置上。

背景图片使用方式：

1. 背景图片是不支持在css中被引用资源的
2. 会降低页面的渲染速度，内联样式
3. 一个可以转换成base64的条件：如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。
   from:https://www.cnblogs.com/coco1s/p/4375774.html

分析：若是将背景图片放在css中，也会比较慢。
暂时做法：体感，写在内联样式中稍微快一点点

step 2 wxss

.goBack .share{
  width: 38rpx;
  height: 36rpx;
  padding:0 20rpx;
  position: absolute;
  right: 32rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  background-size: 38rpx 36rpx;
  background-repeat:no-repeat;
  border:none;
}

background-size与background-repeat与border:none;是button必须的

至此，完成。

分享按钮效果