靈感

小程序開發進行的熱火朝天，自己申請小程序賬號也有一段時間了，但是一直沒有有所作為，苦于沒有一個好點子，不知道該做些什么，基本想到的都有人做了；怎么辦？！

一次校友聚會后給了我新的想法，因為大家談到了一個問題，就是怎么把一個城市的校友聚合在一起，回來后我就想到了小程序，現在基本每個人都會有微信，那么就用大家最常用的方式來找到校友，微信小程序即用即走，不用下載，而且受眾面很廣，很適合來聚合校友；既然想法有了，就開始實際行動吧

原型設計

靈感來了就開始著手設計基本的原型，最初的功能獲取用戶位置后，用戶選擇自己的院校后，可以看到自己學校校友分布的情況，然后可以分享自己校友分布圖；最初的原型圖很粗糙，未曾美化加工，不過已經上線的版本已經過簡單美化，這里使用了原型工具--墨刀的（此處非廣告，純屬自己喜歡，哈哈！因為每次做原型圖都需要盡快達到自己想要的效果，所以感覺墨刀用起來很順手），這里的原型圖和線上版本會有所差別，后面會提到原因；

技術選型

前端： 小程序提供了自己的視圖層描述語言，但是喜歡折騰的我卻不愿意使用，雖說學習起來也很快，但是由于學了后就只能用在小程序開發上，這就讓我很不爽（別吐槽:joy:）；既然不用原生的，那么mpvue就進入了我的眼簾，剛好有段時間沒有做vue的項目了，這次剛好可以練練手，不僅可以復習一下vue的知識，而且還可以用Vue來做小程序，簡直一舉兩得了（盡管mpvue有很多坑，但是也阻擋不了我使用的心）；

服務端： 前端開發選型完畢了，接下來就到服務端的選擇了，java做服務明顯過重，作為可以用js寫服務端的node當然是我首要的選擇目標了；接下來為了讓自己再重新溫習一下mysql的curd，當然選擇mysql作為數據庫存儲數據了；

插件： 另外需要用到圖表展示，由于工作中經常使用echarts，所以首先想到的是使用它，然而剛開始并不確是否有合適的版本，但是當看到了《在 mpvue 使用 echarts 小程序組件》這篇文章下的評論區時，讓我很是激動（這個作者會不會想打我，明明推薦的是 echarts-for-weixin ，可是我卻跑到了評論區找到了 mpvue-echarts :joy:），所以這里我采用 ECharts 的 Mpvue 小程序版本 ，感謝此插件的貢獻者F-loat

ok！技術選型完畢

項目構建

既然原型和技術已經選擇完畢，那就開始項目準備工作；

前端目錄結構

由于mpvue已經幫我們搭建了基本的目錄結構，所以無需太多的修改，需要哪些頁面只要按照規則進行添加即可；

服務端目錄結構

后端服務拆分了全局配置，router，control和sql相關的配置，由于上線前需要https協議，所以這里加了一個https的配置，上線后會在nginx中進行配置；這里不做過多解釋；這里可以看到我使用了 pm2 ， pm2 是node進程管理工具，可以利用它來簡化很多node應用管理的繁瑣任務，如性能監控、自動重啟、負載均衡等，而且使用非常簡單。這里附上pm2的使用教程 blog.csdn.net/sunscheung/…

數據準備

1、由于這個小程序需要中國各個省份和地區，所以需要建立省份與地區的關系，并且需要易于保存，這里省份地區可以很容易在網上找到，而且小程序也提供現成的組件來進行城市地區選擇；

2、由于是校友，那么就需要整理聚合所有院校的信息了，剛開始只找到了部分院校的數據，而且數據并不是那么全，所以很難保證數據的完整性；后來通過 中華人民共和國教育部的網站 ，終于找到了最新的院校信息；

（截至2017年5月31日，全國高等學校共計2914所，其中：普通高等學校2631所（含獨立學院265所），成人高等學校283所。）后來經過其他渠道，找到了香港，臺灣，**院校34所，所以共計2941所；

數據是找到了，但是數據清洗工作卻是最為繁瑣的，通過篩選和清洗后整理了如下形式，然后依據此形式導入數據庫中；

既然已經分享這篇文章，那么我就奔著資源共享的原則，如果有需要這些整理好的院校數據的，可以在下方留言，我會把數據發到你的郵箱；

功能點

1、用戶打開小程序后，獲取用戶的經緯度信息，并根據經緯度信息返回用戶所在城市；

2、用戶確定所在城市后，搜索院校，搜索院系支持模糊搜索功能；

3、院校選擇完畢后，跳轉此院校校友分布情況，并顯示top5城市；

4、分享自己校友分布情況；

采坑點

1、由于線上小程序不允許調用授權域名以外的接口，所以需要在服務端實現調用騰訊位置服務api接口，來實現返回用戶位置信息；

2、由于目前wx.getUserInfo() 接口有調整，使用該接口將不再出現授權彈窗，請使用 <button open-type="getUserInfo"></button> 引導用戶主動進行授權操作，所以現在獲取用戶基本信息并沒有那么容易了，因此需要用戶在下一步操作時引到用戶進行授權；（這里只是獲取用戶的昵稱和頭像信息，沒有任何隱私信息）

3、由于 mpvue-echarts 還存在一些小的問題，所以當一個頁面有兩個實例的時候，我的map表就無法點擊查看當前城市的人數了；

棄用功能

1、由于在小范圍測試階段，我發現用戶很少會在第一屏頁面等待定位完成，而是直接下一步操作，這就導致無法存儲用戶的位置信息；所以后來我就直接棄用第一屏，直接在服務端處理用戶的定位操作并保存，用戶只需填寫自己的院校即可進入查看分布情況頁面；這樣也簡化了用戶的操作步驟，同時也解決了無法保存用戶位置的尷尬局面

上線版本

1、由于沒有大面積用戶，所以生成的圖表并沒有那么好看（希望掘金的朋友能夠捧捧場，哈哈！后面我會把源代碼進行分享的）；我只做了部分假數據進行參考，請勿見怪！

后續

下一篇文章我將會分享源代碼供大家參考，同時也希望大家多提提建議；

體驗

也可在小程序搜索欄搜索---‘校友足跡’，你的使用將會給我帶來無比的榮譽，期待你們的到來，謝謝