您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序 （小明帶你(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)檔。
現在的功能是有點簡單，但是已經夠滿足實際使用，後續有空也将會進行功能完善。
