写文章

uni-app实战之路-获取用户地址和基本信息

吐槽君 分类：javascript

文章目录

        • 写在前面
          • 流程
          • authorize
          • getLocation
          • 获取腾讯的授权配置
          • 源代码
          • 获取用户基本信息
          • 写到最后

写在前面

开发小程序避免不了的是获取用户的信息，地址等，今天就简单的记录一下我实现的过程，因为我多个地方要用到，所以我这里直接写到vuex里面，你们看情况，不需要用的可以直接写到你们认为合适的地方！

流程

拿到授权->获取经纬度->获取地图的授权->根据经纬度进行逆地址解析
下面我们按照流程进行一步一步的来

authorize

authorize文档
这里可以看到文档里面写的还是比较明白的，提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。我们主要是使用他的参数scope，这个参数有一个对应的列表，里面的这个参数scope.userLocation，看实例：

uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})

可能这个比较废话，不想我的风格，说好的不按照文档来的，我们还是按照文档来吧，毕竟这个我不是很熟悉，一步一步来！

getLocation

getLocation文档
获取当前的地理位置、速度。
我们使用这个进行获取用户的经纬度,这里文档有一个比较奇怪的地方，这里有一个参数是geocode，上面的描述是这样的，说默认false，是否解析地址信息，我这里的理解是解析地址应该是直接返回给你具体的详细地址，但是他返回的是一个经纬度，我以为是我写的有问题，但是我测试看一些

getLocal(){
				uni.authorize({
					scope: "scope.userLocation",
					success() {
						//成功以后获取位置信息
						uni.getLocation({
							type: 'wgs84', //这里是不同的地图api支持的格式不一样，腾讯的gcj02，因为这里返回的是一个具体的经纬度，所以我们需要逆地址解析进行匹配对应的位置
							geocode :true,
							success: function(res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
								console.info(res)
							}
						});
					},
					fail(err) {
						uni.showToast({
							icon : none,
							title : '位置获取失败，部分功能不能使用！',
							duration : 2000
						})
						console.info(err)
					}
				})
			},

返回的结果是经纬度，好吧，可能是我比较菜吧，这里你们可以当作没看到!我们接着说，既然拿到的了经纬度，现在就需要想办法进行地址解析了！下面是官方的用法！

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});
获取腾讯的授权配置

腾讯地图api
我们进去以后呢直接点击控制台，进行微信登录，然后申请一个key，类似于这样的！
在这里插入图片描述
然后配置一下具体信息：
在这里插入图片描述
然后我们找到他的api
入门使用
我们直接看他的入门使用，里面说需要我们引入一个核心类
在这里插入图片描述
我们照做

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
})

写的很明白，我们这里下载好以后直接进行引入，然后我们看一下他的逆地址解析的过程
逆地址解析
我们直接使用：这里注意一点，uniapp自带的type类型是wgs84，我们这里使用的是gcj02，不明白没关系，我也不明白，但是知道用就行了。
在这里插入图片描述
具体有什么区别呢！博主这里简单的搜索了一下，感兴趣的可以自己研究，坐标系,我们接着说，文档说我们可以使用reverseGeocoder这个函数进行逆地址解析，看一下他的参数，里面刚好有我们可以拿到的经纬度，这不就可以了吗！
在这里插入图片描述

源代码
getCity(context) {
			//获取授权
			uni.authorize({
				scope: "scope.userLocation",
				success() {
					//引入腾讯地图对象
					let qqmapsdk = new QQMapWX({
						key: '您自己的key'
					});
					//成功以后获取位置信息
					uni.getLocation({
						type: 'gcj02', //这里是不同的地图api支持的格式不一样，腾讯的gcj02，因为这里返回的是一个具体的经纬度，所以我们需要逆地址解析进行匹配对应的位置
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							qqmapsdk.reverseGeocoder({
								location:{
									longitude : res.longitude,
									latitude : res.latitude
								},
								success(res){
									//使用上下文赋值 这里您可以根据自己的需求记性赋值
									context.city = res.result.address_component.city;
									console.info(context.city)
									weathers(context.city).then((res)=>{
										console.info(res)
									})
								}
							})
						}
					});
				},
				fail(err) {
					uni.showToast({
						icon : none,
						title : '位置获取失败，部分功能不能使用！',
						duration : 2000
					})
					console.info(err)
				}
			})
			console.info(uni)
		}
  • 效果：
  • 在这里插入图片描述

这里不要忘记下载好的qqmap-wx-jssdk.min.js，然后进行引入，不然是不行的！相信你们也知道！

获取用户基本信息

我们在开发的时候一般是需要获取到用户的头像和昵称等信息的，这里简单的说一下，毕竟文档写的也比较简单了!
获取用户基本信息
这里直接看源码吧！

getUserInfo() {
				let _self = this;
				uni.login({
					success(res) {
						console.info(res)
						let code = res.code;
						uni.getUserInfo({
							success(resp) {
								_self.nickName = resp.userInfo && resp.userInfo.nickName || "获取失败"
								_self.avatarUrl = resp.userInfo && resp.userInfo.avatarUrl || "获取失败"
								_self.show = false;
								_self.other_flag = true;
							},
							fail(err) {
								console.error(err)
							}
						})
					}
				})
			}
 
<button open-type="getUserInfo" class="mine_btn" @getuserinfo="getUserInfo()" v-if="show">获取授权</button>
  • 效果：
  • 在这里插入图片描述
  • 在这里插入图片描述
  • 界面不要纠结，只是为了演示给你们看而已！
    这里说一下，就是我们获取的时候文档没有直接说我们必须使用button，但是如果我们不使用的话，会发现可能不会成功，这里我们看一下文档怎么说的，button的介绍
    在这里插入图片描述
    首先我们需要定一个button，然后需要定义button的open-type的值，然后值必须是getUserInfo，这样才可以，额…真（m）不（m）错（p），知道就行了！
写到最后

关于怎么获取小程序的基本信息和地理位置就先写到这里吧！也不早了，后续会继续更新uniapp的知识点，毕竟路漫漫其修远兮，任重而道远啊！共勉！

回复

我来回复

  • 暂无回复内容