小程序分享海报的生成

文档地址

https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

bug

1、该弹窗要一直存在于页面上：
1.1 弹窗的show属性要一直为true，不能通过变量控制
1.2 不能通过wx:if 控制元素显示隐藏
解决方法：利用变量控制z-index和背景色透明度是否为0来隐藏弹窗，点击分享时候显示
2、海报上所有图片的域名都必须是配置过的合法域名
3、海报上所有图片的域名都必须是https开头
4、海报会导致背景为灰黑色
解决方法：海报不显示的时候给弹窗一个透明
class=“posterPop {{showPoster>0?’’:‘opacity’}}”
show="{{ true }}"

5、海报会压着页面按钮点击动
解决方法：判断海报不显示的时候，提高按钮的层级，加相对定位和z-index {{showPoster>0?‘海报显示’:‘不显示’}}

2、json文件要引入 wxml-to-canvas 组件
3、在小程序组件中使用canvas渲染会报错，还没有找到哦原因

//HTML
//点击分享按钮
<image
  src="https://file.lojangcc.com/weapp/common/share-btn.png"
  class="fixed share-poster"
  bind:tap="drawPoster"
/>

<van-popup
  class="posterPop"
  show="{{ true }}"
  custom-class="{{showPoster>0?'':'opacity'}}"
  close-icon="clear"
  z-index="{{showPoster}}"
  closeable
  bind:close="onPosterClose"
>
  <wxml-to-canvas class="widget" width="{{310}}" height="{{450}}" />
  <view wx:if="{{drawOver}}" class="flex flex-around pd-32 mt-24 bg-white radius-16">
    <button class="text-center unbutton" open-type="share">
      <image class="actionimg" src="https://file.lojangcc.com/weapp/common/wechat.png" />
      <view>微信好友</view>
    </button>
    <view class="text-center" bind:tap="posterToFile">
      <image class="actionimg" src="https://file.lojangcc.com/weapp/common/down-poster.png" />
      <view>保存至相册</view>
    </view>
  </view>
</van-popup>

//json
{
  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas"
  },
  "navigationBarTitleText": "商品详情"
}

//css
.opacity{
	opacity:0;
}
.van-popup {
  overflow-y: visible !important;
}
.goods_img {
  top: -60rpx;
}
.item {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
}
.btn-solo {
  height: 80rpx;
  border-radius: 40rpx;
}
.detail_img {
  width: 38rpx;
  height: 16rpx;
}

.actionimg {
  width: 45px;
  height: 45px;
}
.unbutton {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.unbutton:after {
  border: none;
}

.posterPop .van-popup {
  background-color: transparent;
}

.share-poster {
  width: 100rpx;
  height: 100rpx;
  bottom: 140rpx;
  right: 24rpx;
}

let widget = null

Component({
  data: {
    showPoster: -1000,
    drawOver: false,
  },
//点击分享按钮，调起海报
async drawPoster() {
      this.setData({
        showPoster: 1000,
      })
      if (this.data.drawOver) {
        return
      } else {
        wx.showLoading({
          title: '绘制海报中',
        })
      }
      const { detail, size, id } = this.data
      try {
        const {
          data: { qrcode },
          // TODO: 商品海报接口
        } = await http.get('/goods/getQrcode', {
          params: {
            goods_id: id,
          },
        })
        const wxml = `
          
            ${detail.cover_Image}">
          
          
            优惠价 ￥${size.price}
            ￥${size.market_price}
          
          
            
              ${detail.name.slice(0, 15)}
              ${detail.name.slice(15)}
            
            ${qrcode}">
          
        `
        const style = {
          poster: {
            width: 310,
            height: 450,
            flexDirection: 'column',
            backgroundColor: '#fff',
            borderRadius: 8,
          },
          thumbWrap: {
            width: 310,
            height: 310,
            borderRadius: 8,
          },
          thumb: {
            width: 310,
            height: 310,
            borderRadius: 8,
          },
          priceWrap: {
            width: 120,
            height: 65,
          },
          disprice: {
            width: 117,
            height: 18,
            marginTop: 15,
            marginRight: 15,
            marginBottom: 10,
            marginLeft: 15,
            color: '#F22424',
            fontSize: 18,
            lineHeight: 18,
          },
          price: {
            width: 52,
            height: 12,
            marginLeft: 15,
            color: '#000',
            fontSize: 12,
            lineHeight: 12,
          },
          content: {
            width: 290,
            height: 65,
            marginLeft: 15,
            marginRight: 15,
            flexDirection: 'row',
          },
          title: {
            width: 215,
            height: 42,
            fontSize: 14,
            lineHeight: 21,
            flexWrap: 'wrap',
            flexDirection: 'column',
            color: '#333',
          },
          line: {
            width: 210,
            height: 21,
          },
          qrcode: {
            width: 65,
            height: 65,
          },
        }
        wx.nextTick(async () => {
          widget = this.selectComponent('.widget')
          await this.renderToCanvas(wxml, style)
          this.setData({
            drawOver: true,
          })
          wx.hideLoading()
        })
      } catch (error) {
        wx.showToast({
          title: '绘制错误，请稍后重试',
          icon: 'none',
        })
        this.setData({
          showPoster: -1000,
        })
      }
    },
    renderToCanvas(wxml, style) {
      widget.renderToCanvas({ wxml, style }).then(res => {
        this.container = res
      })
    },
    posterToFile() {
      widget.canvasToTempFilePath().then(res => {
        this.setData({
          src: res.tempFilePath,
          width: this.container.layoutBox.width * 2,
          height: this.container.layoutBox.height * 2,
        })
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({
              title: '保存成功',
            })
          },
        })
      })
    },
    onPosterClose() {
      this.setData({
        showPoster: -1000,
      })
    },
    onShareAppMessage: function (res) {
      const {
        detail: { name, goods_id },
        memberInfo,
      } = this.data
      if (res.from == 'button') {
        //menu右上角转发
        return {
          title: name,
          path: `/pages/shop/goods-detail/index?id=${goods_id}&mud=${
            memberInfo.user_id || ''
          }`, //点击分享打开首页，在首页判断分享路径，再跳转到详情页
          imageUrl: this.data.swiper[0], //分享的图片路径
        }
      }
    },

微信开发工具mock的使用

当接口调不通或者没数据时候，可以造假数据，页面就可以正常写逻辑