源碼分享:動手制作一個找?guī)〕绦颍?/h1>
本文推薦一個簡單的小程序項目,本項目源碼可加我微信免費獲??!不會小程序開發(fā)的也可以上手,送對應小程序開發(fā)視頻教程!
直接掃描體驗【業(yè)余草】往期制作的面試題題庫小程序!

程序員題庫小程序 預覽

找?guī)〕绦?/figcaption> 
小程序 需求梳理
前言
v1.0 雖然已經(jīng)滿足實際需求,但是在 ios 和 android 兩個平臺顯示的效果還是不盡相同,特別是地圖上面路徑規(guī)劃功能。為此 V2.0 主要使用小程序自帶的地圖組件功能完善周圍廁所撒點功能、點擊 marker 功能、詳細文字描述路徑規(guī)劃功能、以及小程序詳細介紹等功能。
功能需求
V2.0 版本
可以在地圖上面展示所有廁所的位置,并且標記 直接在小程序端進行路徑規(guī)劃,ios 和 android 一樣 默認選擇步行方式 制作關(guān)于界面
V1.0 版本
打開直接定位 廁所信息已列表方式進行展示,按當前定位點最近進行排序
+?默認顯示 1000 內(nèi)最多是個公共廁所 列表顯示廁所名稱、位置信息和步行距離 列表頁面具有刷新功能,以避免網(wǎng)絡延遲,獲取不到數(shù)據(jù) 顯示列表進行點直接打開微信自帶地圖,可以根據(jù)選擇是否顯示路線和打開本地地圖 APP 進行導航
設(shè)計階段

找?guī)〕绦蛟O(shè)計邏輯 開發(fā)前環(huán)境搭建
小程序編輯器下載
工欲善其事必先利其器,首先肯定是下載小程序開發(fā)的編輯器,安裝完成,最后在微信公眾平臺注冊開發(fā)的小程序,獲取相關(guān)的 keyId(如果沒有,開發(fā)時有些功能無法使用)。最后建議,把小程序的文檔說明看一遍,大致有個印象,如果你本來就學過react、vue 等相關(guān) mvvm 前端框架,那么學起來更快。
創(chuàng)建項目、快速開發(fā)
打開開發(fā)工具,填寫相關(guān)的信息,建議勾選上 quick start,他將會生成基本的頁面模板。

小程序開發(fā)工具創(chuàng)建項目 之后創(chuàng)建項目,就會生成基本的頁面模板

小程序項目模板 目結(jié)構(gòu)組織
├── images //項目用到的圖片資源
├── pages //頁面結(jié)構(gòu)
│?? ├── index //主頁面結(jié)構(gòu) 顯示列表信息
│?? │?? ├── index.js
│?? │?? ├── index.json
│?? │?? ├── index.wxml
│?? │?? └── index.wxss
│?? ├── location //信息在地圖上撒點
│?? │?? ├── location.js
│?? │?? ├── location.json
│?? │?? ├── location.wxml
│?? │?? └── location.wxss
│?? ├── location-detail //詳細的文字路徑描述
│?? │?? ├── 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
開發(fā)階段
邏輯不是很難(參看源碼即可),只需要考慮到?jīng)]有權(quán)限、沒有網(wǎng)絡和沒有數(shù)據(jù)的頁面顯示情況的特殊處理。這里需要提醒的是,數(shù)據(jù)來源是騰訊提供的周圍搜索,所以需要在小程序中綁定請求的 url,然后在編輯器項目選項配置中刷新按鈕,調(diào)試才會正常請求。如果自己開發(fā)接口進行訪問,一定要是 https 協(xié)議。
預覽、上傳、審核
在編輯器左邊的項目按鈕,可以對正在開發(fā)的項目進行預覽,這樣就可以邊開發(fā)邊調(diào)試。

小程序發(fā)布審核 之后開發(fā)完成可以進行上傳,在小程序開發(fā)管理界面可以選擇剛提交上來的項目作為體驗版本,先讓周圍的朋友進體驗下測試。注意,選了體驗版本之后還需要在用戶身份界面綁定體驗者(可以綁定十個體驗者)。如果在體驗的過程發(fā)現(xiàn)bug,還可以進行修改,畢竟還沒有上線。
發(fā)布
經(jīng)過體驗之后,發(fā)現(xiàn) bug 可以進行修改反復步驟,待問題全部解決,最后就可以上線了。點擊按鈕可以進行審核(我這個需要了兩天),通過之后你綁定的微信為推送消息提醒你,審核通過不代表就發(fā)布了,需要自己登陸管理平臺,手動將審核通過小程序進行發(fā)布。發(fā)布之后由于網(wǎng)絡原因,可能會出現(xiàn)一定的延遲,在小程序中搜索不到發(fā)布的信息,耐心等待,過一會就好了。
總結(jié)
總的來說,開發(fā)不難,特別是對于已經(jīng)熟悉 react、vue、angular 的語法同學們。在開發(fā)之前先把官網(wǎng)的介紹看看,開發(fā)文檔過一遍,大致有個印象。然后在網(wǎng)上找找與小程序相關(guān)的 ui 框架,結(jié)合使用,讓后看看騰訊或者高德關(guān)于小程序的地圖 API 文檔。
現(xiàn)在的功能是有點簡單,但是已經(jīng)夠滿足實際使用,后續(xù)有空也將會進行功能完善。
源碼獲取
加業(yè)余草個人微信:codedq,免費獲??!
瀏覽
74
本文推薦一個簡單的小程序項目,本項目源碼可加我微信免費獲??!不會小程序開發(fā)的也可以上手,送對應小程序開發(fā)視頻教程!
直接掃描體驗【業(yè)余草】往期制作的面試題題庫小程序!

