微信小程序 (小明帶你(nǐ)找廁所)項目開發全過程 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序 (小明帶你(nǐ)找廁所)項目開發全過程

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:57


微信小程序找廁所(小明帶你(nǐ)找廁所)

1 需求梳理

1.1 前言

v1.0雖然已經滿足實際需求,但是在ios和(hé)android兩個(gè)平台顯示的效果還是不盡相同,特别是地圖上面路(lù)徑規劃功能。為此V2.0主要使用小程序自帶的地圖組件功能完善周圍廁所撒點功能、點擊marker功能、詳細文(wén)字描述路(lù)徑規劃功能、以及小程序作者詳細介紹

1.2 功能需求

V1.0 版本

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

V2.0 版本

  •  可(kě)以在地圖上面展示所有廁所的位置,并且标記
  •  直接在小程序端進行路(lù)徑規劃,ios和(hé)android一樣
  •  默認選擇步行方式
  •  制作關(guān)于界面

2 設計階段

設計流程圖

3 開發前環境搭建

3.1 小程序編輯器(qì)下(xià)載

工欲善其事必先利其器(qì),首先肯定是下(xià)載小程序開發的編輯器(qì),安裝完成,最後在微信公衆平台注冊開發的小程序,獲取相關(guān)的keyId(如(rú)果沒有,開發時有些功能無法使用)。最後建議,把小程序的文(wén)檔說明看一遍,大緻有個(gè)印象,如(rú)果你(nǐ)本來就學過react、vue等相關(guān)mvvm前端框架,那麼學起來更快。

3.2 創建項目、快速開發

打開開發工具,填寫相關(guān)的信息,建議勾選上quick start,他将會生成基本的頁面模闆。

之後創建項目,就會生成基本的頁面模闆

4 項目結構組織

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

5 開發階段

邏輯不是很難(參看源碼即可(kě)),隻需要考慮到沒有權限、沒有網絡和(hé)沒有數據的頁面顯示情況的特殊處理。這裡需要提醒的是,數據來源是騰訊提供的周圍搜索,所以需要在小程序中(zhōng)綁定請求的url,然後在編輯器(qì)項目選項配置中(zhōng)刷新按鈕,調試才會正常請求。如(rú)果自己開發接口進行訪問(wèn),一定要是https協議。

6 預覽、上傳、審核

在編輯器(qì)左邊的項目按鈕,可(kě)以對正在開發的項目進行預覽,這樣就可(kě)以邊開發邊調試。

之後開發完成可(kě)以進行上傳,在小程序開發管理界面可(kě)以選擇剛提交上來的項目作為體驗版本,先讓周圍的朋友進體驗下(xià)測試。注意,選了體驗版本之後還需要在用戶身份界面綁定體驗者(可(kě)以綁定十個(gè)體驗者)。如(rú)果在體驗的過程發現bug,還可(kě)以進行修改,畢竟還沒有上線。

7 發布

經過體驗之後,發現bug可(kě)以進行修改反複步驟,待問(wèn)題全部解決,最後就可(kě)以上線了。點擊按鈕可(kě)以進行審核(我這個(gè)需要了兩天),通(tōng)過之後你(nǐ)綁定的微信為推送消息提醒你(nǐ),審核通(tōng)過不代表就發布了,需要自己登陸管理平台,手動(dòng)将審核通(tōng)過小程序進行發布。發布之後由于網絡原因,可(kě)能會出現一定的延遲,在小程序中(zhōng)搜索不到發布的信息,耐心等待,過一會就好了。

8 總結

總的來說,開發不難,特别是對于已經熟悉react、vue、angular的語法同學們。在開發之前先把官網的介紹看看,開發文(wén)檔過一遍,大緻有個(gè)印象。然後在網上找找與小程序相關(guān)的ui框架,結合使用,讓後看看騰訊或者高德關(guān)于小程序的地圖API文(wén)檔。

現在的功能是有點簡單,但是已經夠滿足實際使用,後續有空也将會進行功能完善。


相關(guān)案例查看更多