先不(bu)廢話，直接掃描(miao)體(ti)驗

預覽

1 需求梳理

1.1 前言

在(zai)去年(nian)的(de)(de)時候、已經使用(yong)react-native開(kai)發(fa)過找(zhao)廁所APP //github.com/liumingmusic/react-native-full-example，在(zai)這(zhe)里也要感謝vczero的(de)(de)react-native相(xiang)關課(ke)程(cheng)和書籍的(de)(de)支持，才完成APP開(kai)發(fa)。今天年(nian)初微信發(fa)布了(le)小程(cheng)序(xu)，以(yi)簡約方便體驗(yan)走進(jin)了(le)人們的(de)(de)視(shi)線，作為一(yi)款(kuan)功(gong)(gong)能簡單(dan)，使用(yong)頻率低的(de)(de)APP是一(yi)種(zhong)很(hen)大的(de)(de)沖擊，雖然現在(zai)小程(cheng)序(xu)以(yi)功(gong)(gong)能的(de)(de)不(bu)健全(quan)，不(bu)像剛(gang)剛(gang)發(fa)布時那么火，但是它的(de)(de)無需(xu)下載(zai)、無需(xu)安裝，體驗(yan)方便也是一(yi)種(zhong)優勢，所以(yi)對于之前開(kai)發(fa)的(de)(de)找(zhao)廁所APP，打(da)算開(kai)發(fa)出一(yi)款(kuan)對應功(gong)(gong)能的(de)(de)小程(cheng)序(xu)，方便以(yi)后生活使用(yong)。

1.2 功能需求

V1.0 版本(ben)

•  打開直接定位
•  廁所信息已列表方式進行展示，按當前定位點最近進行排序
•  默認顯示1000內最多是個公共廁所
•  列表顯示廁所名稱、位置信息和步行距離
•  列表頁面具有刷新功能，以避免網絡延遲，獲取不到數據
•  顯示列表進行點直接打開微信自帶地圖，可以根據選擇是否顯示路線和打開本地地圖APP進行導航

V2.0 版(ban)本

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

2 設計階段

3 開發前環境搭建

3.1 小程序編輯器下載

工欲善其事必先利其器，首先肯定是下載小程序開發的編輯器，安裝完成，最后在微信公眾平臺注冊開發的小程序，獲取相關的keyId(如果沒有，開發時有些功能無法使用)。最后建議，把小(xiao)程(cheng)序(xu)的文檔(dang)說明看(kan)一遍，大致有個印(yin)象，如果你本(ben)來就(jiu)學過react、vue等(deng)相關(guan)mvvm前端框架，那么學起來更快。

3.2 創建項目、快速開發

打開開發工具，填寫相關的信息，建議勾選上quick start，他將會生成基本的頁面模板。

之后創建項目，就會生成基本的頁面模板

4 項目結構組織

├── images                              //項目用到的圖片資源                                   
├── pages                               //頁面結構
│   ├── index                           //主頁面結構 顯示列表信息
│   │   ├── index.js                    
│   │   ├── index.json                            
│   │   ├── index.wxml                          
│   │   └── index.wxss    
│   ├── location                        //信息在地圖上撒點      
│   │   ├── location.js                              
│   │   ├── location.json                            
│   │   ├── location.wxml                          
│   │   └── location.wxss 
│   ├── about                           //小程序關于界面
│   │   ├── about.js                              
│   │   ├── about.json                            
│   │   ├── about.wxml                          
│   │   └── about.wxss                          
├── readme                              //編寫readme需要的相關資源圖片          
├── resource                            //第三方資源包
│   ├── lib        
│   ├── map                              
├── utils                               //工具類方法       
├── app.js                              
├── app.json     
├── app.wxss     
├── README.md                              

5 開發階段

邏輯不是很難(參看源碼即可)，只需要考慮到沒有權限、沒有網絡和沒有數據的頁面顯示情況的特殊處理。這里需要提醒的是，數據來源是騰訊提供的周圍搜索，所以需要在小程序中綁(bang)定(ding)請(qing)求的url，然后在編輯器項目選項配置中刷新按鈕，調試才會正常請求。如果自己開發接口進行訪問，一定要是https協議。

6 預覽、上傳、審核

在(zai)編輯器左邊的(de)(de)項目(mu)按鈕(niu)，可以對正(zheng)在(zai)開(kai)發(fa)的(de)(de)項目(mu)進(jin)行預覽，這樣就可以邊開(kai)發(fa)邊調試。

之(zhi)后(hou)開發(fa)完成可以進(jin)(jin)(jin)行(xing)(xing)上傳，在小程序開發(fa)管(guan)理界(jie)面可以選擇剛提(ti)交上來的(de)項(xiang)目(mu)作為體(ti)(ti)驗(yan)(yan)版本(ben)，先讓周圍(wei)的(de)朋友進(jin)(jin)(jin)體(ti)(ti)驗(yan)(yan)下(xia)測試。注(zhu)意，選了(le)體(ti)(ti)驗(yan)(yan)版本(ben)之(zhi)后(hou)還需要在用戶身(shen)份界(jie)面綁定(ding)體(ti)(ti)驗(yan)(yan)者(zhe)(可以綁定(ding)十個(ge)體(ti)(ti)驗(yan)(yan)者(zhe))。如果在體(ti)(ti)驗(yan)(yan)的(de)過(guo)程發(fa)現bug，還可以進(jin)(jin)(jin)行(xing)(xing)修改，畢竟(jing)還沒有上線。

7 發布

經過(guo)體驗(yan)之(zhi)后(hou)，發(fa)(fa)現(xian)bug可(ke)以(yi)進行(xing)修(xiu)改(gai)反復步驟，待問題(ti)全部解決，最后(hou)就可(ke)以(yi)上線了(le)。點(dian)擊(ji)按鈕可(ke)以(yi)進行(xing)審核(我(wo)這(zhe)個需要(yao)了(le)兩天(tian))，通(tong)(tong)過(guo)之(zhi)后(hou)你(ni)綁定的微信為推送消(xiao)息提醒你(ni)，審核通(tong)(tong)過(guo)不(bu)代表就發(fa)(fa)布了(le)，需要(yao)自己登陸管理平臺，手動(dong)將(jiang)審核通(tong)(tong)過(guo)小程序進行(xing)發(fa)(fa)布。發(fa)(fa)布之(zhi)后(hou)由于網絡原因，可(ke)能會出(chu)現(xian)一定的延(yan)遲(chi)，在小程序中搜索不(bu)到發(fa)(fa)布的信息，耐(nai)心等(deng)待，過(guo)一會就好(hao)了(le)。

8 總結

總(zong)的來(lai)說，開發不難，特(te)別是(shi)對于(yu)已經(jing)熟悉react、vue、angular的語法同(tong)學們。在開發之前先把官網(wang)的介(jie)紹(shao)看(kan)(kan)看(kan)(kan)，開發文(wen)(wen)檔(dang)過一遍，大致(zhi)有個印(yin)象(xiang)。然后在網(wang)上找(zhao)找(zhao)與小(xiao)程(cheng)序(xu)相關的ui框(kuang)架，結合使用，讓(rang)后看(kan)(kan)看(kan)(kan)騰訊或者(zhe)高(gao)德關于(yu)小(xiao)程(cheng)序(xu)的地圖API文(wen)(wen)檔(dang)。

現在的功(gong)能是有點(dian)簡單(dan)，但(dan)是已經(jing)夠滿足實際使用，后續有空也將會(hui)進(jin)行功(gong)能完(wan)善。