丸子社区海报分享图样式
最后更新于：2019-12-02
丸子社区小程序海报分享图采用的是组件功能，对于有一定动手能力的人，是可以根据组件功能实现自己的小程序分享海报样式。下面由丸子社区群友@我们的小哪吒分享的海报样式功能。
把以下代码替换掉 detail.js 里的海报生成代码。需要注意修改相关文字内容。
/**
* 生成海报
*/
isPrefix: function() {
let that = this;
this.setData({
modalTarget: ”,
placeholder: ”,
})
let prefix = this.data.prefix
if (prefix) {
wx.previewImage({
current: prefix,
urls: [prefix]
})
this.setData({
modalTarget: ”
})
} else {
let args = {}
wx.showLoading({
title: ‘海报生成中…’,
})
args.id = that.data.id
args.path = “/pages/forum/detail?id=” + that.data.id
API.getCodeImg(args).then(res =>{
console.log(res)
that.data.nvConfig = {
width: 670,
height: 1080,
backgroundColor: ‘#fff’,
debug: false,
pixelRatio: 1,
texts: [{
x: 100,
y: 950,
baseLine: ‘top’,
text: that.data.description,
fontSize: 14,
color: ‘#080808’,
},
{
x: 40,
y: 1050,
baseLine: ‘top’,
text: ‘扫码阅读更多内容’,
fontSize: 32,
color: ‘#080808’,
},
{
x: 40,
y: 1110,
baseLine: ‘top’,
text: ‘快来和大家一起参与讨论吧～’,
fontSize: 24,
color: ‘#929292’,
}, {
x: 280,
y: 1210,
baseLine: ‘top’,
text: ‘- 来自宝妈圈 -‘,
fontSize: 20,
color: ‘#929292’,
}, {
x: 40,
y: 630,
baseLine: ‘top’,
text: that.data.detail.time,
fontSize: 28,
color: ‘#929292’,
}, {
x: 350,
y: 1230,
baseLine: ‘top’,
text: ”,
fontSize: 20,
color: ‘#929292’,
},
],
images: [{
width: 670,
height: 128,
x: 0,
y: 0,
url: ‘/image/wx_poster_bg.png’,
},
{
width: 8,
height: 132,
x: 20,
y: 854,
url: ‘/image/wx_poster_bg.png’,
},
]}, that.data.nvConfig.texts.push(
{
x: 100, //分享者id名称
y: 930,
baseLine: ‘middle’,
text: that.data.user.nickName,
fontSize: 24,
color: ‘rgba(64,34,15,1)’,
zIndex: 200,}, {
x: 40, //内容
y: 705,
baseLine: ‘middle’,
text: that.data.detail.excerpt.rendered,
lineNum: 4,
lineHeight: 48,
fontSize: 28,
color: ‘#000000’,
zIndex: 200,
width: 580})
that.data.nvConfig.images.push({
width: 58,
height: 58,
x: 24, //头像
y: 910,
borderRadius: 78,
url: that.data.user.avatarUrl,
}, {
width: 680,
height: 600,x: 0, //封面图
y: 0,
url: res.cover,
}, {
width: 140,
height: 140,
x: 440,
y: 1010,
url: res.qrcode,
})
that.setData({
nvConfig: that.data.nvConfig
}, () =>{
Poster.create(true); // 入参：true为抹掉重新生成
});
})
}
},