前段时间因为业务需求，需要在微信小程序里分享海报，于是在网上找到了这个方案。此处主要是搬运了网上的内容，加上我自己融合的组件的下载内容。具体如下：
第一步：下载组件
下载组件：Painter 一款轻量级的小程序海报生成组件
下载地址（github地址）：Kujiale-Mobile/Painter: 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 (github.com)
Painter库地址： https://github.com/Kujiale-Mobile/Painter
Painter组件地址： https://github.com/Kujiale-Mobile/PainterCore
组件包含内容：
第二步：把该组件下载下来，并放入你自己的微信小程序里。 （建议你先了解过微信小程序第三方组件后再阅读本方案：自定义组件 | 微信开放文档 (qq.com)）
第三步：在自定义组件中引入并使用该 Painter****组件：
详细使用步骤如下：
1、首先我们新增一个自定义组件 share-box ，在该组件的json中引入painter组件：
{
"component": true,
"usingComponents": {
"painter": "/painter/painter"
}
}
2、然后在 share-box 组件的WXML 中写入：
// 将该组件定位在屏幕之外，用户查看不到。
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />
3、接下来是share-box自定义组件里的js代码，这个代码主要是描述你需要绘制的海报的配置内容：
Component({
properties: {
// 是否开始绘图
isCanDraw: {
type: Boolean,
value: false,
observer(newVal) {
newVal && this.handleStartDrawImg()
}
},
// 用户头像昵称信息
userInfo: {
type: Object,
value: {
avatarUrl: '',
nickName: ''
}
}
},
data: {
imgDraw: {}, // 绘制图片的大对象
sharePath: '' // 生成的分享图
},
methods: {
handleStartDrawImg() {
wx.showLoading({
title: '生成中'
})
this.setData({
imgDraw: {
width: '750rpx',
height: '1334rpx',
background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',
views: [
{
type: 'image',
url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',
css: {
top: '32rpx',
left: '30rpx',
right: '32rpx',
width: '688rpx',
height: '420rpx',
borderRadius: '16rpx'
},
},
{
type: 'image',
url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',
css: {
top: '404rpx',
left: '328rpx',
width: '96rpx',
height: '96rpx',
borderWidth: '6rpx',
borderColor: '#FFF',
borderRadius: '96rpx'
}
},
{
type: 'text',
text: this.data.userInfo.nickName || '青团子',
css: {
top: '532rpx',
fontSize: '28rpx',
left: '375rpx',
align: 'center',
color: '#3c3c3c'
}
},
{
type: 'text',
text: `邀请您参与助力活动`,
css: {
top: '576rpx',
left: '375rpx',
align: 'center',
fontSize: '28rpx',
color: '#3c3c3c'
}
},
{
type: 'text',
text: `宇宙最萌蓝牙耳机测评员`,
css: {
top: '644rpx',
left: '375rpx',
maxLines: 1,
align: 'center',
fontWeight: 'bold',
fontSize: '44rpx',
color: '#3c3c3c'
}
},
{
type: 'image',
url: 'https://qiniu-image.qtshe.com/20190605index.jpg',
css: {
top: '834rpx',
left: '470rpx',
width: '200rpx',
height: '200rpx'
}
}
]
}
})
},
onImgErr(e) {
wx.hideLoading()
wx.showToast({
title: '生成分享图失败，请刷新页面重试'
})
//通知外部绘制完成，重置isCanDraw为false
this.triggerEvent('initData')
},
onImgOK(e) {
wx.hideLoading()
// 展示分享图
wx.showShareImageMenu({
path: e.detail.path,
fail: err => {
console.log(err)
}
})
//通知外部绘制完成，重置isCanDraw为false
this.triggerEvent('initData')
}
}
})
4、在share-box自定义组件的wxss里写入：
.share-wrap {
width: 100%;
visibility: hidden;
}
.share-wrap.active {
visibility: visible;
}
.share-back {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 888;
opacity: 0;
transition: all .3s;
}
.share-back.active {
opacity: 1;
transition: all .3s;
}
.share-container {
width: 100%;
background: #FFF;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
border-radius: 16rpx 16rpx 0 0;
transform: translateY(100%);
transition: all .3s;
}
.share-container.active {
transform: translateY(0%);
transition: all .3s;
}
.close {
width: 30rpx;
height: 30rpx;
overflow: hidden;
position: absolute;
right: 64rpx;
top: 64rpx;
}
.close::after {
transform: rotate(-45deg);
}
.close::before {
transform: rotate(45deg);
}
.close::before,
.close::after {
content: '';
position: absolute;
height: 3rpx;
width: 100%;
top: 50%;
left: 0;
margin-top: -2rpx;
background: #9C9C9C;
}
.share-image {
width: 420rpx;
margin: 66rpx auto 0;
display: block;
border-radius: 16rpx;
box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}
.share-tips {
width: 100%;
text-align: center;
color: #3C3C3C;
font-size: 28rpx;
margin: 32rpx 0;
}
.save-btn {
width: 336rpx;
height: 96rpx;
margin: 0 auto 94rpx;
background: url('https://qiniu-image.qtshe.com/20190506save-btn.png') center center;
background-size: 100% 100%;
}
5、接下来就是使用这个自定义组件share-box：
在我们要生成海报的页面引入我们的自定义组件share-box，如下：
(1)在页面的json文件中引入自定义组件share-box：
{
"usingComponents": {
"share-box": "./components/shareBox/index"
}
}
（2）在页面WXML中引入自定义组件share-box：
<share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="onClose" />
（3）在页面js中引入：
const app = getApp()
Page({
data: {
isCanDraw: false
},
// 组件内部关掉或者绘制完成需重置状态
handleClose() {
this.setData({
isCanDraw: !this.data.isCanDraw
})
},
getUserInfo(e) {
wx.getUserProfile({
desc: "获取您的头像昵称信息",
success: res => {
const { userInfo = {} } = res
this.setData({
userInfo,
isCanDraw: true // 开始绘制海报图
})
},
fail: err => {
console.log(err)
}
})
}
})
（4）最后就绘制完成：
以上内容是由我结合原作者分享的内容编写的，欢迎大家前往原作者的文章查看详细用法：
原文地址： https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
原文作者提示：
tips：
文字居中实现可以看下代码片段
文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号
代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5
附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。
最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。
另外：这里提供一个生成share-box自定义组件里的js代码，这个代码主要是描述你需要绘制的海报的配置内容的工具：
工具地址：https://lingxiaoyi.github.io/painter-custom-poster/
由于使用该工具生成的json代码，所以这个我用到另外一个工具来将json转换为js对象：（要注意的是，这个海报的配置内容工具生成的json中首尾含有我们可能用不到的几行代码，大家自行删除后再用如下json转js工具转换成js后粘贴到对应的 share-box自定义组件里的js代码里即可）
工具地址：https://uutool.cn/json2obj/
注意：原作者提供了代码片段，大家可以访问查看代码片段，这里我也把原作者的小程序代码片段地址贴出来：developers.weixin.qq.com/s/J38pKsmK7…
