靈感

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

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

原型設(shè)計

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

技術(shù)選型

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

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

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

ok！技術(shù)選型完畢

項目構(gòu)建

既然原型和技術(shù)已經(jīng)選擇完畢，那就開始項目準(zhǔn)備工作；

前端目錄結(jié)構(gòu)

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

服務(wù)端目錄結(jié)構(gòu)

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

數(shù)據(jù)準(zhǔn)備

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

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

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

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

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

功能點

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

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

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

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

采坑點

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

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

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

棄用功能

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

上線版本

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

后續(xù)

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

體驗

也可在小程序搜索欄搜索---‘校友足跡’，你的使用將會給我?guī)頍o比的榮譽，期待你們的到來，謝謝