小程序--自定义button分享微信小程序

    这是一个放在“我的”页面中通过自定义的button用于分享微信小程序的小demo，效果图如下：

button-shareminiApp.gif

.wxml

<view class='share' bindtap='toShare'>
  <view class='menu-container'>
    <image class='menu-icon' src='../../images/share (2).png'></image>
    <button class='sharebtn' id="shareBtn" open-type="share" hover-class="other-button-hover">分享小程序
      <image class='img' src='../../images/share.png'></image>
    </button>
  </view>
</view>

    这里把前面的分享图标放在了<button></button>标签外，是因为放在标签里会影响对“分享小程序”文本的行高设置，如图：

button中文本受前面的图标影响.png

.js

 onShareAppMessage: function(res) {
    return {
      title: '我是小程序名称哦',
      path: '/pages/uploadpics/uploadpics',
      imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg' //自定义图片路径，显示图片长宽比是 5:4。
    }
  }

.wxss

Page {
  background-color: #f2f2f2;
  height: 100%;
}

.share {
  margin-top: 300rpx;
  width: 100%;
  height: 90rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-container {
  display: flex;
  padding-left: 50rpx;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.menu-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.sharebtn {
  font-size: 12px;
  text-align: left;
  width: 100%;
  height: 100%;
  line-height: 90rpx;
  margin-left: 0rpx;
  padding-left: 0rpx;
  color: #888;
  background-color: white;
}

.sharebtn::after {
  border: none;
}

.img {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 10rpx;
  top: 25rpx;
}

注意：

    1.设置button中的文本“分享小程序”左对齐,垂直居中；

text-align: left;
line-height: 90rpx;//因为button的高度设置100%与外标签高度一样，都是90rpx，故设行高90rpx
margin-left: 0rpx;
padding-left: 0rpx;

    2.color设置button中的文本颜色，background-color设置button背景色，如果在button属性中设置了type和plain都会造成文本颜色不能修改；

color: #888;
background-color: white;

    3.去除button边框，必须要用伪元素进行处理；

.sharebtn::after {
  border: none;
}