中大猫谱小程序

中大猫谱小程序

URL
https://github.com/sysucats/zhongdamaopu
notion image

中大猫谱

notion image
——拍照记录校园内猫猫的成长轨迹
notion image
notion image
notion image
主要功能:创建校园猫猫档案,为猫猫上传照片,以及照片审核,人员管理等。
notion image

体验一下

打开微信,扫码或搜索“中大猫谱”。
notion image

朋友们的小程序

华农喵星人
汇景猫党
HNU喵汪图鉴
二师猫语
如果,你所在校园(/社团/小区...)的猫猫
notion image
也盼望拥有一份属于自己的猫猫档案,请你跟随下一章节的指引,为它们部署、发布一份独特的猫谱小程序。
部署完成后,可以邀请你的朋友帮忙管理猫猫信息。我们为此准备了【猫谱-管理员手册】,信息管理无需接触代码。链接:https://docs.qq.com/doc/DSEl0aENOSEx5cmtE
部署过程中遇到任何问题,可以选择:
  • 加入猫谱技术交流QQ群:956808218
  • 在GitHub页面提issue

资料整理

部署

notion image
notion image
无需从零开始,只要一些耐心。

前期准备

  • 挑选并设置好小程序名称及LOGO
  • 进入Releases页面,下载最新版本的的Source code(zip),解压
  • 替换initDatabase/系统图片中的图片(稍后再换也行)

代码部署

我们在2022年3月录制了一份代码部署视频( https://www.bilibili.com/video/BV1Sb4y1W7gS ),希望这段视频能帮助你完成部署阶段最繁杂的部分。
以下是一些你需要完成的关键操作,如无特别说明
notion image
符号),则与视频演示一致。

导入项目

  • 在微信开发者工具中导入项目,并修改APPID
期望:开发工具中有三只跳动小猫的loading图像,则说明导入成功。

进入部署模式

  • 开发者工具中,点击上方中间的“普通编译”(在编译键旁边),在下拉框中选择“部署指引”
期望:页面切换到部署检测&指引页,有多项自动检测的结果(应该都是未通过)。后续这个页面会帮助你检查部署情况,并自动化完成一些部署操作。

开通云开发、部署云函数

  • 在开发工具右上角开通云开发服务,创建云环境,相当于后端服务器
  • 依次右键cloudfunctions文件夹中的云函数,点击“创建并部署:云端安装依赖”,直至所有文件夹变成绿色图标

特殊依赖上传

对于 imProcess 云函数,无法云端自动安装图像处理依赖库,需要手动上传(不再需要看那个视频啦):
  • 解压到cloudfunctions\imProcess中,得到cloudfunctions\imProcess\node_modules
  • 在开发者工具中,右键imProcess文件夹,点击“创建并部署:所有文件”,注意是“所有文件”
  • 注意,如果修改了config.js中的app_name,则需要重新点击一次“上传并部署:所有文件
期望:点开云开发可以看到面板数据,则说明开通成功。重新编译后,部署检查的第1、2项状态为通过。

创建数据集合(无需手动操作)

这一步已经实现了自动化,保证上一步操作完成后,部署指引页面会帮你完成数据库创建、数据初始化、权限配置操作。如果部署检查的第3项“创建数据库”的状态为通过,则不需要操作下面4步。
  • 创建数据集合:cat, comment, feedback, inter, news, photo, photo_rank, reward, science, setting, user
  • 设置上述数据集合权限为第一项:“所有用户可读、仅创建者可读写”
  • 导入initDatabase/database-setting.json文件到setting数据集合
  • 导入initDatabase/database-science.json文件到science数据集合
期望:关于页出现中大猫谱的友情链接、科普的二级页面出现文字信息,则说明创建成功。

替换系统图片

  • 在云存储中创建系统文件夹,上传initDatabase/系统图片中的所有图片
  • 替换miniprogram/config.js中的图片链接为刚刚上传的文件的File ID
期望:部署检查的第4项“系统云储存图片”状态为通过。并且,科普页、打赏页的赞赏码、反馈页新猫问卷的图片可以显示,则说明替换成功。当部署检查的所有项都通过后,请点击编译按钮旁边的“部署指引”,切换回“普通编译”。

赋予管理员权限(无需手动操作)

这一步已经实现了自动化,保证部署检查的第3项通过后,跳转到关于页,应该能看到管理后台的各个按钮,则无需操作下面两步。
  • 在小程序端,“拍照月榜”中点击授权
  • 在数据库user集合中,为自己添加字段manager类型number,值为99
期望:关于页出现管理后台的各个按钮,则说明赋予成功。
PS:此后,人员权限管理可在小程序端(由拥有99权限的用户)操作,给其他授权过的用户添加管理员权限。

修改校区信息

