如何三分钟为小程序打造管理后台

微信扫一扫,分享到朋友圈

如何三分钟为小程序打造管理后台

云开发扩展能力是云开发团队为开发者提供的一站式云端服务,旨在降低开发者使用云服务的门槛,助力开发者快速开发应用。目前已经对外支持的有图像处理、图像安全审核、图像盲水印、图像标签等。

今天说的是新推出的“CMS内容管理系统”,以下简称“CMS”。

为方便开发人员和内容运营者,随时随地管理小程序/ Web 等多端云开发内容数据,云开发 CMS支持 PC/移动端浏览器访问,支持文本、富文本、图片、文件、关联类型等多种内容类型的可视化编辑。

不仅如此,CMS 天然的多端适配,让管理后台的开发、使用都更加的简单,对于我这种UI型前端来说,这次“CMS内容管理系统”的界面,我还是挺满意的。我也可以随时掏出手机查看我的小程序的数据了。

云开发 CMS 功能特性

免开发 基于后台建模配置生成内容管理界面,无须编写代码
多端适配 支持 PC/ 移动端访问和管理内容
功能丰富 支持文本、富文本、图片、文件 等多种类型内容的可视化编辑,并且支持内容关联
权限控制 系统基于管理员/运营者两种身份角色的访问控制
外部系统集成 支持 Webhook 接口,可以用于在运营修改修改内容后通知外部系统,比如自动构建静态网站、发送通知等
数据源兼容 支持管理小程序/ Web / 移动端的云开发数据,支持管理已有数据集合,也可以在 CMS 后台创建新的内容和数据集合
部署简单 可在云开发控制台扩展管理界面一键部署和升级

开发步骤

如何让 CMS 数据源兼容已有数据表

在管理小程序数据时,过去都需要在云开发的管理控制台中管理,十分的麻烦,而且只有自己才能看懂,但有了云开发 CMS, 就可以让原有的小程序有一个更加可视化的管理方式。

云开发 CMS 支持管理小程序/ Web / 移动端的云开发数据,支持管理已有数据集合,也可以在 CMS 后台创建新的内容和数据集合

这也就是说,你先前已经做了数据库存储的话,这次只要在“内容设置”中将数据表的表名称、字段名再重新声明一次即可,不会对线上数据造成影响。(每次修改完表结构,记得刷新页面)

我这次对我的用户管理表和用户头像表都进行了字段改造,主要是从蛇形命名法(user_id)(user_id)全部改为小驼峰命名法(userId),也是跟自带的创建时间(createTime)和更新时间(updateTime)保持一致,这样在UI侧(web和小程序)、云函数、CMS以及云数据库上管理字段,都是统一的字段命名方案,在代码编程时会更加方便。

其实在 MySQL 数据库中,是需要用蛇形命名法(user_id),在 Java 的逻辑中会将蛇形命名法转换为小驼峰命名法。而在 NOSQL 数据库中,可以直接小驼峰命名法,这种不仅可以简化字段名转化,也对以 JavaScript 为主的 Web云开发和小程序云开发人员来说非常友好。

CMS 支持图片类型,让素材图片从本地到云存储

Hi头像的基础功能是在人脸图片上叠加贴纸素材。

  • 微信小程序canvas画图是需要用到本地路径的图片

  • 微信小程序ios设备上Canvas画图不支持水平翻转

所以当时将图片放在本地,每个图片有正反两个方向。痛点也随之而来,本地图片不仅占用小程序包的体积,后续功能升级后,维护起来也比较麻烦。

这次将图片放在云存储上,在数据库内保存 couldID 。在使用时,在云函数侧将 couldID 转换成真实图片地址Url,在 Canvas 画图时将图片Url转换成本地路径来使用。

通过简单的配置,就可以实现在 CMS 管理图片素材,这样对于小程序来说,大大的简化了更新素材的能力。

CMS 支持多表,可以建立字段关联表,促进Hi头像的创意升级

Hi头像小程序先前做过两个主题活动,分别为戴口罩和女王节戴皇冠,在本地页面写了2个页面,并且每个页面都有各自的页面配置。那之后又想多增加几个节日或者主题活动,是不是要每次都在小程序代码里增加新的页面配置呢?

这次,我将借助“CMS内容管理系统”来完成。

字段词典

借助与云开发 CMS 自带的一些功能,我做了一些简单的配置,就完成了一个丰富的后台功能配置。

  • 头像编辑页:负责头像编辑功能,每次有一个主题活动

  • 主题:围绕一个主题来组织贴纸、相框、页面背景、主题色等,主题为节日、有趣的活动(暑期降温)等

  • 贴纸分类:将贴纸进行分类显示

  • 贴纸:贴在人脸上或头像内,位置类型分为额头、嘴巴、其他,头像内可以允许多个

此外,除了常见的几种类型外,cms还支持富文本、markdown等高级格式,以及关联类型,也就是将一个字段与另外的一个表继续关联。举个例子来说,贴纸分类属于多个主题,贴纸属于多个贴纸分类,在这样的情况下,就可以借助于关联类型来快速管理了,十分方便。

使用腾讯云开发来部署Svelte Sapper应用

上一篇

Continuation在JS中的应用

下一篇

你也可能喜欢

如何三分钟为小程序打造管理后台

长按储存图像,分享给朋友