日韩精品三级呦呦|五月丁香蜜臀|99久亚洲精品热|色婷婷五月一区

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

1、模擬器

可以在模擬器上看效果，上面降到了運(yùn)行底層不同，效果跟在手機(jī)上運(yùn)行有些差異

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

2、真機(jī)

在左邊的選項(xiàng)欄中，選擇項(xiàng)目，然后點(diǎn)預(yù)覽會(huì)生產(chǎn)一個(gè)二維碼，用管理員微信號(hào)掃一掃就可以在真機(jī)上看實(shí)際效果

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

實(shí)踐--跑步小程序。

真機(jī)運(yùn)行截圖（運(yùn)行于iPhone7，微信版本：6.3.30）：

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

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

home.jpeg

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

run.jpeg

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

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

功能：能夠計(jì)算里程、時(shí)間、實(shí)時(shí)獲取跑步路徑（有些粗糙）

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

首先實(shí)現(xiàn)一個(gè)計(jì)時(shí)器進(jìn)行計(jì)時(shí)，通過(guò)wx.getLocation獲取坐標(biāo)，把獲取到的坐標(biāo)存在一個(gè)數(shù)組中，通過(guò)坐標(biāo)每隔一段時(shí)間獲取里程，進(jìn)行累加得到總里程，同時(shí)也通過(guò)坐標(biāo)點(diǎn)進(jìn)行連線

存在的問(wèn)題：

1、因?yàn)槟壳罢也坏皆诘貓D上畫連線的方法，所以采用了在地圖上貼小紅點(diǎn)圖的方法顯示大概跑步路徑，路徑比較粗糙。

2、雖然采用了API里面的火星坐標(biāo)gcj02類型，但是獲取的坐標(biāo)跟國(guó)際坐標(biāo)差不多，依然存在著偏差。

核心代碼：

我把全部代碼放在github上-weChatApp-Run，可以下載來(lái)看看或者先star收藏，我以后還會(huì)進(jìn)行一些優(yōu)化更新?，F(xiàn)在只是一個(gè)學(xué)習(xí)Demo，大家溝通學(xué)習(xí)，實(shí)際應(yīng)用還需更多優(yōu)化。

wxml文件布局代碼&js文件邏輯代碼：點(diǎn)擊進(jìn)入Github


如發(fā)現(xiàn)本站文章存在版權(quán)問(wèn)題，煩請(qǐng)聯(lián)系editor@askci.com我們將及時(shí)溝通與處理。
中商情報(bào)網(wǎng)
掃一掃，與您一起
發(fā)現(xiàn)數(shù)據(jù)的價(jià)值
中商產(chǎn)業(yè)研究院
掃一掃，每天閱讀
免費(fèi)高價(jià)值報(bào)告
?