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
