uniapp小程序获取用户头像和信息

摘要:
1,获取用户信息(页面弹出授权框,获取头像和名称等等)使用api:getUserProfile()示例:html:  {{info.nickName}}获取用户信息data:i

1,获取用户信息(页面弹出授权框,获取头像和名称等等) 使用api:getUserProfile()

示例:

html:

<image   :src="http://t.zoukankan.com/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": "你的位置信息将用于小程序位置接口的效果展示"
			}
		}
	}

此用户较懒,就写到这里了。

免责声明:文章转载自《uniapp小程序获取用户头像和信息》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇DBeaver下载驱动文件失败博科SAN交换机基本配置(华为SNS系列交换机为例OEM博科)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

小程序使用 editor 富文本编辑器填坑指南

富文本编辑器文档:https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 最近在做小程序上的富文本编辑器功能,发现几个隐藏点: 1. 小程序中的 editor 组件本质上是集成了 quill 编辑器:https://quilljs.com/,官方文档上也说明了,导出里面的...

uni-app微信相关开发问题记录:微信分享报错"包名不对,请检查包名是否与开放平台填写一致"、Android微信支付只能调起一次的问题、App微信登录与公众号微信登录的unionid不一致

1、微信分享报错“微信:包名不对,请检查包名是否与开放平台填写一致”   具体原因及分析见这篇博客:uniapp微信APP支付踩坑指南:报错errMsg: "requestPayment:fail errors" 2、Android微信支付只能调起一次的问题   Android微信支付只能调起一次,之后就再不成功;有博客说卸载微信重装之后,就能成功,发现...

微信小程序自定义导航栏 覆盖canvas

需要使用cover-view来覆盖canvashttps://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html 真机测试:无法使用渐变背景,无法使用背景图片 canvas 存在就不要使用自定义导航栏了各种问题存在...

小程序多业务线融合【完整分包业务接入】

应用场景 同一个主体(公司、部门)下有多个小程序 这些小程序,由一个主小程序和后来新建的多条业务线构成(每条业务线拥有独立的小程序) 各业务线的小程序需要挂载到主程序下面,因为需要主程序导流 同时各业务线自己的小程序也照常发布更新 一套代码,通过打包命令,来生成独立包和分包(分包生成完需要拷贝到主程序的subPages目录下) 项目概述 我的这条业务...

小程序 模态对话框自定义组件(modal)

1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信息,故做一个自定义组件来处理相关的功能任务。 自定义组件所需功能: 全屏蒙版 模态对话框的显示内容:标题、内容、操作按钮 对模态框的操作,如显示与隐藏,取消...

微信小程序 webview直接关闭所有回到小程序

答案:首先要引入最新版的jweixin-1.3.2.js,然后 wx.miniProgram.navigateTo({ url: '/pages/login/login' + '$params' })参考地址:https://github.com/yisainan/web-interview/issues/1054方案二: 最近在做小程序的时候发现小程序...