預覽


需求梳理
前言
v1.0 雖然已經(jīng)滿足實際需求,但是在 ios 和 android 兩個平臺顯示的效果還是不盡相同,特別是地圖上面路徑規(guī)劃功能。為此 V2.0 主要使用小程序自帶的地圖組件功能完善周圍廁所撒點功能、點擊 marker 功能、詳細文字描述路徑規(guī)劃功能、以及小程序詳細介紹等功能。
功能需求
V2.0 版本
可以在地圖上面展示所有廁所的位置,并且標記 直接在小程序端進行路徑規(guī)劃,ios 和 android 一樣 默認選擇步行方式 制作關(guān)于界面
V1.0 版本
打開直接定位 廁所信息已列表方式進行展示,按當前定位點最近進行排序 +?默認顯示 1000 內(nèi)最多是個公共廁所 列表顯示廁所名稱、位置信息和步行距離 列表頁面具有刷新功能,以避免網(wǎng)絡延遲,獲取不到數(shù)據(jù) 顯示列表進行點直接打開微信自帶地圖,可以根據(jù)選擇是否顯示路線和打開本地地圖 APP 進行導航
設(shè)計階段

開發(fā)前環(huán)境搭建
小程序編輯器下載
工欲善其事必先利其器,首先肯定是下載小程序開發(fā)的編輯器,安裝完成,最后在微信公眾平臺注冊開發(fā)的小程序,獲取相關(guān)的 keyId(如果沒有,開發(fā)時有些功能無法使用)。最后建議,把小程序的文檔說明看一遍,大致有個印象,如果你本來就學過react、vue 等相關(guān) mvvm 前端框架,那么學起來更快。
創(chuàng)建項目、快速開發(fā)
打開開發(fā)工具,填寫相關(guān)的信息,建議勾選上 quick start,他將會生成基本的頁面模板。

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

目結(jié)構(gòu)組織
├── images //項目用到的圖片資源
├── pages //頁面結(jié)構(gòu)
│?? ├── index //主頁面結(jié)構(gòu) 顯示列表信息
│?? │?? ├── index.js
│?? │?? ├── index.json
│?? │?? ├── index.wxml
│?? │?? └── index.wxss
│?? ├── location //信息在地圖上撒點
│?? │?? ├── location.js
│?? │?? ├── location.json
│?? │?? ├── location.wxml
│?? │?? └── location.wxss
│?? ├── location-detail //詳細的文字路徑描述
│?? │?? ├── 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
開發(fā)階段
邏輯不是很難(參看源碼即可),只需要考慮到?jīng)]有權(quán)限、沒有網(wǎng)絡和沒有數(shù)據(jù)的頁面顯示情況的特殊處理。這里需要提醒的是,數(shù)據(jù)來源是騰訊提供的周圍搜索,所以需要在小程序中綁定請求的 url,然后在編輯器項目選項配置中刷新按鈕,調(diào)試才會正常請求。如果自己開發(fā)接口進行訪問,一定要是 https 協(xié)議。
預覽、上傳、審核
在編輯器左邊的項目按鈕,可以對正在開發(fā)的項目進行預覽,這樣就可以邊開發(fā)邊調(diào)試。

之后開發(fā)完成可以進行上傳,在小程序開發(fā)管理界面可以選擇剛提交上來的項目作為體驗版本,先讓周圍的朋友進體驗下測試。注意,選了體驗版本之后還需要在用戶身份界面綁定體驗者(可以綁定十個體驗者)。如果在體驗的過程發(fā)現(xiàn)bug,還可以進行修改,畢竟還沒有上線。
發(fā)布
經(jīng)過體驗之后,發(fā)現(xiàn) bug 可以進行修改反復步驟,待問題全部解決,最后就可以上線了。點擊按鈕可以進行審核(我這個需要了兩天),通過之后你綁定的微信為推送消息提醒你,審核通過不代表就發(fā)布了,需要自己登陸管理平臺,手動將審核通過小程序進行發(fā)布。發(fā)布之后由于網(wǎng)絡原因,可能會出現(xiàn)一定的延遲,在小程序中搜索不到發(fā)布的信息,耐心等待,過一會就好了。
總結(jié)
總的來說,開發(fā)不難,特別是對于已經(jīng)熟悉 react、vue、angular 的語法同學們。在開發(fā)之前先把官網(wǎng)的介紹看看,開發(fā)文檔過一遍,大致有個印象。然后在網(wǎng)上找找與小程序相關(guān)的 ui 框架,結(jié)合使用,讓后看看騰訊或者高德關(guān)于小程序的地圖 API 文檔。
現(xiàn)在的功能是有點簡單,但是已經(jīng)夠滿足實際使用,后續(xù)有空也將會進行功能完善。
源碼獲取
加業(yè)余草個人微信:codedq,免費獲??!
