使用uni-app进行小程序的授权登录(获取用户头像,名称,性别,地区等)

蔚落 2023-02-24 11:07 5阅读 0赞

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png]

![up-865e435ffc26739a1ab4d5825e2d3c78b22.png][]

1. 首先, 微信中的wx.getUserInfo接口改了，已经不能默认弹框进行授权了，必须引导用户点击按钮自己进行授权。

2. 用户进入页面时，可以先调用uni.getUserInfo, 如果用户已授权uni.getUserInfo是可以直接获取到用户的信息的

3. 如果是第一次授权，将会进fail回调，如果进入fail回调，给用户提示去进行授权就可以了

页面加载完成时调用uni.getUserInfo

onLoad(){
       this.changeLogin();
    },
    
    methods:{
      changeLogin(){
    	// 授权
    	// 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息
    	uni.getUserInfo({
    		provider: 'weixin',
    		//授权成功的回调
    		success(res) {
    			uni.showToast({
    			    title:'授权成功',
    				icon:'none'
    			})
    			console.info(res.data)
    			//that.login(res.data);//授权成功调用自己的登录方法就可以了
    		},
    		//第一次进入小程序
    		fail() {
    			uni.showToast({
    				title: '请点击授权进行登录',
    				icon: 'none'
    			});
    		}
    	});
      }
    }

授权html代码:

<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">授权账号信息</button>

点击授权js代码：

/**
    * 用户同意授权个人微信信息
    * @param {Object} e 用户的信息
    */
    onGotUserInfo(e) {
        console.info(e.detail)
        console.info(e.detail.userInfo);
    }

[hot3.png]: /images/20230209/03e3479126db41ba9193ab968e29a6e4.png
[30_ _hot3.png]: https://www.oschina.net/action/visit/ad?id=1221
[up-865e435ffc26739a1ab4d5825e2d3c78b22.png]: https://oscimg.oschina.net/oscnet/up-865e435ffc26739a1ab4d5825e2d3c78b22.png