vainmusic / zhongdamaopu

中大猫谱小程序:smile_cat:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

📝中大猫谱

——拍照记录校园内猫猫的成长轨迹 🐱😺😻

主要功能:创建校园猫猫档案,为猫猫上传照片,以及照片审核,人员管理等。

简介大图

体验一下

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

中大猫谱菊花码

朋友们的小程序

华农喵星人菊花码 汇景猫党菊花码 HNU喵汪图鉴菊花码
华农喵星人 汇景猫党 HNU喵汪图鉴
财猫之家菊花码 二师猫语菊花码
财猫之家 二师猫语

如果,你所在校园(/社团/小区...)的猫猫:smile_cat:也盼望拥有一份属于自己的猫猫档案,请你跟随下一章节的指引,为它们部署、发布一份独特的猫谱小程序。

部署完成后,可以邀请你的朋友帮忙管理猫猫信息。我们为此准备了【猫谱-管理员手册】,信息管理无需接触代码。链接:https://docs.qq.com/doc/DSEl0aENOSEx5cmtE

部署过程中遇到任何问题,可以选择:

资料整理

资料名 类型 链接
部署视频 视频 https://www.bilibili.com/video/BV1zA411W7Rn/
猫谱-部署常见问题 文档 https://docs.qq.com/doc/DSGFSU25jalpEZ2FO
猫谱-管理员手册 文档 https://docs.qq.com/doc/DSEl0aENOSEx5cmtE
猫谱-升级代码 文档 https://docs.qq.com/doc/DSExBY2RsUHlOYlpj
imProcess云函数部署 视频 https://www.bilibili.com/video/BV1zA411W7Rn?p=2
imProcess云函数环境 压缩包 https://wwu.lanzoui.com/iaENswzpkeb

📜部署

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

前期准备

代码部署

