小程序分享图生成指南：告别 Canvas 踩坑，轻松实现朋友圈分享
由于微信小程序无法直接分享到朋友圈，业界普遍采用 Canvas 生成带小程序码的图片，引导用户保存后分享，相信不少开发者在绘制分享图时都曾遇到过各种 Canvas 的“彩蛋”（坑）。
今天推荐一个开源组件：Painter，它能够帮助我们轻松实现分享图绘制，并且已在支付宝小程序中验证可用。
快速开始
第一步：创建自定义组件
在组件的 JSON 文件中引入 Painter：
[代码]{
"component": true,
"usingComponents": {
"painter": "/painter/painter"
}
}
[代码]
第二步：编写组件 WXML
将 Painter 组件定位在屏幕外，避免影响用户界面：
[代码]// 将该组件定位在屏幕之外，用户查看不到。
<painter
style="position: absolute; top: -9999rpx;"
palette="{{imgDraw}}"
bind:imgOK="onImgOK"
/>
[代码]
第三步：实现组件逻辑
[代码]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')
}
}
})
[代码]
如何使用
1. 引入组件
在页面的 JSON 文件中引入封装好的分享组件：
[代码]{
"usingComponents": {
"share-box": "/components/shareBox/index"
}
}
[代码]
2. 页面布局
[代码]<!-- 触发按钮 -->
<button class="intro" bindtap="getUserInfo">点我生成分享图</button>
<!-- 分享组件 -->
<share-box
isCanDraw="{{isCanDraw}}"
userInfo="{{userInfo}}"
bind:initData="handleClose"
/>
[代码]
3. 页面逻辑
[代码]Page({
data: {
isCanDraw: false,
userInfo: {}
},
// 重置绘制状态
handleClose() {
this.setData({
isCanDraw: false
})
},
// 获取用户信息并开始绘制
getUserInfo() {
wx.getUserProfile({
desc: "获取您的头像昵称信息",
success: (res) => {
const { userInfo = {} } = res
this.setData({
userInfo,
isCanDraw: true // 触发绘制
})
},
fail: (err) => {
console.log('获取用户信息失败：', err)
}
})
}
})
[代码]
效果展示
完成上述步骤后，即可生成如下的分享图片：
[图片]
实用技巧
文字居中：通过设置 [代码]align: 'center'[代码] 和合适的[代码]left[代码]值实现
文字换行：设置[代码]width[代码]和 [代码]maxLines[代码] 属性，当 [代码]maxLines: 1[代码] 时，超出一行会显示为省略号
资源链接
代码片段：点击查看
Painter 可视化工具：点击查看
常见问题
Q：为什么图片无法加载？
A：需要在小程序后台配置 downloadFile 合法域名：
进入「开发」→「开发设置」→「服务器域名」
配置图片的域名前缀，如 https://qiniu-image.qtshe.com
Q：真机调试注意事项？
A：开发者工具中可在「详情」→「本地设置」中开启「不校验合法域名」，真机调试时需开启调试模式。
通过以上步骤，你就可以轻松实现小程序分享图生成功能了。如有任何问题，欢迎在评论区留言讨论！
