小程序分享功能-自定义分享按钮

wxml

<view wx:if="{{showShare}}">
    <view class="gray-view" bindtap="cancel">
      <view class=""></view>
    </view>
    <view class="share-view">
      <view>
        <view class="goods">
          <span class="line"></span>
          <view class="goods-text">分享到</view>
          <span class="line"></span>
        </view>
        <view class="share-type" bindtap="wxShare">
          <view>
            <button style="text-align:center" open-type='share'>
            <image src="../../../assets/images/wx-img.png"></image>
            <view>微信</view>
          </button>
          </view>
          <view style="text-align:center" bindtap="poster">
            <image src="../../../assets/images/share-img.png"></image>
            <view>生成海报</view>
          </view>
        </view>
        <view class="divLine"></view>
        <view class="cancel" bindtap="cancel">取消</view>
      </view>
    </view>
  </view>

wxss

.gray-view{
  position: fixed;
  top: 0;
  background-color: #b3b2b0;
  filter:alpha(Opacity=80);
  -moz-opacity:0.5;opacity: 0.5;
  height: 1200rpx;
  width: 100%;
}
.share-view{
  position: fixed;
  bottom: 0;
  background-color:#fff;
  height: 300rpx;
  width: 100%;
}
.share-type{
  display: flex;
  justify-content: space-around;
}
.share-type image{
  width: 100rpx;
  height: 100rpx;
}
.share-type button{
  width: 150rpx;
  height: 150rpx;
  line-height: 45rpx;
  background: transparent;
  font-size: 30rpx;
}
.share-type button::after{
  border: none;
}
.cancel{
  text-align: center;
  font-size: 34rpx;
  line-height: 65rpx;
}
.goods{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  margin-top: 10rpx;
}

.goods-text,.image-text{
  font-weight: bold;
  font-size:36rpx; 
  padding: 0 50rpx 0 50rpx
}
.line {
  display: inline-block;
  width: 120rpx;
  border-top: 1px solid #C0C0C0 ;
}


.divLine{
 background: #E0E3DA;
 width: 100%;
 height: 5rpx;
}

js

data:{
    showShare:flase
}

  cancel(){
    this.setData({
      showShare: false
    })
  },
//由于是详情页，所以需要带参数this.data.shareData，不需要的话path直接写路径就好
onShareAppMessage: function () {
    let that = this
    return {
      title: this.data.commodity.title,
      path: '/pages/index/details/details?item=' + JSON.stringify(this.data.shareData),
      imageUrl: this.data.commodityImg[0],
      success: function (res) {
        that.setData({
          showShare:false
        })
      }
    }
  }

生成海报的话实际上就是一个绘图功能，将商品图片与详情加上小程序二维码生成一个图片，然后用户保存下来后可以发到朋友圈，一种商店类小程序常用的手段。有兴趣可以了解下：https://blog.csdn.net/chaosama/article/details/102838801