微信小程序開發(fā)怎么實(shí)現(xiàn)一個(gè)跑步小程序

這篇“微信小程序開發(fā)怎么實(shí)現(xiàn)一個(gè)跑步小程序”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“微信小程序開發(fā)怎么實(shí)現(xiàn)一個(gè)跑步小程序”文章吧。

自己動(dòng)手實(shí)現(xiàn)一個(gè)跑步小程序 用到的方法：wx.onLocationChange，監(jiān)聽實(shí)時(shí)地理位置變化事件，需結(jié)合 wx.startLocationUpdateBackground，wx.startLocationUpdate使用。

地圖組件

定義一個(gè)全屏的地圖，地圖配置項(xiàng)經(jīng)緯度（longitude，latitude），縮放（scale），標(biāo)記點(diǎn)（markers），路線（polyline）等

<view class="map">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
        polyline="{{polyline}}" ></map>
</view>

地圖配置項(xiàng)字段

data: {
    latitude: '',
    longitude: '',
    scale: 16,
    markers: [],
    polyline: [{
        points: [],
        color: '#FB8337',
        width: 5
    }]
},

當(dāng)前位置

用wx.getLocation獲取當(dāng)前位置，

// 獲取當(dāng)前位置
getNowLocation() {
    wx.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: (res) => {
            this.setData({
                latitude: res.latitude,
                longitude: res.longitude,
            })
        }
    })
},

效果如圖：

需在app.json中配置

  "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息將用于小程序位置接口的效果展示"
        }
    },
      "requiredBackgroundModes": [
        "location"
    ],
    "requiredPrivateInfos": [
        "getLocation",
        "onLocationChange",
        "startLocationUpdate",
        "startLocationUpdateBackground"
    ]

效果如下：

點(diǎn)擊允許，就可以看到當(dāng)前位置了

開始跑步按鈕

添加一個(gè)開始跑步按鈕

<button bindtap="startRun" class="btn" type="primary">開始跑步</button>

.map {
    width: 100%;
    height: 100vh;
}

.btn {
    position: absolute;
    bottom: 100rpx;
    left: 0;
    right: 0;
    z-index: 1000;
}

GPS定位

點(diǎn)擊開始跑步的時(shí)候，我們需要獲取手機(jī)的GPS定位是否開啟，開啟后才能獲取地圖返回我們的坐標(biāo)

// 判斷手機(jī)定位是否開啟 
checkGPS() {
    wx.getSystemInfo({
        success: (res) => {
            if (!res.locationEnabled) {
                wx.showModal({
                    title: '提示',
                    content: '請(qǐng)先開啟手機(jī)GPS定位',
                    showCancel: false
                })
                return;
            }
        }
    })
},

開發(fā)者工具獲取不到，只能用手機(jī)測(cè)試

設(shè)置前后臺(tái)允許獲取定位

wx.startLocationUpdate({
    success: () => {
        wx.onLocationChange((res) => {
            this.setData({
                latitude: res.latitude,
                longitude: res.longitude
            })
            wx.getSetting({
                success: (res) => {
                    wx.hideLoading()
                    if (!res.authSetting['scope.userLocationBackground']) {
                        wx.showModal({
                            title: '提示',
                            content: '為確保后臺(tái)定位精確，請(qǐng)先設(shè)置 "使用小程序時(shí)和離開后允許" 再進(jìn)行跑步',
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {
                                    wx.openSetting()
                                }
                            }
                        })
                    } else {
                        this.running();
                    }
                }
            })
            wx.offLocationChange();
            wx.stopLocationUpdate();
        })
    },
})

開啟前后臺(tái)定位

// 開始前后臺(tái)定位
wx.startLocationUpdateBackground({
    success: () => {
        draw();
        time();
    },
    fail: () => {
        wx.showToast({
            title: '后臺(tái)定位開啟失敗',
            icon: 'none'
        })
    }
})

繪制路線

 let arr = this.data.polyline[0].points;
    wx.onLocationChange((res) => {
        if (dis > 0) {
            arr.push({
                latitude: res.latitude,
                longitude: res.longitude
            })
            totalDistance = Number(((totalDistance + dis) * 100).toFixed(2)) / 100;
        }
    }
    this.setData({
        'polyline[0].points': arr
    })
})

以上就是關(guān)于“微信小程序開發(fā)怎么實(shí)現(xiàn)一個(gè)跑步小程序”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。