微信小程序不能分享朋友圈，商品的分享目前只能通过生成海报的方式去分享。
1、展示页面 wxml
<canvas class="canvas" canvas-id="canvas"></canvas>2、样式页面 wxss
.canvas{ width:650rpx; height:1000rpx; margin:0 auto; background:rgba(255,255,255,1); box-shadow:0px 2rpx 26rpx 0px rgba(138,149,150,0.25); border-radius:10rpx;}3、逻辑页面 wxjs
poster: function () { const context = wx.createCanvasContext('canvas'); context.setFillStyle("#fff"); context.fillRect(0, 0, 375, 667); const img = '/img/goods.jpg'; const QR = '/img/QR.jpg'; const couponImg = '/img/couponImg.png' context.drawImage(img, 0, 0, 650, 350); context.drawImage(QR, 220, 400, 80, 80); context.drawImage(couponImg, 13, 470, 80, 20); context.setFontSize(22); context.setFillStyle('#022035'); context.setTextAlign('left'); context.fillText("安心质选樱桃番茄", 10, 400); context.stroke(); context.setFontSize(14); context.setFillStyle('#999'); context.setTextAlign('left'); context.fillText("现价", 10, 440); context.stroke(); context.setFontSize(14); context.setFillStyle('#999'); context.setTextAlign('left'); context.fillText("￥", 50, 440); context.stroke(); context.setFontSize(14); context.setFillStyle('#999'); context.setTextAlign('left'); context.fillText("100", 65, 440); context.stroke(); context.setFillStyle('#F65E5E') context.fillRect(10,470,20,20) context.setFontSize(14); context.setFillStyle('#Fff'); context.setTextAlign('left'); context.fillText("券", 13, 485); context.stroke(); context.setFontSize(12); context.setFillStyle('#F65E5E'); context.setTextAlign('left'); context.fillText("85折", 45, 485); context.stroke(); context.setFontSize(14); context.setFillStyle('#F65E5E'); context.setTextAlign('left'); context.fillText("￥", 110, 485); context.stroke(); context.setFontSize(20); context.setFillStyle('#F65E5E'); context.setTextAlign('left'); context.fillText("100", 125, 485); context.stroke(); context.draw(); },drawImage(img, x, y, w, h) x、y相当于画布对应的左边原点,w、h相当于你绘制图片的宽高
4、最终效果
