微信小程序:生成广告海报
程序员文章站
2022-07-06 15:33:03
需求:小程序码+图片=海报点击保存图片,打开微信进行扫描生成小程序码(写了)小程序码 + 图片 = 一张图片点击保存图片(写了)wxml-to-canvas微信开发文档1.安装wxml-to-canvasdemo.js,修改模板文件,变成海报的对应样式,最主要的const wxml = `
需求:小程序码+图片=海报
点击保存图片,打开微信进行扫描
生成小程序码(写了)
小程序码 + 图片 = 一张图片
点击保存图片(写了)
wxml-to-canvas微信开发文档
1.安装wxml-to-canvas
demo.js,修改模板文件,变成海报的对应样式,最主要的
const wxml = `
<view class="container">
<image class="img" src="/image/sharebg.jpg"></image>
</view>
</view>
`
const style = {
container: {
width: 300,
height: 200,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: '#ccc',
alignItems: 'center',
},
itemBox: {
width: 80,
height: 60,
},
text: {
width: 80,
height: 60,
textAlign: 'center',
verticalAlign: 'middle',
},
img: {
width: '100',
height: '100',
}
}
module.exports = {
wxml,
style
}
const {wxml, style} = require('./demo.js')
Page({
data: {
src: ''
},
onLoad() {
this.widget = this.selectComponent('.widget')
},
//渲染canvas,点击生成海报。
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
this.container = res
this.extraImage()
})
},
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
this.setData({
src: res.tempFilePath,
width: this.container.layoutBox.width,
height: this.container.layoutBox.height
})
})
}
})
本文地址:https://blog.csdn.net/qq_36083613/article/details/113995838