【云开发校园技术布道师】致新生的一个小程序

前言：

背景：去年我还是一名大一新生，获取专业在哪个校区和学校有什么社团协会之类的需要向师兄师姐询问，可不是谁都有加微信群的，也有很多人害羞不发言潜水看着活跃的人问问题，还有就是看师兄师姐整理的文档，我记得其中有一点令我迷惑的就是协会那么多，望名字也很难生义，所以我就在想有没有办法用小程序整理出这些东西，让新生更方便的获取到开学的信息，更理解各个协会和各个专业的含义呢。

应用场景：

这是一个面向学校大一新生的小程序，这个小程序主要为了帮助新生快速了解学校以及自身的专业。

痛点：更清晰的整理出学校各个专业以及各种社团以及校园小地图，小程序里也可以收集各个部门协会的招生视频，方便大二大三师兄师姐的招新，也方便大一新生更加了解学校的社团协会。

一、 总体架构

小程序由六个页面组成，分别是两个tabbar页面“我的”和“首页”，“入学”，“地图”，“专业”，“社团”这六个页面组成，小程序主要色调为黑白绿，较为简洁。该项目基于小程序云开发，引用了vant组件库，前端使用小程序支持的wxml,wxss,js，后台使用了云存储，云数据库，云函数。

二、 前端

以下为界面原型：

对这些界面的功能等方面的细节进行解析：

1. 首页

一个轮播图，四个跳转页面的按钮

关键代码：

2. 我的

此处的功能暂时不够完善，不能很好的实现登陆的效果。

关键代码：

3.入学

此页面的样式更加偏向于打开一封信的样式，内容也用了写信的格式（除日期外），主要想向新入学的新生们表示诚挚的问候。

关键代码：

4．环境

展现方式是一个地图，当点击按钮时，界面上的小图标会跑到相应的位置。

关键代码：

5.专业

此页面包含了三个方向，即“北校区”的专业，“南校区”的专业，以及“西校区”的专业，点击不同的专业按钮，会弹出相应的vant组件内Popup弹出层样式的内容，内容主要包括“校区”“学费”“主修”“学院”“专业”五块内容。

关键代码：

6.社团

页面仅展示了学校内“协会”的种类，后续会进行更新，点击相应的协会会弹出相应的vant组件内的Popup弹出层样式的内容，现在这些内容暂未更新，后续可以加上对应的协会官方公众号以及招生视频，这是小程序一个较为重要的功能之一。

关键代码：

三、 后台

1. 云函数

云函数主要调用数据库，小程序端调用数据库一次可调二十条，云函数调用数据库一次可调用一百条，而“北校区”的“专业”以及“社团”里的“协会”均超过了二十条数据，所以两者的数据都采用云函数调用数据库的方式来渲染到小程序界面。

关键代码：

2．云数据库

以下是项目中的数据表设计：

调用数据库：

3．云存储

云存储主要存放“入学”里面的两个文件，分别为“你想知道的都在这里”以及“开学小贴士”

使用文件预览功能预览云存储里的文件

关键代码：

以上就是小程序的逻辑实现。

自我总结：

小程序的功能简单，配色简约，大体框架已经写出来，后续再持续进行数据更新，以及功能完善…最后，欢迎指出我的不足之处！感谢观看！