我们在2021年1月录制了一份代码部署视频( https://www.bilibili.com/video/BV1zA411W7Rn/ ),希望这段视频能帮助你完成部署阶段最繁杂的部分。

以下是一些你需要完成的关键操作,如无特别说明(:warning:符号),则与视频演示一致。

导入项目

  • 在微信开发者工具中导入项目,并修改APPID

期望:开发工具中有三只跳动小猫的loading图像,则说明导入成功。

开通云开发

  • 在开发工具右上角开通云开发服务,创建云环境(相当于后端服务器)
  • (:warning:与视频演示不同)在云环境的“配额方案”中,切换成按量付费,下一步才能部署超过15个云函数
  • 点击部署cloudfunctions文件夹中的所有云函数
  • (:warning:与视频演示不同)对于countPhoto, getPhotoRank, subMsgTimer这几个云函数,还需要右键点击,选择“上传触发器”

期望:点开云开发可以看到面板数据,则说明开通成功。

特殊依赖安装

(:warning:2021/4/21新增云函数)对于 imProcess 云函数,无法云端自动安装图像处理依赖库,需要手动上传。这一步比较繁琐,可以参考演示视频的P2(特别感谢happi0同学的实践经验)。

  • 下载云函数运行环境压缩包imProcess_node_modules.zip,链接:https://wwu.lanzoui.com/iaENswzpkeb
  • 完成上一步的部署后,登录腾讯云网页端-云开发CloudBase,选择云开发环境,左侧云函数,记下imProcess函数的运行环境,例如Nodejs12.16Nodejs10.15
  • 点击上方“层管理”,新建一个层,名称和描述随便填。把刚才下载的imProcess_node_modules.zip文件上传上去,环境选刚才记下的Nodejs版本
  • 再点击左侧云函数,选择imProcess,层管理中点击“绑定”,选择刚才创建的层
  • 另外,为了避免一次处理过多图片导致程序执行超时,需要在云开发面板中依次点击“云函数-imProcess-版本与配置-配置-高级配置”,将超时时间调整为60s

期望:在腾讯云网页端中,云函数imProcess的层管理列表中,出现刚绑定上的依赖层。

创建数据集合

  • 创建9个数据集合:cat, feedback, photo, photo_rank, reward, science, setting, user, comment
  • 设置上述9个数据集合权限为自定义项:“所有用户可读、可写”,即{"read": true, "write": true}
  • 导入initDatabase/database-setting.json文件到setting数据集合
  • 导入initDatabase/database-science.json文件到science数据集合

期望:关于页出现中大猫谱的友情链接、科普的二级页面出现文字信息,则说明创建成功。

替换系统图片

  • 在云存储中创建系统文件夹,上传initDatabase/系统图片中的所有图片
  • 替换miniprogram/config.js中的图片链接为刚刚上传的文件的File ID

期望:科普页、打赏页的赞赏码、反馈页新猫问卷的图片可以显示,则说明替换成功。

赋予管理员权限

  • 在小程序端,“拍照月榜”中点击授权
  • 在数据库user集合中,为自己添加字段manager类型number,值为99

期望:关于页出现管理后台的各个按钮,则说明赋予成功。

PS:此后,人员权限管理可在小程序端(由拥有99权限的用户)操作。

修改校区信息

在本项目中,猫猫所在的地理位置的层级为:校区->小区域,例如“新校区->图书馆”。

  • 在数据库setting集合中,修改filter项中的campus字段为你的校区名列表
  • 在小程序端,“区域、花色管理”中添加各个校区的小区域的名称

期望:点击首页搜索栏旁边的过滤器按钮,校区及区域信息正确显示,则说明修改成功。

PS:在有猫猫档案的情况下,不建议进行删除校区操作。如确实需要执行该操作,记得更新该校区下的所有猫猫的地理位置信息,否则将无法通过校区检索到这些猫猫。

添加第一只猫

  • 在小程序端,“添加新猫”中创建第一份猫猫档案
  • 在开发工具中点击预览,使用手机完成第一张照片上传的操作
  • 在小程序端,体验“照片审核”、“照片处理”的管理操作

期望:首页刷新后,出现新猫猫及其照片,则说明添加成功。

PS:照片审核时,精选照片将出现在猫猫详情的顶栏,且会随机成为首页的猫猫大图。单纯的通过只会加入猫猫相册。删除操作将无法恢复。

PPS:照片处理是利用小程序端canvas绘图能力给照片加水印、制作缩略图,有利于节省流量

PPPS:非常不建议进行猫猫删除操作,这可能会导致猫猫ID错乱等一系列后果。在有需要删除一只猫的时候,可以考虑将该猫修改名称,用作下一只猫猫的档案。

替换通知模板(非必须)

  • 微信公众平台开通订阅消息服务
  • 参考initDatabase/消息模板.png申请多个消息模板
  • 替换miniprogram/msg.jscloudfunctions/sendMsg/index.js中的模板ID及字段thing的数字编号

期望:照片审核、回复反馈等操作后,已订阅消息的用户收到相应微信通知,则说明替换成功。

PS:提醒审核通知的订阅方式,是点击照片审核页面的“刷新状态”

个性化修改建议

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

文字方面

请善用开发者工具(或其他编辑器)的全局文本搜索&替换功能。

全局查找替换文本

样式方面

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

静态图标方面

限于技术水平,一些静态资源中的主题色无法使用代码修改。需要在miniprogram/images中进行图片替换,只需注意不要弄错文件名。

提交审核前的最终准备

为顺利通过平台审核,请最终确定以下几个事项:

  • 确定整个项目都已修改完毕,不存在任何页面报错
  • 已创建数只猫猫档案,且有一些照片

此后就是上传、提交审核、祈祷、发布正式版等一系列操作。正式版上线后,请检查每只猫猫的菊花码是否能顺利生成。

🎲设置项说明

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

pages

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

设置项 子设置项 描述
checkFeedback step 反馈处理页每次加载数量
detailCat albumStep 猫猫相册每次加载数量
cantUpload 关闭上传功能的版本号
galleryCompressed 相册大图是否使用压缩图
galleryPreload 相册大图预加载的数量
manageUpload 上传功能强制给管理员开启
photoStep 猫猫精选图每次加载的数量
genealogy adStep 广告出现的间隔
catsStep 首页每次加载猫猫的数量
main_lower_threshold 首页触底加载的像素值
photoPopWeight 每张猫猫照片增加的人气值

filter

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

设置项 描述
area 区域(请使用小程序端修改)
campuses 校区(谨慎修改)
colour 花色(请使用小程序端修改)

friendLink

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

设置项 描述
appid 小程序的APPID
logo 小程序的图标,可以使用云存储FileID
name 小程序的名称

subscribeMsg

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

设置项 子设置项 描述
chkFeedback receiverNum 最多推送给几位管理员(暂未生效)
verifyPhoto receiverNum 最多推送给几位管理员
triggerNum 触发推送的待审核数量

📔管理员手册

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

👯开发团队

本项目的开发工作100%用爱发电:sparkles:,特别感谢每一位为此付出的小伙伴。

💻代码开发:渔政、XD、zJ

✒️UI设计:蓝卷、zJ

📓资料整理:笃行志愿服务队及各校区小伙伴

如果你有新的想法或建议,非常欢迎你在issue板块发起讨论或者提交代码PR。

🎡开源协议

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

About

中大猫谱小程序:smile_cat:

License:Mozilla Public License 2.0


Languages

Language:JavaScript 100.0%