中大猫谱—微信云开发小程序

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

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

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

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

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

前期准备

代码部署

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

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

导入项目

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

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

开通云开发

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

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

特殊依赖安装

(⚠️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,
  • imCompress云函数进行同样的绑定层、调整超时时间的操作

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

创建数据集合

  • 创建8个数据集合:cat, feedback, photo, photo_rank, reward, science, setting, user
  • 设置上述8个数据集合权限为自定义项:“所有用户可读、可写”,即{"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

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

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

filter

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

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

friendLink

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

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

subscribeMsg

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

设置项子设置项描述
chkFeedbackreceiverNum最多推送给几位管理员(暂未生效)
verifyPhotoreceiverNum最多推送给几位管理员
triggerNum触发推送的待审核数量
资源下载此资源仅限注册用户下载,请先
QQ客服:3311819220

原文链接:https://www.hwfans.cn/923.html,转载请注明出处。 本站解压密码默认为:www.hwfans.cn

0
封面图
没有账号? 注册  忘记密码?

社交账号快速登录