云开发CMS实战-Hi头像节日主题贴纸大升级
云开发扩展能力介绍
云开发扩展能力是云开发团队为开发者提供的一站式云端服务，旨在降低开发者使用云服务的门槛，助力开发者快速开发应用。目前已经对外支持的有图像处理、图像安全审核、图像盲水印、图像标签等。
今天说的是新推出的“CMS内容管理系统”，以下简称“CMS”。
为方便开发人员和内容运营者，随时随地管理小程序/ Web 等多端云开发内容数据，支持 PC/移动端浏览器访问，支持文本、富文本、图片、文件、关联类型等多种内容类型的可视化编辑。
功能特性
| 特性 | 介绍 |
|---|---|
| 免开发 | 基于后台建模配置生成内容管理界面，无须编写代码 |
| 多端适配 | 支持 PC/ 移动端访问和管理内容 |
| 功能丰富 | 支持文本、富文本、图片、文件 等多种类型内容的可视化编辑，并且支持内容关联 |
| 权限控制 | 系统基于管理员/运营者两种身份角色的访问控制 |
| 外部系统集成 | 支持 Webhook 接口，可以用于在运营修改修改内容后通知外部系统，比如自动构建静态网站、发送通知等 |
| 数据源兼容 | 支持管理小程序/ Web / 移动端的云开发数据，支持管理已有数据集合，也可以在 CMS 后台创建新的内容和数据集合 |
| 部署简单 | 可在云开发控制台扩展管理界面一键部署和升级 |
小程序功能实战
CMS的管理界面 UI 多端适配
支持 PC/ 移动端访问和管理内容
对于我这种UI型前端来说，这次“CMS内容管理系统”的界面，我还是挺满意的。我也可以随时掏出手机查看我的小程序的数据了。
CMS 数据源兼容已有数据表
支持管理小程序/ Web / 移动端的云开发数据，支持管理已有数据集合，也可以在 CMS 后台创建新的内容和数据集合
也就是说，你先前已经做了数据库存储的话，这次只要在“内容设置”中将数据表的表名称、字段名再重新声明一次即可，不会对线上数据造成影响。（每次修改完表结构，记得刷新页面）
我这次对我的用户管理表和用户头像表都进行了字段改造，主要是从蛇形命名法（user_id）（user_id）全部改为小驼峰命名法（userId），也是跟自带的创建时间（createTime）和更新时间（updateTime）保持一致，这样在UI侧（web和小程序）、云函数、CMS以及云数据库上管理字段，都是统一的字段命名方案，在代码编程时会更加方便。
其实在 MySQL 数据库中，是需要用蛇形命名法（user_id），在 Java 的逻辑中会将蛇形命名法转换为小驼峰命名法。而在 NOSQL 数据库中，可以直接小驼峰命名法，这种不仅可以简化字段名转化，也对以 JavaScript 为主的 Web云开发和小程序云开发人员来说非常友好。
细心的同学会发现，这次CMS系统主要用的是单层的数据表结构，后续应该支持嵌套。
CMS 支持图片类型，让素材图片从本地到云存储
Hi头像的基础功能是在人脸图片上叠加贴纸素材。
- 微信小程序canvas画图是需要用到本地路径的图片
- 微信小程序ios设备上Canvas画图不支持水平翻转
所以当时将图片放在本地，每个图片有正反两个方向。痛点也随之而来，本地图片不仅占用小程序包的体积，后续功能升级后，维护起来也比较麻烦。
这次将图片放在云存储上，在数据库内保存couldID。在使用时，在云函数侧将couldID转换成真实图片地址Url，在Canvas画图时将图片Url转换成本地路径来使用。
CMS 支持多表，可以建立字段关联表，促进Hi头像的创意升级
Hi头像先前做过两个主题活动，分别为戴口罩和女王节戴皇冠，在本地页面写了2个页面，并且每个页面都有各自的页面配置。那之后又想多增加几个节日或者主题活动，是不是要每次都在小程序代码里增加新的页面配置呢？
这次，我将借助“CMS内容管理系统”来完成。
字段词典
- 头像编辑页：负责头像编辑功能，每次有一个主题活动
- 主题：围绕一个主题来组织贴纸、相框、页面背景、主题色等，主题为节日、有趣的活动（暑期降温）等
- 贴纸分类：将贴纸进行分类显示
- 贴纸：贴在人脸上或头像内，位置类型分为额头、嘴巴、其他，头像内可以允许多个
那么，除了常见的几种类型外，cms还支持富文本、markdown等高级格式，以及关联型，也就是将一个字段与另外的一个表继续关联
比如说，贴纸分类属于多个主题，贴纸属于多个贴纸分类，如此就可以复用贴纸啦。
CMS 多表结构需要使用联表查询
因为 CMS 初期是依据关系型数据库的建模，在后续应该会增加“NoSQL”的嵌套方式。
聚合阶段。聚合阶段。联表查询。与同个数据库下的一个指定的集合做
left outer join(左外连接)。对该阶段的每一个输入记录，lookup会在该记录中增加一个数组字段，该数组是被联表中满足匹配条件的记录列表。lookup会将连接后的结果输出给下个阶段。 API 文档： Aggregate.lookup
那么，本次使用 CMS 的重中之重自然是，Hi头像小程序“头像编辑页”的数据获取。
- 从“配置表”中查询到当前想显示的主题（
themeId） - 从“主题”表中查询到对应的主题配置，包含主题名称、分享信息等。
上面这两步还比较简单，通过2次查询即可。
let { themeId } = event
if (!themeId) {
let configRes = await cloud.callFunction({
name: 'collection_get_configs',
data: {
configName: 'avatar-edit'
}
})
let result = configRes.result.data
themeId = result.themeId
}
if (!themeId) {
return {
data: '',
status: -20001,
message: '未成功设置themeID',
time: new Date()
}
}
const { errMsg, data } = await db.collection('themes').doc(themeId).get()
console.log('result :>> ', data)
在确认有对应的主题后，就要进行进行聚合查询了。
主要是通过查询贴纸分类表（shape_categories），并且联表查询（Aggregate.lookup）贴纸表（shapes）。
if (errMsg === 'document.get:ok') {
let { errMsg: categoryErrMsg, list: shapeCategoryList } = await db.collection('shape_categories').aggregate()
.match({
belongThemes: themeId
})
.lookup({
from: 'shapes',
localField: '_id',
foreignField: 'belongShapeCategory',
as: 'shapeList'
})
.end()
}
文章相关内容：
我是 盛瀚钦，沪江 CCtalk 前端开发工程师，Taro 框架的 issue 维护志愿者，腾讯云云开发布道师，主要侧重于前端 UI 编写和团队文档建设。
最近组建了HiOur开源团队，主要开发Hi头像小程序及相关教程，与云开发 Cloudbase合作举行云开发月度挑战赛。