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

14次阅读

共计 2820 个字符,预计需要花费 8 分钟才能阅读完成。

1、前言
很久没有进行更新文章了,2018 已经结束,2019 已经开启,为了给 2018 画下圆满的句号,决定在新年来临前写一篇总结。如果有看过我文章的朋友或许知道还有一个小程序《校友足迹》,而《校友来了》正是《校友足迹》的升级版,我在原有的基础上添加了校友圈子功能,通过《校友来了》不仅能看到校友的分布情况,同时还可以与同城校友交流,查看校友名片等。让《校友来了》不仅仅是一个工具,更是一个同城校友发现与交流的圈子。
初心
《校友来了》旨在帮助更多同城校友交流,在这里你能发现新的机会、新的朋友、甚至可以帮你找到你的另一半!《校友来了》更是一个帮你拓展社交圈的好工具,在家靠父母,出门靠朋友,朋友又是同校校友,你在这个城市就会多一份异乡的温暖。
体验

2、校友足迹 1.0
关于《校友足迹》1.0 可以查看我以前的另一篇文章
mpvue 小程序《校友足迹》成长记(一)
3、升级原因
《校友足迹》发布一段时候后,一直有计划想要升级一些新的功能,让其不再那么单一,但是由于工作上比较忙的原因,一直搁置了下来。直到有一次,有一位在公众号看了我文章的朋友,留言说想要聊一下我的《校友足迹》,他给了我重新升级《校友足迹》的想法。刚好这段时间工作上也不是很忙,那就利用业余时间说干就干,一口气升级一下。
4、新增功能
4.1 校友圈子
校友圈子是这次最大的升级,基于《校友足迹》的思考,同城校友圈是我最想做的功能,先把全国校友按照省市划分,再根据学校划分,每个城市的校友都是不同的圈子。只有同城校友才能看到自己发的话题,这样也符合圈子的定义,既然是圈子就不能太大,要细化一些。同时在顶部 Banner 部分也做了公有与私有化划分,根据院校与城市会显示不同的轮播图。这也是为了帮助各大高校做宣传使用,因为在举行校友聚会的时候并不是所有的校友都能看到消息,更有一些老校友断了联系,通过这个宣传入口可以让更多的同城校友看到消息。

4.2、校友名片
校友名片可以通过点击昵称或者头像查看,此页面展示了同城校友的基本信息。由于小程序没有开放直接添加微信好友的接口,所以这里需要校友完善自己的个人信息后,通过点击复制的方式回到微信界面添加。虽然在操作方式上较为繁杂,但目前只能采用此方式。不过手机号是可以直接保存到通讯录中
4.3 个人中心
个人中心这里主要就是个人信息的基本展示与修改,同时还有自己发布过的话题,与话题相关的评论和点赞消息通知。由于话题功能需要用户基本信息才可,所以这里需要授权得到您的昵称和头像信息,不用担心隐私问题,因为小程序的这个授权也只是基本的头像和昵称,并没有隐私信息。

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

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

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

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)

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,欢迎下方留言交流,如果你的院校有校友会相关的宣传需求,也欢迎联系我,我将免费为贵校提供宣传。

正文完
 0