第 15 章：活动海报生成
“朋友圈是检验活动火不火的唯一标准。”
一个漂亮的分享海报，能让活动的传播效率翻倍。本章将讲解如何在小程序端利用 Canvas 动态绘制海报。
15.1 Canvas 绘制海报
我们使用 UniApp 的 canvas-2d 接口（或 uni.createCanvasContext）。
绘制流程
- 准备画布: 在页面放置一个
<canvas>组件，设置宽高（通常是屏幕宽度的 0.8 倍）。 - 绘制背景: 填充白色背景，或绘制一张背景图。
- 绘制封面: 将活动封面图 (
coverUrl) 裁剪并绘制到上方。 - 绘制文字:
- 标题: 多行文本换行处理（Canvas 不支持自动换行，需手动计算）。
- 时间/地点: 绘制小图标和文字。
- 绘制小程序码: 将云函数生成的圆形小程序码绘制到右下角。
避坑指南
- 图片跨域: Canvas 绘制网络图片（如头像、封面）需先通过
uni.downloadFile下载到本地临时路径。 - 高清屏模糊: Canvas 的像素必须匹配屏幕的
pixelRatio。通常设置width = 300 * dpr,height = 500 * dpr，然后 CSS 样式设为300px。
15.2 小程序码生成
后端调用 openapi.wxacode.getUnlimited 接口生成小程序码。
// server/activity/index.js
const result = await cloud.openapi.wxacode.getUnlimited({
scene: `id=${activityId}`, // 扫码进入详情页，带参数
page: 'pages/activity/detail',
width: 280
})
return result.buffer // 返回二进制图片数据
15.3 海报保存与分享
绘制完成后，调用 uni.canvasToTempFilePath 将画布内容导出为图片。
- 保存相册:
uni.saveImageToPhotosAlbum。需要处理用户授权拒绝的情况。 - 直接分享: 部分场景支持直接调用
showShareImageMenu。
本章小结： 海报生成功能涉及了 Canvas 绘图、网络图片下载、小程序码生成等多个技术点，是前端基本功的综合体现。至此，所有功能模块开发完毕。接下来，我们进入最后阶段——端到端流程与部署上线。
