微信小程序使用uni-app一键获取用户信息

 更新时间:2023年01月26日 13:38:07   作者:Nanchen_42  
这篇文章主要介绍了微信小程序使用uni-app一键获取用户信息,需要的朋友可以参考下

用户不想输入账号密码,一键登录 

<label for="" @click="LoginDL">一键登陆</label>

uni.getUserProfile(只支持微信小程序)

获取用户信息。每次请求都会弹出授权窗口,用户同意后返回 userInfo。 

参数说明:

uni.getUserProfile({ //获取微信信息
	desc: '用于获取您的个人信息', // 声明获取用户个人信息后的用途,不超过30个字符
	success: res1 => { //接口调用成功的回调
		uni.showLoading({
			title: '登录中'
		})
		setTimeout(() => {
			uni.hideLoading(); //关闭登陆中状态
			uni.switchTab({
				url: '../myfile/myfile'
			})
			uni.$emit('updateCart') //为了同步渲染购物车数量
		}, 1000)
		var wxfor = {
			wx: res1.userInfo
		}
		//写成键值对形势添加到数据库中
		res.data.data = Object.assign(res.data.data, wxfor)
		this.login(res.data.data)
		console.log(res1);
	}

})
LoginDL() {
    // 传用户名和信息的接口
	getLogin(this.username, this.password).then(res => {
		console.log(11111111111);
		console.log(res);
		uni.getUserProfile({ //获取微信信息
			desc: '用于获取您的个人信息', // 声明获取用户个人信息后的用途,不超过30个字符
			success: res1 => {  //接口调用成功的回调
				uni.showLoading({
					title: '登录中'
				})
				setTimeout(() => {
					uni.hideLoading(); //关闭登陆中状态
					uni.switchTab({
						url: '../myfile/myfile'
					})
					uni.$emit('updateCart') //为了同步渲染购物车数量
				}, 1000)
				var wxfor = {
					wx: res1.userInfo
				}
				//写成键值对形势添加到数据库中
				res.data.data = Object.assign(res.data.data, wxfor)
				this.login(res.data.data)
				console.log(res1);
			}
		})
	})
},

在要获取头像的页面接收新增的wx数据,渲染即可,效果如下:(点击一键登录 ——出现弹窗,点击允许——获取成功)

 

到此这篇关于微信小程序使用uni-app一键获取用户信息的文章就介绍到这了,更多相关微信小程序使用uni-app一键获取用户信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    详解如何搭建mpvue框架搭配vant组件库的小程序项目

    这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue2 与 Vue3 的数据绑定原理及实现

    Vue2 与 Vue3 的数据绑定原理及实现

    这篇文章主要介绍了Vue2与Vue3的数据绑定原理及实现,数据绑定是一种把用户界面元素的属性绑定到特定对象上面并使其同步的机制,使开发人员免于编写同步视图模型和视图的逻辑
    2022-09-09
  • Vue组件的Prop命名约定详解

    Vue组件的Prop命名约定详解

    这篇文章主要为大家介绍了Vue组件的Prop命名约定详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue-router结合transition实现app前进后退动画切换效果的实例

    Vue-router结合transition实现app前进后退动画切换效果的实例

    下面小编就为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue 2.0学习笔记之使用$refs访问Vue中的DOM

    Vue 2.0学习笔记之使用$refs访问Vue中的DOM

    这篇文章主要介绍了Vue 2.0学习笔记之使用$refs访问Vue中的DOM,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue3路由配置createRouter、createWebHistory、useRouter和useRoute详解

    Vue3路由配置createRouter、createWebHistory、useRouter和useRoute详解

    Vue3和Vue2基本差不多,只不过需要将createRouter、createWebHistory从vue-router中引入,再进行使用,下面这篇文章主要给大家介绍了关于Vue3路由配置createRouter、createWebHistory、useRouter和useRoute的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

    Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

    这篇文章主要介绍了一款功能强大、灵活易用的前端组件VueDraggablePlus,作为前端工程师,我们经常会遇到需要实现拖拽功能的场景,而VueDraggablePlus正是为了解决这一痛点而诞生的,让我们一起来看看它的特点和用法吧
    2024-03-03
  • vue+webpack实现异步加载三种用法示例详解

    vue+webpack实现异步加载三种用法示例详解

    这篇文章主要介绍了vue+webpack实现异步加载的三种用法,文中给大家提到了vue+webpack实现异步组件加载的代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • vue3+vite项目跨域配置踩坑实战篇

    vue3+vite项目跨域配置踩坑实战篇

    vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue3中ref获取子组件的值代码示例

    vue3中ref获取子组件的值代码示例

    这篇文章主要给大家介绍了关于vue3中ref获取子组件值的相关资料,在Vue3中父组件获取子组件的值可以通过使用'ref'和'$refs'来实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08

最新评论