小程式體驗
靈感
小程式開發進行的熱火朝天，自己申請小程式賬號也有一段時間了，但是一直沒有有所作為，苦於沒有一個好點子，不知道該做些什麼，基本想到的都有人做了；怎麼辦？！
一次校友聚會後給了我新的想法，因為大家談到了一個問題，就是怎麼把一個城市的校友聚合在一起，回來後我就想到了小程式，現在基本每個人都會有微信，那麼就用大家最常用的方式來找到校友，微信小程式即用即走，不用下載，而且受眾面很廣，很適合來聚合校友；既然想法有了，就開始實際行動吧
原型設計
靈感來了就開始著手設計基本的原型，最初的功能獲取使用者位置後，使用者選擇自己的院校後，可以看到自己學校校友分佈的情況，然後可以分享自己校友分佈圖；最初的原型圖很粗糙，未曾美化加工，不過已經上線的版本已經過簡單美化，這裡使用了原型工具–墨刀的（此處非廣告，純屬自己喜歡，哈哈！因為每次做原型圖都需要儘快達到自己想要的效果，所以感覺墨刀用起來很順手），這裡的原型圖和線上版本會有所差別，後面會提到原因；
技術選型
前端：小程式提供了自己的檢視層描述語言，但是喜歡折騰的我卻不願意使用，雖說學習起來也很快，但是由於學了後就只能用在小程式開發上，這就讓我很不爽（別吐槽?）；既然不用原生的，那麼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的使用教程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、由於沒有大面積使用者，所以生成的圖表並沒有那麼好看（希望掘金的朋友能夠捧捧場，哈哈！後面我會把原始碼進行分享的）；我只做了部分假資料進行參考，請勿見怪！
分享頁
後續
下一篇文章我將會分享原始碼供大家參考，同時也希望大家多提提建議；
體驗
也可在小程式搜尋欄搜尋—‘校友足跡’，你的使用將會給我帶來無比的榮譽，期待你們的到來，謝謝