微信小程序自定义生成动态分享内容

方法：使用wxml-to-canvas生成图片，分享生成的图片
wxml-to-canvas文档：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/en/extended/component-plus/wxml-to-canvas.html
1、安装wxml-to-canvas

npm install --Save. wxml-to-canvas

2、page.js中在需要的路由中引入wxml-to-canvas

{
    
    
	  "path": "pages/index",
	  "style": {
    
    
	    "navigationBarTitleText": "自定义分享",
	    "navigationStyle": "custom",
		"usingComponents": {
    
    
		  "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
		}
	  }
	},

3、在分享页面使用

<wxml-to-canvas id="widget" class="widget" width="300" height="300" style="left:-900%;top:-900%;position: absolute;"></wxml-to-canvas>

<u-button open-type="share" color="linear-gradient(0deg,#58c395 0%, #4daf8b)">分享按钮</u-button>

4、自定义分享方法

async onShareAppMessage (res) {
    
    
				const cw = 140
				const ch = 112
				const widget = this.selectComponent('#widget')
				const cre = await widget.renderToCanvas({
    
    
					wxml:`
						<view class="view">
							<image src="../../static/daifu.jpg" class="bg"></image>
							<text class="text">¥${
    
    (this.orderdetail.should_pay/1000).toFixed(2)}元</text>
						</view>
					`,
					style:{
    
    
						view:{
    
    
							width:cw,
							height:ch,
							display: 'flex',
							textAlign: 'center',
						},
						bg:{
    
    
							position:'absolute',
							width:cw,
							height:ch,
							top:0,
							left:0,
						},
						text: {
    
    
							fontSize: 9,
							fontWeight: 600,
							color: '#333',
							verticalAlign: 'middle',
							top:57,
						}
					}
				})
				const re=await widget.canvasToTempFilePath()
				return {
    
    
					title:'支付分享',
					path: 'pages/center/pay_type?sharecode=' + this.orderdetail._id, // 打开分享跳转地址
					imageUrl:re.tempFilePath,
					success: function (res) {
    
    
					// 回调函数已经取消了，运行时进入不到这里
					  if(res.errMsg == 'shareAppMessage:ok'){
    
    
						console.log("分享成功",res)
					  }
					},
					fail:function(res){
    
    
					// 回调函数已经取消了，运行时进入不到这里
					  console.log("分享失败",res)
					}
				}
			}

5、分享效果