「同学在哪儿」是一个地图小程序，可以在地图上查看班级同学的毕业去向以及地域分布，多联（蹭）系（饭）

作品简介

「同学在哪儿」是一个地图小程序，用户可以创建班级，同学通过填写自己的毕业去向，就可以加入班级，并查看其他的同学的毕业位置去向。小程序的初衷就是希望能够将同学们联系的更加紧密，等到一个陌生的城市，打开这个小程序，可以直接找到能够联（蹭）络（饭）的人。

目标用户

即将毕业、或者已经毕业的学生群体。

实现思路

产品设计

项目的灵感来源于自己的一个 idea，这是我来到初次来到杭州实习的一个感受。刚来的那几天，迫切地想知道有没有同学在杭州。因此有了这样的一个 idea。做一个分布地图，让我能直接在地图上知道大家目前所在的位置以及目前的状态，是在工作 or 在学习。

在网上查了相关信息，没有类似的产品，而知乎上有相关的提问需求，因此也坚定了我做这个产品的信念。

这是最初的一个手稿：

之后学习了 Sketch，将这个手稿用 Skech 进行完善，这是小程序的设计稿：「同学在哪儿」小程序设计稿。

这篇文章介绍了我的一个产品设计的相关理念以及思路：一个 Weekend Project 引发的产品设计思考

产品开发

小程序使用 Taro 框架，利用小程序云开发存储数据并进行前后台交互。整个开发周期约 2 周，并于 8 月中旬上线，中间经历了几次小型的迭代。

整体的构架如下图所示：

前端

小程序的前端页面使用 Taro 框架进行开发，Taro 是一个开放式跨端跨框架解决方案，使用 React 的语法，可以编译出微信、QQ 等平台的小程序。

前端最主要做的就是页面的展示、模块的拆分，项目的大致目录如下：

.
├── app.scss
├── app.tsx
├── assets
├── components
├── constants
├── index.html
├── pages
├── styles
└── utils

其中利用组件化的思想，将一些模块拆分成可复用的组件，例如小程序的弹窗、标签、按钮、提示框等等。

这里我并没有完全使用 Taro-UI，因为引入后会大大增加小程序的体积。大部分的 UI 都是纯手写，通过 SCSS 这类的预编译样式，利用变量、继承、mixin 等一些特性，我可以很方便的抽离出一套属于自己的样式。

// theme.scss
$primary-color: #2F54EB;
$hover-primary-color: #1d39c4;
$second-color: #ADC6FF;
$tag-bg-color: #D6E4FF;

$primary-text-color: #303030;
$second-text-color: #666666;
$grey: #AAAAAA;
$light-grey: #DDDDDD;

$shadow-color: rgba(0,0,0,0.08);
$radius: 12px;

// mixin.scss
@mixin flex($dir: row, $main: start, $cross: flex-start) {
  display: flex;
  flex-direction: $dir;
  justify-content: $main;
  align-items: $cross;
}

小程序的页面和组件都是函数式的，比较轻量级，通过 Taro 提供的 hooks，可以达到与原生小程序一样的生命周期。

import './index.scss'

interface IAvatarProps {
  image: string
  radius: number
  border?: number  
}

function Avatar (props: IAvatarProps) {
  const { image, radius, border} = props
  
  useDidShow(() => {
  })
  
  return (
    <View className='avatar_container'> 
    </View>
  )
}

export default Avatar

云开发

云开发其实就是一套完 Serverless 服务，来降低开发者的成本。目前云开发和小程序结合，可以简化复杂的登录授权、消息订阅、支付等能力。

「同学在哪儿」小程序的所有后台能力都是使用云开发来完成，云函数处理用户的请求逻辑、查询数据、内容合法检测等等，云存储存放用户上传的照片以及头像。

云函数中使用到了 tcb-router 这个轻量级类路由库，可以用于优化服务端函数处理逻辑。比如可以在一个云函数里面，分别对某一个数据库进行增删改查。

exports.main = async (event) => {
  const {OPENID} = cloud.getWXContext()
	const app = new TcbRouter({ event })
  const collection = 'info'
  const { info } = event
  app.use(async (ctx, next) => {
		ctx.data = {}
		await next()
  });
  // 添加一条记录
  app.router('add', async (ctx, next) => {
    const now = Date.now()
    const data = await db.collection(collection).add({
      data: {...info, openId: OPENID, createTime: now, updateTime: now}
    })
		ctx.body = { data }
  })
  // 修改个人信息
  app.router('update', async (ctx, next) => {
    const now = Date.now()
    const data = await db.collection(collection).where({
      openId: OPENID
    }).update({
      data: {
        ...info,
        updateTime: now
      }
    })
		ctx.body = { data }
  })
  // 获取个人信息
  app.router('get', async (ctx, next) => {
    const { data } = await db.collection(collection).where({
      openId: OPENID
    }).get()
		ctx.body = { data }
  })
	return app.serve()
}

功能介绍

首页

创建班级

首页可以直接创建班级，填写好相关的信息。如果取消勾选「允许被搜索」选项，用户只能通过分享进入。

信息准确无误后，跳转到创建成功的页面，这时候就可以将创建的班级分享出去。

加入班级

将班级分享到班级群，同学输入正确口令即可加入。

已加入的班级会在首页显示，长按可以退出班级。

完善信息

在加入班级前，会跳转到完善信息的页面，需要同学填好毕业去向以及联系方式，方便其他同学可以及时联系。

个人信息只能被同一班级的同学查看。如需修改信息，可在首页点击头像跳转到修改页。

查看分布地图

如果已经加入一个班级，可以在班级详情页面点击「查看分布地图」按钮，进入到地图页面。

点击具体的头像可以查看更多详细的信息，也可以一键联系对方。

作品体验二维码

视频介绍

「同学在哪儿」视频介绍

团队介绍

阿远：来自关山口男子职业技术学校，性别男，爱好音乐和足球，脑子里时不时会有些灵光一现的想法。