靈感

小程序開(kāi)發(fā)進(jìn)行的熱火朝天，自己申請(qǐng)小程序賬號(hào)也有一段時(shí)間了，但是一直沒(méi)有有所作為，苦于沒(méi)有一個(gè)好點(diǎn)子，不知道該做些什么，基本想到的都有人做了；怎么辦？！

一次校友聚會(huì)后給了我新的想法，因?yàn)榇蠹艺劦搅艘粋€(gè)問(wèn)題，就是怎么把一個(gè)城市的校友聚合在一起，回來(lái)后我就想到了小程序，現(xiàn)在基本每個(gè)人都會(huì)有微信，那么就用大家最常用的方式來(lái)找到校友，微信小程序即用即走，不用下載，而且受眾面很廣，很適合來(lái)聚合校友；既然想法有了，就開(kāi)始實(shí)際行動(dòng)吧

原型設(shè)計(jì)

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

技術(shù)選型

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

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

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

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

項(xiàng)目構(gòu)建

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

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

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

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

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

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

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

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

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

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

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

功能點(diǎn)

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

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

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

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

采坑點(diǎn)

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

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

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

棄用功能

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

上線版本

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

后續(xù)

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

體驗(yàn)

也可在小程序搜索欄搜索---‘校友足跡’，你的使用將會(huì)給我?guī)?lái)無(wú)比的榮譽(yù)，期待你們的到來(lái)，謝謝