微信小程序海报 uniapp
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序海报 uniapp相关的知识，希望对你有一定的参考价值。
方案：依托微信官方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
以上是关于微信小程序海报 uniapp的主要内容，如果未能解决你的问题，请参考以下文章
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
HBuilder 下运行uniapp（微信小程序）时，微信开发者工具进入游客模式
HBuilder 下运行uniapp（微信小程序）时，微信开发者工具进入游客模式
uniapp转微信小程序报错Cannot read property ‘forceUpdate‘ of undefined - 微信开发者工具报错