mpvue小程序《校友来了》成长记 | 给2018画下圆满句号

1、前言

很久没有进行更新文章了,2018已经结束,2019已经开启,为了给2018画下圆满的句号,决定在新年来临前写一篇总结。如果有看过我文章的朋友或许知道还有一个小程序《校友足迹》,而《校友来了》正是《校友足迹》的升级版,我在原有的基础上添加了校友圈子功能,通过《校友来了》不仅能看到校友的分布情况,同时还可以与同城校友交流,查看校友名片等。让《校友来了》不仅仅是一个工具,更是一个同城校友发现与交流的圈子。

初心

《校友来了》旨在帮助更多同城校友交流,在这里你能发现新的机会、新的朋友、甚至可以帮你找到你的另一半!《校友来了》更是一个帮你拓展社交圈的好工具,在家靠父母,出门靠朋友,朋友又是同校校友,你在这个城市就会多一份异乡的温暖。

体验

image

2、校友足迹1.0

关于《校友足迹》1.0可以查看我以前的另一篇文章

mpvue小程序《校友足迹》成长记(一)

3、升级原因

《校友足迹》发布一段时候后,一直有计划想要升级一些新的功能,让其不再那么单一,但是由于工作上比较忙的原因,一直搁置了下来。直到有一次,有一位在公众号看了我文章的朋友,留言说想要聊一下我的《校友足迹》,他给了我重新升级《校友足迹》的想法。刚好这段时间工作上也不是很忙,那就利用业余时间说干就干,一口气升级一下。

4、新增功能

4.1 校友圈子

校友圈子是这次最大的升级,基于《校友足迹》的思考,同城校友圈是我最想做的功能,先把全国校友按照省市划分,再根据学校划分,每个城市的校友都是不同的圈子。只有同城校友才能看到自己发的话题,这样也符合圈子的定义,既然是圈子就不能太大,要细化一些。同时在顶部Banner部分也做了公有与私有化划分,根据院校与城市会显示不同的轮播图。这也是为了帮助各大高校做宣传使用,因为在举行校友聚会的时候并不是所有的校友都能看到消息,更有一些老校友断了联系,通过这个宣传入口可以让更多的同城校友看到消息。

image

4.2、校友名片

校友名片可以通过点击昵称或者头像查看,此页面展示了同城校友的基本信息。由于小程序没有开放直接添加微信好友的接口,所以这里需要校友完善自己的个人信息后,通过点击复制的方式回到微信界面添加。虽然在操作方式上较为繁杂,但目前只能采用此方式。不过手机号是可以直接保存到通讯录中


image

4.3 个人中心

个人中心这里主要就是个人信息的基本展示与修改,同时还有自己发布过的话题,与话题相关的评论和点赞消息通知。由于话题功能需要用户基本信息才可,所以这里需要授权得到您的昵称和头像信息,不用担心隐私问题,因为小程序的这个授权也只是基本的头像和昵称,并没有隐私信息。

image

image

4.4 消息中心

消息中心主要分为个人消息与系统公告通知,个人消息可以接收到自己发布话题的点赞与评论消息。

image

4.5 校友足迹页升级改版

原有足迹页面比较单一乏味,新版在经过无数次的设计改版后,提升了整体逼格(O(∩_∩)O哈哈~),在分享出去后也是逼格满满,目前只显示排名前三的城市。下载按钮可以生成此页面的图片,方便你分享到朋友圈,聊聊则是直接通往校友圈子的入口。


image
image

关于技术

做的时候远比初想的难,从mysql数据库表的设计,到node,express业务逻辑的拆分和数据的封装与接口统一,一直到mpvue前端页面展示,以及mysql数据库查询优化,redis缓存的使用,还有JWT接口权限的验证,还有小程序的采坑,更有界面设计的优化,在这段时间里都一一经历了。学了不少新的东西,也回顾了以前的不少知识,算是一个伪node全栈的项目了,关于技术的详解我会另开一篇文章进行详细介绍,不仅作为一个分享交流,也作为这个项目的技术总结。如果有兴趣的话可以持续关注一下,在这里先放一下张目录结构

前端

mpvue + flyio + vuex + stylus + echarts
image
  • mpvue mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
  • vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  • flyio 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
  • mpvue-echarts ECharts 的 Mpvue 小程序版本。开发者可以通过熟悉的 ECharts 配置方式及 Vue 语法,快速开发图表,满足各种可视化需求。
  • stylus CSS 的预处理框架,stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套骚操作之后,这个文件可编译成 CSS 文件

后端服务

mysql + redis + node (express + superagent + jsonwebtoken +crypto + ioredis + mysql + pm2)
image
  • mysql 系型数据库管理系统
  • redis Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets)等类型。
  • express Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
  • superagent superagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下.
  • jsonwebtoken JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案
  • crypto crypto模块的目的是为了提供通用的加密和哈希算法。用纯JavaScript代码实现这些功能不是不可能,但速度会非常慢。Nodejs用C/C++实现这些算法后,通过cypto这个模块暴露为JavaScript接口,这样用起来方便,运行速度也快。在这里用做微信小程序加密解密
  • ioredis ioredis是一个功能强大,功能齐全的Redis客户端
  • mysql mysql的node.js驱动程序
  • pm2 PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单

最后

如果你对本小程序感兴趣的话可以分享到朋友圈,让更多的校友了解到《校友来了》,让同城校友的圈子越来越壮大。同时如果你有更好的想法或者idea,欢迎下方留言交流,如果你的院校有校友会相关的宣传需求,也欢迎联系我,我将免费为贵校提供宣传。

你可能感兴趣的:(mpvue小程序《校友来了》成长记 | 给2018画下圆满句号)