文章目录

前言
一、创建点击事件的方法
二、判断用户是否授权位置
三、弹出位置授权框
四、坐标到坐标所在位置的文字描述的转换（逆地址解析）
五、拒接授权后再次点击按钮跳转到允许访问位置设置
总结

前言

前提：该实例是使用uniapp的小程序实现的
文章描述：
这里要实现的功能是：
1、点击页面中的一个按钮
2、判断用户是否授权位置信息
3、未授权–>弹出位置授权框；已授权–>进入下一个页面（地址选择页）；
4、弹出位置授权框后，是否同意授权
5、同意：得到地址；不同意：–>进入下一个页面（地址选择页）
6、用户不同意位置授权的前提下，用户第二次进入小程序点击这个按钮：弹窗提示用户是否开启位置访问
7、同意：跳转找设置用户开启允许访问设置
8、不同意：–>进入下一个页面（地址选择页）
结果：得到用户当前位置或用户进入地址选择页选择需要的位置

一、创建点击事件的方法

在pages/home/home.vue编写此代码创建点击事件isdingwei(),

<template><view class="location"><!-- 定位 --><view class="location-view" @click="isdingwei()"><text class="location-text">{{city}}</text></view><!-- end --></view>
</template>
<script>export default {data() {return {city: '深圳市'}},methods:{isdingwei(){//点击事件的方法}}}
</script>

二、判断用户是否授权位置

考虑到在项目中我们可能不止一次地方用到或者方便修改等问题，
1、项目下创建了新的目录存放（utils/indes.js），如图：

2、在utils/indes.js写一个判断用不是否授权位置的方法authorizedLocation()：

export function authorizedLocation(){return new Promise((resolve,reject)=>{uni.getSetting({success:(res)=>{// res.authSetting['scope.userLocation'] === undefined  表示 初始化进入，从未授权// res.authSetting['scope.userLocation'] === true       表示 已授权// res.authSetting['scope.userLocation'] === false      表示 授权拒绝if( res.authSetting['scope.userLocation'] === undefined){console.log("弹出位置授权框")}else if(res.authSetting['scope.userLocation'] === true){console.log("已经授权")}else if(res.authSetting['scope.userLocation'] === false){console.log("弹出允许授权设置框")}}})})
}

3、在项目中引入，并使用：

<script>//引入import {authorizedLocation} from '../../../utils/index.js'export default {data() {return {city: '深圳市'}},methods:{isdingwei(){// 判断是否授权authorizedLocation()}}}
</script>

在控制台可以看到我们的结果可以看到我们是没有授权过的

三、弹出位置授权框

1、在（utils/indes.js）下在定义一个方法getLocation()获取用户位置信息：

// 获取用户当前位置
export function getLocation(){return new Promise((resolve,reject)=>{uni.getLocation({type: 'wgs84',success:(res)=>{resolve(res)console.log(res)console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);},fail:(err)=>{reject(err)console.log(err)}})})
}

2、在authorizedLocation()方法中调用，如图：

在方法里面的第一个判断条件里添加代码段：

if( res.authSetting['scope.userLocation'] === undefined){// console.log("弹出位置授权框")getLocation().then((res)=>{// 授权位置成功resolve(res)}).catch((err)=>{// 授权位置失败reject(err)uni.showToast({title: '授权位置失败',icon: 'none',duration: 3000})})}

前提：res.authSetting[‘scope.userLocation’] === undefined 表示初始化进入，从未授权。结果：
1、点击按钮–>弹出授权框

2、–>同意

3、–>不同意

四、坐标到坐标所在位置的文字描述的转换（逆地址解析）

用户授权成功后，就得了用户位置的经纬度，通过经纬度转换成文字描述，同样我们把实现方法先封装到pages/utils/index.js 下：
1、逆地址解析需要用到地图的AIP，所以移步到腾讯地图做好准备工作，我觉得跟着官方文档做就好了，不过也会有一些坑，我把我遇到的写上：

1、第一、第二、第四步骤跟着官方文档走就好了
2、第三步，下载好了放到自己的文档的目录下我放在了、/libs的目录下，如图：

3、申请号的Key：放到项目里（我放在了、config/indes.js），最好放在全局这样修改起来方便，引入看下面

4、第五步骤中我的项目是vue3，不能个官方文档那样引入

// 腾讯地图秘钥引入
import * as KEY from '../config';import QQMapWX from '../libs/qqmap-wx-jssdk.js';
const qqmapsdk = new QQMapWX({key: KEY.MAP_KEY
})

在看看官方文档的逆地址解析，定义reverseGeocoder (location)函数实现转换：

// 逆地址解析（坐标转具体位置信息）
// location:参数为经纬度{longitude, latitude}
// get_poi：是否返回周边POI列表：1.返回；0不返回(默认)
// poi_options：用于控制Poi列表export function reverseGeocoder (location) {return new Promise((resolve, reject) => {qqmapsdk.reverseGeocoder({location: location,get_poi: 1,poi_options: 'policy=1;page_size=20;page_index=1',success: res => {resolve(res)},fail: err => {reject(err)uni.showToast({title: err.message,icon: 'none',duration: 3000})}})})
}

5、回到pages/home/home.vue 。在引入上添加 reverseGeocoder，定义getLocationInfo(location)方法调用 reverseGeocoder()

 import {authorizedLocation,reverseGeocoder} from '../../../utils/index.js'

// 根据经纬度得到位置信息getLocationInfo(location){// console.log("进来没")reverseGeocoder(location).then((res) => {console.log('当前位置信息：', res)//获取所在的城市this.city = res.result.ad_info.city})               .catch((err) =>{})},// end

1、在isdingwei()里面调用getLocationInfo(location)：

isdingwei(){// 判断是否授权authorizedLocation().then((res)=>{// 已授权// console.log("res里面有什么！！！",res)const latitude = res.latitude;const longitude = res.longitude;let location = { longitude, latitude }// 根据经纬度得到位置信息this.getLocationInfo(location)}).catch(()=>{})},

6、已授权位置直接进入下一个页面，在isdingwei()添加代码段：

isdingwei(){// 判断是否授权authorizedLocation().then((res)=>{// 第一次授权if(res.errMsg==="getLocation:ok"){console.log("res里面有什么！！！",res)const latitude = res.latitude;const longitude = res.longitude;let location = { longitude, latitude }// 根据经纬度得到位置信息this.getLocationInfo(location)}else if(res.errMsg==="getSetting:ok"){//已授权uni.navigateTo({url: '../../../../citylist/citylist'})}}).catch(()=>{})},

在 authorizedLocation()函数中判断为已授权哪里加上resolve(res)：

五、拒接授权后再次点击按钮跳转到允许访问位置设置

在utils/index.js目录下的authorizedLocation()函数中添加如下代码段
在（else if(res.authSetting[‘scope.userLocation’] === false){ … }）{}里面加

 // console.log("弹出允许授权设置框")uni.showModal({title: '提示',content: '是否允许授权位置信息',confirmText: '去设置',success:(res)=>{if(res.confirm){uni.openSetting({success:(res)=> {if (res.authSetting['scope.userLocation']) {resolve(res)} else {reject(res)uni.showToast({title: '授权失败',icon: 'none',duration: 3000})}},fail: (err) => {reject(err)uni.showToast({title: '打开设置异常',icon: 'none',duration: 3000})}})}else {reject(res)console.log("asjfs 卡号的")console.log(res)}},fail: err => {reject(err)uni.showToast({title: '弹窗异常',icon: 'none',duration: 3000})}})

在pages/home/home.vue中 isdingwei()方法中添加代码段：

.catch((err)=>{if(err.errMsg==="showModal:ok" && err.confirm==false){uni.navigateTo({url: '../../../../citylist/citylist'})}})

完成啦！！！！

总结

以上就是今天学习到的一些内容，本文仅仅自己的学习过程的记录，可能有些写的不好的地方，也不够优雅，只是简单的把功能实现了，各位大佬看到有什么不对的地方还望指正，和我一样的新手有什么不懂的地方也可以一起讨论。

uniapp微信小程序：点击按钮先判断用户是否授权位置信息、用户位置信息授权、进入下一个页面相关推荐

uniapp 微信小程序点击按钮实现复制功能
copyNumHandle(){uni.setClipboardData({data: this.formdata.orderNum, // data的值为你要复制的内容success: res =& ...
微信小程序点击按钮分享指定页面
微信小程序点击按钮分享指定页面 1.在wxml里写所要点击的按钮 <button data-info='{{order}}' open-type="share" hover- ...
uniapp微信小程序左上角返回按钮的监听
项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序点击按钮弹出弹窗_转载 | 广东大学生就业创业微信小程序操作流程详解（一）...
广东大学生就业创业微信小程序操作流程详解(一) 转眼来到10月,炎炎夏日也阻挡不了青春的忙碌,同学萌走出校园,迈向社会. 在这段时间,同学们不仅要准备毕业论文,应对毕业答辩,还需要兼顾各种毕业手续的 ...
微信小程序-点击按钮退出小程序
需求小程序中,用户点击"不同意"按钮大于三次后,直接退出小程序. 实现 <button wx:if="{{ counts <= 3 }}"> ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
微信小程序点击按钮变字体颜色
微信小程序开发: 实现一个按钮,和一段文字"Hello World",点击时依次按照"红,绿,蓝,绿"的次序循环变换文字颜色.即:红,绿,蓝,绿,红,绿,蓝,绿 ...
uniapp微信小程序自定义相机，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题
微信小程序自定义相机效果文章目录微信小程序自定义相机效果需求一.小程序自定义相机 1.使用uniapp的camera组件二.使用cover-view,cover-image加辅助边框三 ...

uniapp微信小程序：点击按钮先判断用户是否授权位置信息、用户位置信息授权、进入下一个页面