微信小程序找?guī)ㄐ∶鲙阏規(guī)?/h1>
直接掃描體驗(yàn)
預(yù)覽
1 需求梳理
1.1 前言
v1.0雖然已經(jīng)滿足實(shí)際需求，但是在ios和android兩個平臺顯示的效果還是不盡相同，特別是地圖上面路徑規(guī)劃功能。為此V2.0主要使用小程序自帶的地圖組件功能完善周圍廁所撒點(diǎn)功能、點(diǎn)擊marker功能、詳細(xì)文字描述路徑規(guī)劃功能、以及小程序作者詳細(xì)介紹關(guān)注Java項(xiàng)目分享
1.2 功能需求
V2.0 版本
可以在地圖上面展示所有廁所的位置，并且標(biāo)記
直接在小程序端進(jìn)行路徑規(guī)劃，ios和android一樣
默認(rèn)選擇步行方式
制作關(guān)于界面
V1.0 版本
打開直接定位
廁所信息已列表方式進(jìn)行展示，按當(dāng)前定位點(diǎn)最近進(jìn)行排序
默認(rèn)顯示1000內(nèi)最多是個公共廁所
列表顯示廁所名稱、位置信息和步行距離
列表頁面具有刷新功能，以避免網(wǎng)絡(luò)延遲，獲取不到數(shù)據(jù)
顯示列表進(jìn)行點(diǎn)直接打開微信自帶地圖，可以根據(jù)選擇是否顯示路線和打開本地地圖APP進(jìn)行導(dǎo)航
2 設(shè)計(jì)階段
3 開發(fā)前環(huán)境搭建
3.1 小程序編輯器下載
工欲善其事必先利其器，首先肯定是下載小程序開發(fā)的編輯器，安裝完成，最后在微信公眾平臺注冊開發(fā)的小程序，獲取相關(guān)的keyId(如果沒有，開發(fā)時有些功能無法使用)。最后建議，把小程序的文檔說明看一遍，大致有個印象，如果你本來就學(xué)過react、vue等相關(guān)mvvm前端框架，那么學(xué)起來更快。關(guān)注Java項(xiàng)目分享
3.2 創(chuàng)建項(xiàng)目、快速開發(fā)
打開開發(fā)工具，填寫相關(guān)的信息，建議勾選上quick start，他將會生成基本的頁面模板。
之后創(chuàng)建項(xiàng)目，就會生成基本的頁面模板
4 項(xiàng)目結(jié)構(gòu)組織
├── images //項(xiàng)目用到的圖片資源
├── pages //頁面結(jié)構(gòu)
│ ├── index //主頁面結(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 //編寫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ù)的頁面顯示情況的特殊處理。這里需要提醒的是，數(shù)據(jù)來源是騰訊提供的周圍搜索，所以需要在小程序中綁定請求的url，然后在編輯器項(xiàng)目選項(xiàng)配置中刷新按鈕，調(diào)試才會正常請求。如果自己開發(fā)接口進(jìn)行訪問，一定要是https協(xié)議。
6 預(yù)覽、上傳、審核
在編輯器左邊的項(xiàng)目按鈕，可以對正在開發(fā)的項(xiàng)目進(jìn)行預(yù)覽，這樣就可以邊開發(fā)邊調(diào)試。
之后開發(fā)完成可以進(jìn)行上傳，在小程序開發(fā)管理界面可以選擇剛提交上來的項(xiàng)目作為體驗(yàn)版本，先讓周圍的朋友進(jìn)體驗(yàn)下測試。注意，選了體驗(yàn)版本之后還需要在用戶身份界面綁定體驗(yàn)者(可以綁定十個體驗(yàn)者)。如果在體驗(yàn)的過程發(fā)現(xiàn)bug，還可以進(jìn)行修改，畢竟還沒有上線。關(guān)注Java項(xiàng)目分享
7 發(fā)布
經(jīng)過體驗(yàn)之后，發(fā)現(xiàn)bug可以進(jìn)行修改反復(fù)步驟，待問題全部解決，最后就可以上線了。點(diǎn)擊按鈕可以進(jìn)行審核(我這個需要了兩天)，通過之后你綁定的微信為推送消息提醒你，審核通過不代表就發(fā)布了，需要自己登陸管理平臺，手動將審核通過小程序進(jìn)行發(fā)布。發(fā)布之后由于網(wǎng)絡(luò)原因，可能會出現(xiàn)一定的延遲，在小程序中搜索不到發(fā)布的信息，耐心等待，過一會就好了。
8 總結(jié)
總的來說，開發(fā)不難，特別是對于已經(jīng)熟悉react、vue、angular的語法同學(xué)們。在開發(fā)之前先把官網(wǎng)的介紹看看，開發(fā)文檔過一遍，大致有個印象。然后在網(wǎng)上找找與小程序相關(guān)的ui框架，結(jié)合使用，讓后看看騰訊或者高德關(guān)于小程序的地圖API文檔。
現(xiàn)在的功能是有點(diǎn)簡單，但是已經(jīng)夠滿足實(shí)際使用，后續(xù)有空也將會進(jìn)行功能完善。
源碼地址
源碼地址獲?。?nbsp;
掃描下方公眾號回復(fù) 635
瀏覽
82
直接掃描體驗(yàn)
預(yù)覽
1 需求梳理
1.1 前言
v1.0雖然已經(jīng)滿足實(shí)際需求，但是在ios和android兩個平臺顯示的效果還是不盡相同，特別是地圖上面路徑規(guī)劃功能。為此V2.0主要使用小程序自帶的地圖組件功能完善周圍廁所撒點(diǎn)功能、點(diǎn)擊marker功能、詳細(xì)文字描述路徑規(guī)劃功能、以及小程序作者詳細(xì)介紹關(guān)注Java項(xiàng)目分享
1.2 功能需求
V2.0 版本
可以在地圖上面展示所有廁所的位置，并且標(biāo)記
直接在小程序端進(jìn)行路徑規(guī)劃，ios和android一樣
默認(rèn)選擇步行方式
制作關(guān)于界面
V1.0 版本
打開直接定位
廁所信息已列表方式進(jìn)行展示，按當(dāng)前定位點(diǎn)最近進(jìn)行排序
默認(rèn)顯示1000內(nèi)最多是個公共廁所
列表顯示廁所名稱、位置信息和步行距離
列表頁面具有刷新功能，以避免網(wǎng)絡(luò)延遲，獲取不到數(shù)據(jù)
顯示列表進(jìn)行點(diǎn)直接打開微信自帶地圖，可以根據(jù)選擇是否顯示路線和打開本地地圖APP進(jìn)行導(dǎo)航
2 設(shè)計(jì)階段
3 開發(fā)前環(huán)境搭建
3.1 小程序編輯器下載
工欲善其事必先利其器，首先肯定是下載小程序開發(fā)的編輯器，安裝完成，最后在微信公眾平臺注冊開發(fā)的小程序，獲取相關(guān)的keyId(如果沒有，開發(fā)時有些功能無法使用)。最后建議，把小程序的文檔說明看一遍，大致有個印象，如果你本來就學(xué)過react、vue等相關(guān)mvvm前端框架，那么學(xué)起來更快。關(guān)注Java項(xiàng)目分享
3.2 創(chuàng)建項(xiàng)目、快速開發(fā)
打開開發(fā)工具，填寫相關(guān)的信息，建議勾選上quick start，他將會生成基本的頁面模板。
之后創(chuàng)建項(xiàng)目，就會生成基本的頁面模板
4 項(xiàng)目結(jié)構(gòu)組織
├── images //項(xiàng)目用到的圖片資源
├── pages //頁面結(jié)構(gòu)
│ ├── index //主頁面結(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 //編寫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ù)的頁面顯示情況的特殊處理。這里需要提醒的是，數(shù)據(jù)來源是騰訊提供的周圍搜索，所以需要在小程序中綁定請求的url，然后在編輯器項(xiàng)目選項(xiàng)配置中刷新按鈕，調(diào)試才會正常請求。如果自己開發(fā)接口進(jìn)行訪問，一定要是https協(xié)議。
6 預(yù)覽、上傳、審核
在編輯器左邊的項(xiàng)目按鈕，可以對正在開發(fā)的項(xiàng)目進(jìn)行預(yù)覽，這樣就可以邊開發(fā)邊調(diào)試。
之后開發(fā)完成可以進(jìn)行上傳，在小程序開發(fā)管理界面可以選擇剛提交上來的項(xiàng)目作為體驗(yàn)版本，先讓周圍的朋友進(jìn)體驗(yàn)下測試。注意，選了體驗(yàn)版本之后還需要在用戶身份界面綁定體驗(yàn)者(可以綁定十個體驗(yàn)者)。如果在體驗(yàn)的過程發(fā)現(xiàn)bug，還可以進(jìn)行修改，畢竟還沒有上線。關(guān)注Java項(xiàng)目分享
7 發(fā)布
經(jīng)過體驗(yàn)之后，發(fā)現(xiàn)bug可以進(jìn)行修改反復(fù)步驟，待問題全部解決，最后就可以上線了。點(diǎn)擊按鈕可以進(jìn)行審核(我這個需要了兩天)，通過之后你綁定的微信為推送消息提醒你，審核通過不代表就發(fā)布了，需要自己登陸管理平臺，手動將審核通過小程序進(jìn)行發(fā)布。發(fā)布之后由于網(wǎng)絡(luò)原因，可能會出現(xiàn)一定的延遲，在小程序中搜索不到發(fā)布的信息，耐心等待，過一會就好了。
8 總結(jié)
總的來說，開發(fā)不難，特別是對于已經(jīng)熟悉react、vue、angular的語法同學(xué)們。在開發(fā)之前先把官網(wǎng)的介紹看看，開發(fā)文檔過一遍，大致有個印象。然后在網(wǎng)上找找與小程序相關(guān)的ui框架，結(jié)合使用，讓后看看騰訊或者高德關(guān)于小程序的地圖API文檔。
現(xiàn)在的功能是有點(diǎn)簡單，但是已經(jīng)夠滿足實(shí)際使用，后續(xù)有空也將會進(jìn)行功能完善。
源碼地址
源碼地址獲?。?nbsp;
掃描下方公眾號回復(fù) 635