uniapp小程序获取用户头像和信息
1,获取用户信息(页面弹出授权框,获取头像和名称等等) 使用api: getUserProfile()
示例:
html:
<image class="image" :src="info.avatarUrl"></image>
<view>{{info.nickName}}</view>
<button @click="getUserProfile"> 获取用户信息 </button>
data: info:{}
methods
getUserProfile() { let that = this uni.getUserProfile({ desc: "用于完善用户信息", success: (res1) => { that.info = res1.userInfo; console.log(res1) uni.showToast({ icon:"none", title:'获取成功' }) }, fail: (err) => { console.log(err) uni.showToast({ icon:"none", title:'用户拒绝获取' }) } }) }
2,获取地理位置 使用api: getLocation() ,获取前需要检查是否有授权获取地理位置,如果没有,先弹出授权框
示例:
html : <button @click="isGetLocation">获取地理位置</button>
<view>经度{{location[1]}}</view>
<view>纬度{{location[0]}}</view>
data location:[0,0] methods: // 获取地理位置 isGetLocation(a = "scope.userLocation") { // 3. 检查当前是否已经授权访问scope属性 var _this = this; uni.getSetting({ success(res) { if (!res.authSetting[a]) { //3.1 每次进入程序判断当前是否获得授权,如果没有就去获得授权,如果获得授权,就直接获取当前地理位置 _this.getAuthorizeInfo() //获取授权 } else { _this.getLocationInfo() //获取地理位置 console.log('取得授权,获取位置和信息') } } }); } getAuthorizeInfo() { //1. uniapp弹窗弹出获取授权(地理,个人微信信息等授权信息)弹窗 var _this = this; uni.authorize({ scope: "scope.userLocation", success(e) { //1.1 允许授权 _this.getLocationInfo(); console.log("允许授权") }, fail() { //1.2 拒绝授权 console.log("你拒绝了授权,无法获得周边信息") } }) }, getLocationInfo() { //2. 获取地理位置 let that = this uni.getLocation({ type: 'wgs84', success(res) { let latitude, longitude; latitude = res.latitude.toString(); longitude = res.longitude.toString(); that.location = [latitude,longitude] } }) },
ps:获取位置需要 在manifest.json 的源码试图中设置
"mp-weixin": { "appid": "wxb*******04af0b", "setting": { "urlCheck": false }, "usingComponents": true, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } }
此用户较懒,就写到这里了。