在本项目中,猫猫所在的地理位置的层级为:校区->小区域,例如“新校区->图书馆”。
  • 在数据库setting集合中,修改filter项中的campus字段为你的校区名列表
  • 在小程序端,“区域、花色管理”中添加各个校区的小区域的名称
期望:点击首页搜索栏旁边的过滤器按钮,校区及区域信息正确显示,则说明修改成功。
PS:在有猫猫档案的情况下,不建议进行删除校区操作。如确实需要执行该操作,记得更新该校区下的所有猫猫的地理位置信息,否则将无法通过校区检索到这些猫猫。

添加第一只猫

  • 在小程序端,“添加新猫”中创建第一份猫猫档案
  • 在开发工具中点击预览,使用手机完成第一张照片上传的操作
  • 在小程序端,体验“照片审核”、“照片处理”的管理操作
期望:首页刷新后,出现新猫猫及其照片,则说明添加成功。
PS:照片审核时,精选照片将出现在猫猫详情的顶栏,且会随机成为首页的猫猫大图。单纯的通过只会加入猫猫相册。删除操作将无法恢复。
PPS:照片处理是利用小程序端canvas绘图能力给照片加水印、制作缩略图,有利于节省流量。现已用imProcess云函数实现自动化操作。
PPPS:非常不建议进行猫猫删除操作,这可能会导致猫猫ID错乱等一系列后果。在有需要删除一只猫的时候,可以考虑将该猫修改名称,用作下一只猫猫的档案。

替换通知模板(在首次发布后才能操作)

  • 参考initDatabase/消息模板.png申请多个消息模板
  • 替换miniprogram/config.js中的模板ID及字段名,例如thing5time2
期望:照片审核、回复反馈等操作后,已订阅消息的用户收到相应微信通知,则说明替换成功。
PS:提醒审核通知的订阅方式,是点击照片审核页面的“刷新状态”

个性化修改

notion image
notion image
notion image
替换文字、主题色、图标,即可获得一份全新的、独一无二的猫猫小程序。

文本方面

页面上大多数文本都整理在miniprogram/config.js文件中,修改即可全局生效。在miniprogram/app.json中,也有一些小程序配置文本。
除此之外,也可以使用开发者工具的全局文本搜索&替换功能,找到其他你想替换的文字。
notion image

样式方面

在代码文件miniprogram/app.wxss中定义了一些颜色变量,修改它们将会影响全局CSS颜色。其中主题色的HEX值为#ffd101,在miniprogram/app.json中也有使用,需要一并修改。

静态图标方面

限于技术水平,一些静态资源中的主题色无法使用代码修改。需要在miniprogram/images中进行图片替换,只需注意不要弄错文件名。
已经上传到云开发存储中的图片,可以用同样名称的文件进行覆盖。此操作会实时线上生效,不需要重新审核发布。

提交审核前的最终准备

为顺利通过平台审核,请最终确定以下几个事项:
  • 确定整个项目都已修改完毕,不存在任何页面报错
  • 已创建数只猫猫档案,且有一些照片
此后就是上传、提交审核、祈祷、发布正式版等一系列操作。正式版上线后,请检查每只猫猫的菊花码是否能顺利生成。

审核须知

  1. 当修改了miniprogram文件夹下的任何内容,都需要发起审核,重新发布才能对线上版本生效
  1. 而如果修改的是cloudfunctions中的内容,则需要重新部署该云函数,不需要审核发布
  1. 如果修改的是“云开发”中的数据库或存储,则会实时对所有版本生效,不需要审核发布

设置项说明

notion image
在数据库的setting表中,控制着一部分页面表现,可以随时修改并在小程序端展现。

pages

主要设置各个页面的元素展示。

filter

主要用于猫猫信息修改,及首页过滤器。

friendLink

用于设置友情链接,请参考样例进行添加。

subscribeMsg

用于管理员订阅的数量设置。

管理员手册

notion image
管理员使用时,请参考此共享文档:【猫谱-管理员手册】https://docs.qq.com/doc/DSEl0aENOSEx5cmtE ,可以发给其他管理员查阅。

开发团队

notion image
本项目的开发工作100%用爱发电
notion image
,特别感谢每一位为此付出的小伙伴。
notion image
代码开发:渔政、XD、zJ
notion image
UI设计:蓝卷、zJ
notion image
资料整理:笃行志愿服务队及各校区小伙伴
如果你有新的想法或建议,非常欢迎你在issue板块发起讨论或者提交代码PR。

开源协议

notion image
本项目遵循MPL-2.0开源协议。在此基础上,如果你发布了一份新的猫谱,我们希望你能保留中大猫谱的友情链接。待你的线上版本稳定使用一段时间后,请留言告诉我们将你的友链加到中大猫谱小程序中。