最近开发小程序遇到一个需求，后端提供一个二维码，携带分享参数，前端来生成一个分享海报，下面是部分截图
这里我就只说一下点击生成海报的方法，这里调用了第三方插件，直接下载，https://download.csdn.net/download/m0_46156566/20002116
代码下载好了，直接拷贝到自己的项目目录，我是这样放的miniprogram_dist就是下载好的组件包
在需要的页面引入组件
JSON文件引入组件
{
"usingComponents": {
"poster": "/miniprogram_dist/poster"
}
}
WXML
<view>
<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
<image style="width:100rpx;height:100rpx;"
src="图片就自己去找啦"></image>
<button class="tx-14 cl-info">生成分享海报</button>
</view>
</poster>
</view>
JS
const posterConfig = {
width: 750,
height: 1334,
backgroundColor: '#ffffff',
debug: false,
pixelRatio: 1,
blocks: [{
width: 690,
height: 808,
x: 30,
y: 183,
borderWidth: 2,
borderColor: '#ebebeb',
borderRadius: 20,
}
],
texts: [{
x: 113,
y: 61,
baseLine: 'middle',
text: '草帽男孩',
fontSize: 32,
color: '#8d8d8d',
},
{
x: 30,
y: 125,
baseLine: 'top',
text: str,
fontSize: 36,
color: '#080808',
},
{
x: 59,
y: 895,
baseLine: 'middle',
text: [{
text: '经营分类：',
fontSize: 30,
color: '#333333',
},
{
text: '亿通建筑书店',
fontSize: 30,
color: '#6d6d6d',
marginLeft: 10,
}
]
},
{
x: 59,
y: 945,
baseLine: 'middle',
text: [{
text: '地理位置：',
fontSize: 30,
color: '#333333',
},
{
text: '湖北襄阳',
fontSize: 28,
color: '#6d6d6d',
marginLeft: 10,
}
]
},
{
x: 360,
y: 1105,
baseLine: 'top',
text: '长按识别小程序码',
fontSize: 36,
color: '#333333',
},
{
x: 360,
y: 1163,
baseLine: 'top',
text: '易享铺-共享您的店铺更赚钱',
fontSize: 26,
color: '#6d6d6d',
},
],
images: [{
width: 62,
height: 62,
x: 30,
y: 30,
borderRadius: 62,
url: '顶部头像照片',
},
{
width: 634,
height: 634,
x: 59,
y: 210,
url: '中间大图链接',
},
{
width: 280,
height: 280,
x: 50,
y: 1000,
url: '分享二维码',
}
]
}
onPosterSuccess(e) { // 海报生成成功
this.setData({
posterSrc: e.detail,
showpops: false,
showPoster: true,
})
const {
detail
} = e;
console.log(e.detail,'生成的海报')
},
onPosterFail(err) {
app.ShowToast('生成失败！')
},
savePoster() { // 点击保存到手机相册
wx.getImageInfo({
src: this.data.posterSrc,
success: function (res) {
var path = res.path;
//保存图片到本地
wx.saveImageToPhotosAlbum({
filePath: path,
success: function () {
wx.showToast({
title: '保存成功'
})
},
fail: function (res) {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
})
},
onPosterSuccess()生成海报成功的函数，e.detail就是生成的海报，是一个https网路链接，可以直接下载也可以预览，savePoster()是点击保存的方法，onPosterFail()是生成错误的方法，至于二维码携带参数也很简单，看官方文档，按文档传参，在onLoad里面即可获取https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
