#微信小程序# #uni-app# 使用uni.getUserProfile，实现微信授权登录 （附源码）

一、需求：

实现微信授权登录，点击按钮，底部出现微信授权登录的弹框，点击即可授权，且跳转到其他页面

 二、步骤及思路：

（1）进行排版：

<template>
	<view class="login">
		<view class="login_infor">
			<img :src="avatarUrl" alt="">
		</view>
		<view class="name" >{
   
   {nickName}}</view>
		<view class="tip">将使用微信登录CHUJUNJUN课程平台</view>
		<button class='Login_btn' @click="getUser()">确定登录</button>
		<view class="cancel_btn" @click="exitApplet()">取消</view>
	</view>
</template>

（2）定义微信头像及昵称的变量，进行赋值，将用户信息填入界面里面

data() {
	return {
        //设置初始值
	    nickName:'用户昵称',
		avatarUrl:'https://gimg2.baidu.com/image_searchxxxx'
},

<template>
	<view class="login">
		<view class="login_infor">
			<img :src="avatarUrl" alt="">
		</view>
		<view class="name" >{
   
   {nickName}}</view>
		<view class="tip">将使用微信登录CHUJUNJUN课程平台</view>
	</view>
</template>

（3）在methods里，设置点击事件getUser()

<button class='Login_btn' @click="getUser()">确定登录</button>

（4）调用api---uni.getUserProfile，唤醒微信弹框，获取用户信息，每次请求都会弹出授权窗口，用户同意后返回 userInfo；

点击“允许”或者“拒绝”，执行相应的操作（弹出提示信息，或者跳转到其他页面）

		//获取用户信息(授权)
		getUser() {
				uni.getUserProfile({
				desc: "获取你的昵称、头像、地区及性别",
				success: (res) => {
                    console.log("所有",res);
					this.nickName = res.userInfo.nickName; //获取微信昵称
					this.avatarUrl = res.userInfo.avatarUrl; //获取微信头像
					uni.$u.route({
						url: 'pages/binding/binding', //跳转到其他页面
					})
				},
				fail() {
					uni.$u.toast('您已拒绝CHUJUNJU课程平台的授权！'); //点击“授权”按钮时触发
					}
				})		
		    },

 补充小知识：

uni.getUserProfile(OBJECT)

获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo，该API暂不支持在事件中使用异步操作（仅适用于微信小程序）

 

三、 效果显示：