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

小程序体验

灵感

小程序开发进行的热火朝天,自己申请小程序账号也有一段时间了,但是一直没有有所作为,苦于没有一个好点子,不知道该做些什么,基本想到的都有人做了;怎么办?!

一次校友聚会后给了我新的想法,因为大家谈到了一个问题,就是怎么把一个城市的校友聚合在一起,回来后我就想到了小程序,现在基本每个人都会有微信,那么就用大家最常用的方式来找到校友,微信小程序即用即走,不用下载,而且受众面很广,很适合来聚合校友;既然想法有了,就开始实际行动吧

原型设计

灵感来了就开始着手设计基本的原型,最初的功能获取用户位置后,用户选择自己的院校后,可以看到自己学校校友分布的情况,然后可以分享自己校友分布图;最初的原型图很粗糙,未曾美化加工,不过已经上线的版本已经过简单美化,这里使用了原型工具--墨刀的(此处非广告,纯属自己喜欢,哈哈!因为每次做原型图都需要尽快达到自己想要的效果,所以感觉墨刀用起来很顺手),这里的原型图和线上版本会有所差别,后面会提到原因;

技术选型

前端:小程序提供了自己的视图层描述语言,但是喜欢折腾的我却不愿意使用,虽说学习起来也很快,但是由于学了后就只能用在小程序开发上,这就让我很不爽(别吐槽);既然不用原生的,那么mpvue就进入了我的眼帘,刚好有段时间没有做vue的项目了,这次刚好可以练练手,不仅可以复习一下vue的知识,而且还可以用Vue来做小程序,简直一举两得了(尽管mpvue有很多坑,但是也阻挡不了我使用的心);

服务端:前端开发选型完毕了,接下来就到服务端的选择了,java做服务明显过重,作为可以用js写服务端的node当然是我首要的选择目标了;接下来为了让自己再重新温习一下mysql的curd,当然选择mysql作为数据库存储数据了;

插件:另外需要用到图表展示,由于工作中经常使用echarts,所以首先想到的是使用它,然而刚开始并不确是否有合适的版本,但是当看到了《在 mpvue 使用 echarts 小程序组件》这篇文章下的评论区时,让我很是激动(这个作者会不会想打我,明明推荐的是echarts-for-weixin,可是我却跑到了评论区找到了mpvue-echarts),所以这里我采用 ECharts 的 Mpvue 小程序版本,感谢此插件的贡献者F-loat

ok!技术选型完毕

项目构建

既然原型和技术已经选择完毕,那就开始项目准备工作;

前端目录结构

由于mpvue已经帮我们搭建了基本的目录结构,所以无需太多的修改,需要哪些页面只要按照规则进行添加即可;

服务端目录结构

后端服务拆分了全局配置,router,control和sql相关的配置,由于上线前需要https协议,所以这里加了一个https的配置,上线后会在nginx中进行配置;这里不做过多解释;这里可以看到我使用了pm2,pm2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。这里附上pm2的使用教程https://blog.csdn.net/sunscheung/article/details/79171608

数据准备

由于这个小程序需要中国各个省份和地区,所以需要建立省份与地区的关系,并且需要易于保存,这里省份地区可以很容易在网上找到,而且小程序也提供现成的组件来进行城市地区选择;

由于是校友,那么就需要整理聚合所有院校的信息了,刚开始只找到了部分院校的数据,而且数据并不是那么全,所以很难保证数据的完整性;后来通过中华人民共和国教育部的网站,终于找到了最新的院校信息;(截至2017年5月31日,全国高等学校共计2914所,其中:普通高等学校2631所(含独立学院265所),成人高等学校283所。)后来经过其他渠道,找到了香港,台湾,澳门院校34所,所以共计2941所;

数据是找到了,但是数据清洗工作却是最为繁琐的,通过筛选和清洗后整理了如下形式,然后依据此形式导入数据库中;

既然已经分享这篇文章,那么我就奔着资源共享的原则,如果有需要这些整理好的院校数据的,可以在下方留言,我会把数据发到你的邮箱;

功能点

用户打开小程序后,获取用户的经纬度信息,并根据经纬度信息返回用户所在城市;

用户确定所在城市后,搜索院校,搜索院系支持模糊搜索功能;

院校选择完毕后,跳转此院校校友分布情况,并显示top5城市;

生成专属分享图片

分享自己校友分布情况;

提出反馈意见和建议

采坑点

弃用功能

由于在小范围测试阶段,我发现用户很少会在第一屏页面等待定位完成,而是直接下一步操作,这就导致无法存储用户的位置信息;所以后来我就直接弃用第一屏,直接在服务端处理用户的定位操作并保存,用户只需填写自己的院校即可进入查看分布情况页面;这样也简化了用户的操作步骤,同时也解决了无法保存用户位置的尴尬局面

上线版本

1、由于没有大面积用户,所以生成的图表并没有那么好看(希望掘金的朋友能够捧捧场,哈哈!后面我会把源代码进行分享的);我只做了部分假数据进行参考,请勿见怪!

分享页

后续

下一篇文章我将会分享源代码供大家参考,同时也希望大家多提提建议;

体验

也可在小程序搜索栏搜索---‘校友足迹’,你的使用将会给我带来无比的荣誉,期待你们的到来,谢谢

如果你愿意的话可以给我的git来一波star,万分感谢!

链接请点击原文

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180903A15DHX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券