小程序模板網(wǎng)

微信版小明找?guī)鵙2.0

發(fā)布時(shí)間:2017-12-12 18:20 所屬欄目:小程序開發(fā)教程

微信版小明找?guī)鵙2.0,升級(jí)為本地微信自帶的地圖路徑規(guī)劃、在地圖上顯示所有marker點(diǎn)、添加關(guān)于頁(yè)面

 
 
 

先不廢話,直接掃描體驗(yàn)

預(yù)覽

1 需求梳理

1.1 前言

在去年的時(shí)候、已經(jīng)使用react-native開發(fā)過找?guī)鵄PP https://github.com/liumingmusic/react-native-full-example,在這里也要感謝vczero的react-native相關(guān)課程和書籍的支持,才完成APP開發(fā)。今天年初微信發(fā)布了小程序,以簡(jiǎn)約方便體驗(yàn)走進(jìn)了人們的視線,作為一款功能簡(jiǎn)單,使用頻率低的APP是一種很大的沖擊,雖然現(xiàn)在小程序以功能的不健全,不像剛剛發(fā)布時(shí)那么火,但是它的無需下載、無需安裝,體驗(yàn)方便也是一種優(yōu)勢(shì),所以對(duì)于之前開發(fā)的找?guī)鵄PP,打算開發(fā)出一款對(duì)應(yīng)功能的小程序,方便以后生活使用。

1.2 功能需求

V1.0 版本

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

V2.0 版本

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

2 設(shè)計(jì)階段

3 開發(fā)前環(huán)境搭建

3.1 小程序編輯器下載

工欲善其事必先利其器,首先肯定是下載小程序開發(fā)的編輯器,安裝完成,最后在微信公眾平臺(tái)注冊(cè)開發(fā)的小程序,獲取相關(guān)的keyId(如果沒有,開發(fā)時(shí)有些功能無法使用)。最后建議,把小程序的文檔說明看一遍,大致有個(gè)印象,如果你本來就學(xué)過react、vue等相關(guān)mvvm前端框架,那么學(xué)起來更快。

3.2 創(chuàng)建項(xiàng)目、快速開發(fā)

打開開發(fā)工具,填寫相關(guān)的信息,建議勾選上quick start,他將會(huì)生成基本的頁(yè)面模板。

之后創(chuàng)建項(xiàng)目,就會(huì)生成基本的頁(yè)面模板

4 項(xiàng)目結(jié)構(gòu)組織

├── 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 
│   ├── about                           //小程序關(guān)于界面
│   │   ├── about.js                              
│   │   ├── about.json                            
│   │   ├── about.wxml                          
│   │   └── about.wxss                          
├── readme                              //編寫readme需要的相關(guān)資源圖片          
├── resource                            //第三方資源包
│   ├── lib        
│   ├── map                              
├── utils                               //工具類方法       
├── app.js                              
├── app.json     
├── app.wxss     
├── README.md                              

5 開發(fā)階段

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

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

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

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

7 發(fā)布

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

8 總結(jié)

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

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18146.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