好久沒(méi)有更新文章了，最近又開(kāi)發(fā)了一款地圖應(yīng)用的微信小程序--快標(biāo)記歇父，本文主要介紹在全棧開(kāi)發(fā)過(guò)程中遇到坑蒂培。
本文結(jié)構(gòu)：
1、需求分析庶骄；
2毁渗、技術(shù)架構(gòu)践磅；
3单刁、開(kāi)發(fā)思路；
4府适、經(jīng)驗(yàn)總結(jié)羔飞。
1、需求分析
需求很簡(jiǎn)單檐春，使用場(chǎng)景就是：用戶(hù)可以在手機(jī)上添加標(biāo)記點(diǎn)逻淌，并可以填寫(xiě)標(biāo)記點(diǎn)的簡(jiǎn)介、說(shuō)明疟暖、圖標(biāo)卡儒、聯(lián)系方式田柔，也可以給標(biāo)記點(diǎn)分組，然后將標(biāo)記點(diǎn)或者分組分享給好友骨望，好友點(diǎn)擊分享后的鏈接就可以看到分享的標(biāo)記點(diǎn)或者分組中標(biāo)記點(diǎn)硬爆，點(diǎn)擊標(biāo)記點(diǎn)可以查看詳情，導(dǎo)航到標(biāo)記點(diǎn)擎鸠，給標(biāo)記點(diǎn)打電話(huà)缀磕。考慮到添加標(biāo)記的便利性劣光，增加了單擊地圖即可添加標(biāo)記袜蚕，也可以通過(guò)語(yǔ)音搜索來(lái)添加地點(diǎn)。普通用戶(hù)限制三個(gè)分組绢涡，會(huì)員可以不限標(biāo)記分組數(shù)牲剃。
2、技術(shù)架構(gòu)
整個(gè)軟件由我一個(gè)人全棧開(kāi)發(fā)雄可，考慮到分享的便利性颠黎，選擇了微信小程序作為載體，后端接口采用springboot開(kāi)發(fā)滞项，接口驗(yàn)證采用jwt狭归，權(quán)限控制采用shiro，采用docker部署以保障服務(wù)可用性文判，微信小程序采用原生的JavaScript过椎，考慮到界面的美觀(guān)，UI框架采用ColorUI快速搭建界面戏仓。
3疚宇、開(kāi)發(fā)思路
1）用戶(hù)打開(kāi)小程序調(diào)用登錄接口，返回會(huì)員信息并保存到本地赏殃；
2）加載地圖組件敷待，添加標(biāo)記組，判斷用戶(hù)是否會(huì)員來(lái)判斷是否限制標(biāo)記組數(shù)仁热。
3）選擇標(biāo)記組榜揖，用戶(hù)點(diǎn)擊地圖獲取經(jīng)緯度、地址信息并保存到服務(wù)器抗蠢，跳轉(zhuǎn)到編輯界面編輯標(biāo)記點(diǎn)信息举哟。
4）用戶(hù)可以直接分享標(biāo)記組或者分享標(biāo)記點(diǎn)，跳轉(zhuǎn)到分享設(shè)置界面迅矛，調(diào)用微信分享api妨猩，帶上標(biāo)記點(diǎn)或者標(biāo)記組信息標(biāo)志。
5）被分享用戶(hù)點(diǎn)擊鏈接打開(kāi)小程序秽褒，獲取標(biāo)記點(diǎn)或者標(biāo)記組信息壶硅，根據(jù)設(shè)置的權(quán)限信息來(lái)控制顯示內(nèi)容威兜。
4、踩坑總結(jié)
1）切換分組后庐椒，地圖還殘留上一個(gè)分組的標(biāo)記點(diǎn)信息牡属，而且還不能點(diǎn)擊，查閱了文檔后發(fā)現(xiàn)原來(lái)是標(biāo)記點(diǎn)的ID要設(shè)置成上一個(gè)標(biāo)記點(diǎn)的ID扼睬，不能設(shè)置成數(shù)據(jù)庫(kù)中的ID逮栅，比如下圖中的ID：
當(dāng)然，還有一位一個(gè)解決辦法：重新加載頁(yè)面即可窗宇，會(huì)稍微影響用戶(hù)體驗(yàn)措伐，具體代碼如下：
wx.reLaunch({??????url:?'/pages/index/index'? })
另外在基礎(chǔ)庫(kù) 2.13.0 開(kāi)始也可以調(diào)用MapContext.removeMarkers方法來(lái)更新標(biāo)記點(diǎn)。
2）军俊、修改完標(biāo)記點(diǎn)信息后侥加，回到首頁(yè)如何刷新標(biāo)記點(diǎn)信息？
當(dāng)然可以每次在頁(yè)面onshow的方法中重新調(diào)用接口刷新粪躬，但是這個(gè)方法會(huì)影響服務(wù)器性能担败，我的做法是在點(diǎn)擊編輯按鈕的時(shí)候，把點(diǎn)位信息存一份到緩存镰官，編輯完后直接更新緩存提前，添加完標(biāo)記點(diǎn)也需要更新緩存，下次刷新就直接從緩存拿泳唠。
3）狈网、iOS端不支持購(gòu)買(mǎi)會(huì)員，如何解決笨腥？
這個(gè)確實(shí)是個(gè)硬傷拓哺，沒(méi)有好的解決辦法，要么提供線(xiàn)下服務(wù)脖母，要么提供實(shí)物士鸥，兩者都沒(méi)有咋弄？我的解決辦法是聯(lián)系客服手動(dòng)設(shè)置為會(huì)員谆级。
