微信小程序找?guī)ㄐ∶鲙阏規(guī)?/h2>

1 需求梳理

1.1 前言

v1.0雖然已經(jīng)滿(mǎn)足實(shí)際需求，但是在ios和android兩個(gè)平臺(tái)顯示的效果還是不盡相同，特別是地圖上面路徑規(guī)劃功能。為此V2.0主要使用小程序自帶的地圖組件功能完善周?chē)鷰鳇c(diǎn)功能、點(diǎn)擊marker功能、詳細(xì)文字描述路徑規(guī)劃功能、以及小程序作者詳細(xì)介紹

1.2 功能需求

V1.0 版本

•  打開(kāi)直接定位
•  廁所信息已列表方式進(jìn)行展示，按當(dāng)前定位點(diǎn)最近進(jìn)行排序
•  默認(rèn)顯示1000內(nèi)最多是個(gè)公共廁所
•  列表顯示廁所名稱(chēng)、位置信息和步行距離
•  列表頁(yè)面具有刷新功能，以避免網(wǎng)絡(luò)延遲，獲取不到數(shù)據(jù)
•  顯示列表進(jìn)行點(diǎn)直接打開(kāi)微信自帶地圖，可以根據(jù)選擇是否顯示路線(xiàn)和打開(kāi)本地地圖APP進(jìn)行導(dǎo)航

V2.0 版本

•  可以在地圖上面展示所有廁所的位置，并且標(biāo)記
•  直接在小程序端進(jìn)行路徑規(guī)劃，ios和android一樣
•  默認(rèn)選擇步行方式
•  制作關(guān)于界面

├── images                              //項(xiàng)目用到的圖片資源                                   
├── pages                               //頁(yè)面結(jié)構(gòu)
│   ├── index                           //主頁(yè)面結(jié)構(gòu) 顯示列表信息
│   │   ├── index.js                    
│   │   ├── index.json                            
│   │   ├── index.wxml                          
│   │   └── index.wxss    
│   ├── location                        //信息在地圖上撒點(diǎn)      
│   │   ├── location.js                              
│   │   ├── location.json                            
│   │   ├── location.wxml                          
│   │   └── location.wxss 
│   ├── location-detail                 //詳細(xì)的文字路徑描述
│   │   ├── location.js                              
│   │   ├── location.json                            
│   │   ├── location.wxml                          
│   │   └── location.wxss  
│   ├── author                           //小程序關(guān)于界面
│   │   ├── author.js                              
│   │   ├── author.json                            
│   │   ├── author.wxml                          
│   │   └── author.wxss                          
├── readme                              //編寫(xiě)readme需要的相關(guān)資源圖片          
├── resource                            //第三方資源包
│   ├── lib        
│   ├── map                              
├── utils                               //工具類(lèi)方法       
├── app.js                              
├── app.json     
├── app.wxss     
├── README.md                              

5 開(kāi)發(fā)階段

邏輯不是很難(參看源碼即可)，只需要考慮到?jīng)]有權(quán)限、沒(méi)有網(wǎng)絡(luò)和沒(méi)有數(shù)據(jù)的頁(yè)面顯示情況的特殊處理。這里需要提醒的是，數(shù)據(jù)來(lái)源是騰訊提供的周?chē)阉?，所以需要?strong style="box-sizing: inherit;">小程序中綁定請(qǐng)求的url，然后在編輯器項(xiàng)目選項(xiàng)配置中刷新按鈕，調(diào)試才會(huì)正常請(qǐng)求。如果自己開(kāi)發(fā)接口進(jìn)行訪(fǎng)問(wèn)，一定要是https協(xié)議。

6 預(yù)覽、上傳、審核

在編輯器左邊的項(xiàng)目按鈕，可以對(duì)正在開(kāi)發(fā)的項(xiàng)目進(jìn)行預(yù)覽，這樣就可以邊開(kāi)發(fā)邊調(diào)試。

之后開(kāi)發(fā)完成可以進(jìn)行上傳，在小程序開(kāi)發(fā)管理界面可以選擇剛提交上來(lái)的項(xiàng)目作為體驗(yàn)版本，先讓周?chē)呐笥堰M(jìn)體驗(yàn)下測(cè)試。注意，選了體驗(yàn)版本之后還需要在用戶(hù)身份界面綁定體驗(yàn)者(可以綁定十個(gè)體驗(yàn)者)。如果在體驗(yàn)的過(guò)程發(fā)現(xiàn)bug，還可以進(jìn)行修改，畢竟還沒(méi)有上線(xiàn)。

7 發(fā)布

經(jīng)過(guò)體驗(yàn)之后，發(fā)現(xiàn)bug可以進(jìn)行修改反復(fù)步驟，待問(wèn)題全部解決，最后就可以上線(xiàn)了。點(diǎn)擊按鈕可以進(jìn)行審核(我這個(gè)需要了兩天)，通過(guò)之后你綁定的微信為推送消息提醒你，審核通過(guò)不代表就發(fā)布了，需要自己登陸管理平臺(tái)，手動(dòng)將審核通過(guò)小程序進(jìn)行發(fā)布。發(fā)布之后由于網(wǎng)絡(luò)原因，可能會(huì)出現(xiàn)一定的延遲，在小程序中搜索不到發(fā)布的信息，耐心等待，過(guò)一會(huì)就好了。

8 總結(jié)

總的來(lái)說(shuō)，開(kāi)發(fā)不難，特別是對(duì)于已經(jīng)熟悉react、vue、angular的語(yǔ)法同學(xué)們。在開(kāi)發(fā)之前先把官網(wǎng)的介紹看看，開(kāi)發(fā)文檔過(guò)一遍，大致有個(gè)印象。然后在網(wǎng)上找找與小程序相關(guān)的ui框架，結(jié)合使用，讓后看看騰訊或者高德關(guān)于小程序的地圖API文檔。

現(xiàn)在的功能是有點(diǎn)簡(jiǎn)單，但是已經(jīng)夠滿(mǎn)足實(shí)際使用，后續(xù)有空也將會(huì)進(jìn)行功能完善。