微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序
來源:電腦百事網 發(fā)布日期:2017-01-10 17:21
分享:

1、模擬器

可以在模擬器上看效果,上面降到了運行底層不同,效果跟在手機上運行有些差異

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

2、真機

在左邊的選項欄中,選擇項目,然后點預覽會生產一個二維碼,用管理員微信號掃一掃就可以在真機上看實際效果

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

實踐--跑步小程序。

真機運行截圖(運行于iPhone7,微信版本:6.3.30):

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

home.jpeg

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

run.jpeg

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

微信小程序開發(fā)實戰(zhàn) 手把手教你開發(fā)跑步微信小程序

功能:能夠計算里程、時間、實時獲取跑步路徑(有些粗糙)

思路:主要使用了微信小程序的獲取位置APIwx.getLocation和地圖組件map。

首先實現一個計時器進行計時,通過wx.getLocation獲取坐標,把獲取到的坐標存在一個數組中,通過坐標每隔一段時間獲取里程,進行累加得到總里程,同時也通過坐標點進行連線

存在的問題:

1、因為目前找不到在地圖上畫連線的方法,所以采用了在地圖上貼小紅點圖的方法顯示大概跑步路徑,路徑比較粗糙。

2、雖然采用了API里面的火星坐標gcj02類型,但是獲取的坐標跟國際坐標差不多,依然存在著偏差。

核心代碼:

我把全部代碼放在github上-weChatApp-Run,可以下載來看看或者先star收藏,我以后還會進行一些優(yōu)化更新?,F在只是一個學習Demo,大家溝通學習,實際應用還需更多優(yōu)化。

wxml文件布局代碼&js文件邏輯代碼:點擊進入Github


如發(fā)現本站文章存在版權問題,煩請聯系editor@askci.com我們將及時溝通與處理。
中商情報網
掃一掃,與您一起
發(fā)現數據的價值
中商產業(yè)研究院
掃一掃,每天閱讀
免費高價值報告
?