小程序體驗
靈感
小程序開發進行的熱火朝天，自己申請小程序賬號也有一段時間了，但是一直沒有有所作爲，苦於沒有一個好點子，不知道該做些什麼，基本想到的都有人做了；怎麼辦？！
一次校友聚會後給了我新的想法，因爲大家談到了一個問題，就是怎麼把一個城市的校友聚合在一起，回來後我就想到了小程序，現在基本每個人都會有微信，那麼就用大家最常用的方式來找到校友，微信小程序即用即走，不用下載，而且受衆面很廣，很適合來聚合校友；既然想法有了，就開始實際行動吧
原型設計
靈感來了就開始着手設計基本的原型，最初的功能獲取用戶位置後，用戶選擇自己的院校後，可以看到自己學校校友分佈的情況，然後可以分享自己校友分佈圖；最初的原型圖很粗糙，未曾美化加工，不過已經上線的版本已經過簡單美化，這裏使用了原型工具--墨刀的（此處非廣告，純屬自己喜歡，哈哈！因爲每次做原型圖都需要儘快達到自己想要的效果，所以感覺墨刀用起來很順手），這裏的原型圖和線上版本會有所差別，後面會提到原因；
技術選型
前端：小程序提供了自己的視圖層描述語言，但是喜歡折騰的我卻不願意使用，雖說學習起來也很快，但是由於學了後就只能用在小程序開發上，這就讓我很不爽（別吐槽)既然不用原生的，那麼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城市；
- 生成專屬分享圖片
- 分享自己校友分佈情況；
- 提出反饋意見和建議
採坑點
- 由於線上小程序不允許調用授權域名以外的接口，所以需要在服務端實現調用騰訊位置服務api接口，來實現返回用戶位置信息；
- 由於目前wx.getUserInfo() 接口有調整，使用該接口將不再出現授權彈窗，請使用
<button open-type="getUserInfo"></button>引導用戶主動進行授權操作，所以現在獲取用戶基本信息並沒有那麼容易了，因此需要用戶在下一步操作時引到用戶進行授權；（這裏只是獲取用戶的暱稱和頭像信息，沒有任何隱私信息） - 由於mpvue-echarts還存在一些小的問題，所以當一個頁面有兩個實例的時候，我的map表就無法點擊查看當前城市的人數了；
棄用功能
- 由於在小範圍測試階段，我發現用戶很少會在第一屏頁面等待定位完成，而是直接下一步操作，這就導致無法存儲用戶的位置信息；所以後來我就直接棄用第一屏，直接在服務端處理用戶的定位操作並保存，用戶只需填寫自己的院校即可進入查看分佈情況頁面；這樣也簡化了用戶的操作步驟，同時也解決了無法保存用戶位置的尷尬局面
上線版本
1、由於沒有大面積用戶，所以生成的圖表並沒有那麼好看（希望掘金的朋友能夠捧捧場，哈哈！後面我會把源代碼進行分享的）；我只做了部分假數據進行參考，請勿見怪！
分享頁
後續
下一篇文章我將會分享源代碼供大家參考，同時也希望大家多提提建議；
體驗
也可在小程序搜索欄搜索---‘校友足跡’，你的使用將會給我帶來無比的榮譽，期待你們的到來，謝謝
如果你願意的話可以給我的git來一波star，萬分感謝！
傳送門