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

wxml

    
      
    
    
      
        
          
          分享到
          
        
        
          
            
            
            微信
          
          
          
            
            生成海报
          
        
        
        取消
      
    
  

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