微信小程序海报 uniapp

方案：依托微信官方wxml-to-canvas的一套生成方案

wxml-to-canvas | 微信开放文档

详细项目配置信息

毕竟我们是uni-app项目，所以跟原生小程序开发还是不一样。所以我们只看微信官网是不能正常实现生成canvas的。
一、 在uniapp项目中 构建wxcomponents文件夹
二、下载微信小程序官方的wxml-to-canvas代码片段，将其中的这个两个组件复制到我们自己创建的wxcomponents中

 修改 wxml-to-canvas 文件夹中的 index.js

module.exports = require("widget-ui");
改为
module.exports = require("../widget-ui/index.js");

在globalStyle中配置全局组件

"usingComponents": {
    "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
 }

代码：

<wxml-to-canvas width="300" height="490" class="widget"></wxml-to-canvas>

js

// 绘制海报结构
getCanvasHtml(carDetailData) {
				process=image/resize,l_220,m_lfit
				this.widget = this.selectComponent('.widget')
				let wxml = `
					<view class="container">
						<view class="wrap">
							<view class="item1">
								<view class="item1left">
									<view class="item1tag">
										<text class="item1tagtext">全新车</text>
									</view>
									<text class="brandtext">${carDetailData.carBrand} ${carDetailData.carType}</text>
								</view>
								<text class="item1price">${this.planList[0] && this.planList[0].payOffPrice ? '￥'+this.formatThousandNumber(this.planList[0].payOffPrice) : '-'}</text>
							</view>
							<view class="item2">
								<text class="typetext">${carDetailData.carTypeYear} | ${carDetailData.carTypeYearProduct}</text>
								<text class="item2righttext">即可开走</text>
							</view>
							<view class="item3">
								<image class="item3imgbg" src="https://image.51cheyaoshi.com/xcx/partner/static/product/Group_571.png"></image>
								<view class="item3text">
									<text class="item3text1">指导价</text>
									<text class="item3text2">${this.formatPrice(carDetailData.guidancePrice)}</text>
								</view>
							</view>
							<view class="item4">
								<image class="item4imgbg" src="https://image.51cheyaoshi.com/xcx/partner/static/order/Rectangle_995.png"></image>
								<image class="item4img" src="${carDetailData.imageUrl}?x-oss-process=image/resize,l_320,m_lfit"></image>
							</view>`
							
				
							
				wxml +=	`
							<view class="item7wrap">
								<image class="item7img" src="${this.qrCodeUrl}"></image>
								<text class="item8text">长按识别查看方案详情</text>
							</view>
						</view>
						<view class="item9wrap">
							<image class="item9img" src="https://image.51cheyaoshi.com/xcx/partner/static/WECARS_logo.png"></image>
							<text class="item10text">让有车生活 · 更简单</text>
						</view>
					</view>
				`
				const style = {
				  container: {
				  	width: 300,
				  	height: 490,
				  	paddingTop: 20,
				  	paddingBottom: 12,
				  	paddingLeft: 10,
				  	paddingRight: 10,
				  	backgroundColor: '#31C37B',
				  },
				  wrap: {
				  	width: '100%',
						paddingTop: 0,
				  	paddingBottom: 8,
				  	paddingLeft: 20,
				  	paddingRight: 20,
				  	backgroundColor: '#fff',
						borderRadius: 6,
				  },
				  item1: {
				  	width: '100%',
						height: 26,
				  	flexDirection: 'row',
				  	justifyContent: 'space-between',
				  	alignItems: 'center',
				  },
				  item1left: {
						width: 160,
				  	flexDirection: 'row',
				  	justifyContent: 'flex-start',
				  	alignItems: 'center',
				  },
				  brandtext: {
						width: 180,
						fontSize: 15,
				  	fontWeight: 600,
				  	color: '#333333',
				  },
				  item1tag: {
						marginTop: 22,
						marginRight: 2,
				  	width: 40,
				  	height: 17,
				  	borderRadius: 4,
				  	backgroundColor: '#3662EC',
						display: 'flex',
						flexDirection: 'row',
						justifyContent: 'center',
						alignItems: 'center',
				  },
				  item1tagtext: {
						width: 40,
						fontSize: 10,
				  	fontWeight: 500,
				  	color: '#FFFFFF',
						textAlign: 'center',
						marginBottom: 14,
				  },
				  item1price: {
						width: 80,
				  	fontSize: 17,
				  	color: '#EE3833',
				  	textAlign: 'right',
				  },
				  item2: {
				  	marginTop: 12,
				  	width: '100%',
						height: 19,
				  	display: 'flex',
				  	justifyContent: 'space-between',
						flexDirection: 'row',
				  	alignItems: 'flex-start',
				  },
				  typetext: {
				  	width: 150,
				  	fontSize: 11,
				  	color: '#666666',
				  },
				  item2righttext: {
						width: 80,
				  	fontSize: 11,
				  	color: '#333333',
				  	textAlign: 'right',
				  },
					item3: {
						marginTop: 4,
						width: '100%',
						flexDirection: 'row',
						position: 'relative',
					},
					item3imgbg: {
						width: 84,
						height: 17,
					},
					item3text: {
						flexDirection: 'row',
						alignItems: 'center',
						position: 'absolute',
						left: 5,
						top: 2,
					},
				  item3text1: {
						width: 37,
						fontSize: 9,
						color: '#fff',
				  },
					item3text2: {
						width: 60,
						fontSize: 9,
						color: '#333333',
					},
				  item4: {
				  	marginTop: 20,
				  	width: '100%',
				  	height: 195,
				  	borderRadius: 4,
				  	display: 'flex',
						flexDirection: 'row',
				  	justifyContent: 'center',
				  	alignItems: 'center',
						position: 'relative',
				  },
				  item4imgbg: {
				  	width: 240,
						height: 195,
						borderRadius: 4,
				  },
					item4img: {
						position: 'absolute',
						left: -15,
						bottom: -20,
						width: 280,
						height: 210,
					},
				  item5: {
				  	marginTop: 8,
				  	width: '100%',
						flexDirection: 'row',
						justifyContent: 'flex-start',
						alignItems: 'center',
				  },
				  item5content: {
				  	width: 160,
				  	height: 24,
				  	borderRadius: 2,
				  	backgroundColor: '#F3F4F9',
				  	flexDirection: 'row',
				  	justifyContent: 'flex-start',
				  	alignItems: 'center',
				  },
				  item5imgwrap: {
				  	marginLeft: 8,
				  	marginRight: 5,
				  	width: 14,
				  	height: 14,
				  	border: '1px dashed #D8D8D8',
				  	flexDirection: 'row',
				  	justifyContent: 'center',
				  	alignItems: 'center',
				  },
				  item5img: {
				  	width: 14,
						height: 12,
				  },
				  item5text: {
						width: 120,
						height: 20,
				  	fontSize: 12,
				  	color: '#333333',
				  },
				  item6: {
				  	marginTop: 16,
				  	width: '100%',
				  	height: 1,
				  	backgroundColor: '#F0F0F0',
				  },
					item7wrap: {
						width: '100%',
						flexDirection: 'column',
						alignItems: 'center',
					},
				  item7img: {
				  	marginTop: 16,
				  	width: 65,
						height: 65,
				  },
				  item8text: {
						marginTop: 8,
						width: 200,
						height: 22,
						textAlign: 'center',
				  	fontSize: 10,
				  	color: '#999999',
				  },
					item9wrap: {
						width: '100%',
						flexDirection: 'column',
						alignItems: 'center',
					},
				  item9img: {
				  	marginTop: 10,
				  	width: 75,
				  	height: 16,
				  },
				  item10text: {
				  	marginTop: 4,
						width: 200,
						height: 18,
				  	fontSize: 10,
				  	fontWeight: 500,
				  	color: '#FFFFFF',
						textAlign: 'center',
				  },
				}
				
				setTimeout(() => {
					this.renderToCanvas(wxml, style)
				}, 2000)
			},


// 绘制海报
renderToCanvas(wxml, style) {
				if (this.widget) {
					const p1 = this.widget.renderToCanvas({ wxml, style })
					p1.then((res) => {
						this.posterWidth = res.layoutBox.width
						this.posterHeight = res.layoutBox.height
						const p2 = this.widget.canvasToTempFilePath()
							p2.then(file => {
								this.isCompletePoster = true
								uni.hideLoading()
								this.posterSrc = file.tempFilePath
							})
					})
				}
			},

1