微信小程序獲取用戶地理位置失敗的原因主要有3種情況:
1. 手機(jī)系統(tǒng)設(shè)置中地理位置未開啟
2. 系統(tǒng)未給微信app授權(quán)
3. 用戶未給小程序授權(quán)地理位置信息
所以需要繼續(xù)完善下定位失敗的處理邏輯。
1. 在獲取地理位置信息失敗后,首先判斷用戶手機(jī)系統(tǒng)定位服務(wù)是否開啟 || 微信app是否有定位授權(quán),兩種情況任意一種不符合,顯示地理位置獲取失敗狀態(tài);
2. 都符合的話調(diào)用uni.getLocation,success走成功的操作,fail表示未給小程序授權(quán)地理位置信息,顯示地理位置獲取失敗狀態(tài);uni.openSetting打開設(shè)置,選擇允許小程序授權(quán)。
涉及到一個關(guān)鍵點(diǎn)是,微信小程序判斷手機(jī)有沒有定位的方法
uni.getSystemInfo文檔
//locationEnabled 地理位置的系統(tǒng)開關(guān)
//locationAuthorized 允許微信使用定位的開關(guān)
uni.getSystemInfo({
success: (res) => {
if (!res.locationEnabled || !res.locationAuthorized) {
uni.showToast({
title: '請確保手機(jī)系統(tǒng)定位已開啟',
icon: 'none',
duration: 2000,
})
},
})
獲取地理位置失敗顯示效果圖
具體代碼如下:
封裝tool.js
//位置授權(quán)
export function getAuthorize () {
return new Promise((resolve, reject) => {
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 1 用戶允許授權(quán)
// 2 用戶之前已經(jīng)同意授權(quán),則不會出現(xiàn)彈窗,直接返回成功
// 以上兩種情況都會進(jìn)入到success回調(diào)中
resolve() // 允許授權(quán)
},
fail: () => {
// 1 用戶拒絕授權(quán)
// 2 用戶之前拒絕了授權(quán),此接口會直接進(jìn)入失敗回調(diào)
// 以上兩種情況都會進(jìn)入到fail回調(diào)中
reject() // 拒絕授權(quán)
},
})
})
}
父組件html
<template>
<view>
<!-- 未開啟定位時(shí)狀態(tài) -->
<notGps v-if="showNoGps" />
<!-- 已開啟定位時(shí),正常顯示頁面 -->
<view v-else class="index_root">
<view>頁面內(nèi)容</view>
</view>
</view>
</template>
父組件js
<script>
import { getAuthorize } from '@/utils/tool.js' //引入位置授權(quán)
import notGps from './component/notGps.vue' // 引入未開啟定位子組件
data() {
return {
showNoGps: false,
},
onLoad(e) {
uni.showLoading({
title: '加載中',
mask: true,
})
//位置授權(quán)
getAuthorize()
//用戶允許小程序位置授權(quán)
.then(() => {
this.getSystemInfo()
})
//用戶拒絕小程序位置授權(quán)
.catch(() => {
uni.hideLoading()
this.getSystemInfo()
})
},
onShow() {
if (this.showNoGps === true) {
this.getSystemInfo()
}
}
methods: {
//獲取手機(jī)系統(tǒng)信息
getSystemInfo() {
uni.getSystemInfo({
success: (res) => {
// 獲取地理位置失敗原因
// 1.手機(jī)系統(tǒng)設(shè)置中地理位置未開啟
// 2.系統(tǒng)未給微信授權(quán)
// 3.用戶未給小程序授權(quán)地理位置信息
if (!res.locationEnabled || !res.locationAuthorized) {
uni.showToast({
title: '請確保手機(jī)系統(tǒng)定位已開啟',
icon: 'none',
duration: 2000,
})
this.showNoGps = true
} else {
this.getLocation()
}
},
//先獲取經(jīng)緯度,然后再根據(jù)經(jīng)緯度通過騰訊地圖獲取地址名稱
getLocation() {
const that = this
uni.getLocation({
type: 'gcj02',
success(res) {
// 成功進(jìn)行的操作
let longitude = res.longitude
let latitude = res.latitude
getAddress(longitude, latitude)
.then((res) => {
let params = {
city: res.result.address_component.city,
name: res.result.address_reference.landmark_l2.title,
lng: longitude,
lat: latitude,
}
that.$store.commit('setLocation', params)
// 獲取定位成功,關(guān)閉獲取地理位置失敗顯示效果
that.showNoGps = false
uni.showLoading({
title: '加載中',
mask: true,
})
//請求接口獲取頁面數(shù)據(jù)
that.getGoodsList()
})
.catch((e) => {
console.log(e, '解釋地址失敗')
})
},
fail(err) {
// 到這里進(jìn)入fail就只有情況3,用戶未給小程序授權(quán)地理位置信息,顯示獲取地理位置失敗顯示效果
console.log(err, '獲取經(jīng)緯度失敗')
that.showNoGps = true
},
})
},
})
},
}
</script>
notGps組件文章來源:http://www.zghlxwxcb.cn/news/detail-496506.html
<template>
<view class="openGps">
<image src="@/static/image/no_goods.png" class="empty-img"></image>
<view class="empty-txt">
為給您提供最佳服務(wù),小程序需要獲取您的當(dāng)前位置以定位您附近的商戶
</view>
<view class="handleBtn" @click="gotoLocation">點(diǎn)擊開啟定位</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//打開小程序授權(quán)地理位置設(shè)置,不管用戶操作是否授權(quán),返回父組件頁面之后,都會觸發(fā)onShow周期函數(shù)里的代碼
gotoLocation() {
uni.openSetting({
success(res) {
console.log(res.authSetting)
},
})
},
},
}
</script>
<style lang="scss">
.openGps {
text-align: center;
padding: 400rpx 80rpx 0 80rpx;
}
.empty-img {
width: 380rpx;
height: 284rpx;
}
.empty-txt {
font-size: 28rpx;
color: #999;
}
.handleBtn {
background: linear-gradient(-10deg, #00ca20, #02bb34);
font-size: 20rux;
color: #fff;
font-weight: bold;
width: 300upx;
text-align: center;
height: 70upx;
line-height: 70upx;
border-radius: 35upx;
margin: 30upx auto;
}
</style>
可參考:
微信小程序拒絕定位之后 如何再次開啟以及判斷是否打開了系統(tǒng)定位功能
微信小程序獲取地理位置,用戶未開啟手機(jī)定位時(shí)的解決方案文章來源地址http://www.zghlxwxcb.cn/news/detail-496506.html
到了這里,關(guān)于微信小程序獲取地理位置失敗原因及解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!