小程序開發(fā)進行的熱火朝天,自己申請小程序賬號也有一段時間了,但是一直沒有有所作為,苦于沒有一個好點子,不知道該做些什么,基本想到的都有人做了;怎么辦?!
一次校友聚會后給了我新的想法,因為大家談到了一個問題,就是怎么把一個城市的校友聚合在一起,回來后我就想到了小程序,現(xiàn)在基本每個人都會有微信,那么就用大家最常用的方式來找到校友,微信小程序即用即走,不用下載,而且受眾面很廣,很適合來聚合校友;既然想法有了,就開始實際行動吧
靈感來了就開始著手設(shè)計基本的原型,最初的功能獲取用戶位置后,用戶選擇自己的院校后,可以看到自己學(xué)校校友分布的情況,然后可以分享自己校友分布圖;最初的原型圖很粗糙,未曾美化加工,不過已經(jīng)上線的版本已經(jīng)過簡單美化,這里使用了原型工具--墨刀的(此處非廣告,純屬自己喜歡,哈哈!因為每次做原型圖都需要盡快達到自己想要的效果,所以感覺墨刀用起來很順手),這里的原型圖和線上版本會有所差別,后面會提到原因;
前端: 小程序提供了自己的視圖層描述語言,但是喜歡折騰的我卻不愿意使用,雖說學(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ù)選型完畢
既然原型和技術(shù)已經(jīng)選擇完畢,那就開始項目準(zhǔn)備工作;
由于mpvue已經(jīng)幫我們搭建了基本的目錄結(jié)構(gòu),所以無需太多的修改,需要哪些頁面只要按照規(guī)則進行添加即可;
后端服務(wù)拆分了全局配置,router,control和sql相關(guān)的配置,由于上線前需要https協(xié)議,所以這里加了一個https的配置,上線后會在nginx中進行配置;這里不做過多解釋;這里可以看到我使用了 pm2 , pm2 是node進程管理工具,可以利用它來簡化很多node應(yīng)用管理的繁瑣任務(wù),如性能監(jiān)控、自動重啟、負載均衡等,而且使用非常簡單。這里附上pm2的使用教程 blog.csdn.net/sunscheung/…
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ù)進行參考,請勿見怪!
下一篇文章我將會分享源代碼供大家參考,同時也希望大家多提提建議;
也可在小程序搜索欄搜索---‘校友足跡’,你的使用將會給我?guī)頍o比的榮譽,期待你們的到來,謝謝
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)