uni-app 微信 支付宝 百度小程序获取用户基本信息

uni-app 微信 支付宝 百度小程序获取用户基本信息

来了来了他们来了，产品带着雪花般的需求来了——>

【一】进来的时候没登录过

用户信息是空的，这时候该死的用户非要点击【我的钱包】看钱但你根本【没登录】过！！！所以要弹出来一个框框告诉他登录

（忽略我的样式）当用户点击完【登录按钮】就弹出来【授权弹框】

【同意授权】后，小程序就可以拿到用户的【昵称，头像。。】

【二】用户曾经授权过，一进来的时候自动获取用户基本信息

-------------------------------------------网黄分割线-----------------------------------

【开始】项目/manifest.json 里的微信/百度小程序【AppId】都填上，支付宝的
这个【小东东】权限开启

【一】，首先是一个登录的按钮放在帅气的组件中，去uni-app官网 https://uniapp.dcloud.io/case?id=官方示例 想都不用想肯定有现成的（淫笑）

<view class="loginDom">
	<!-- #ifdef MP-WEIXIN || MP-BAIDU-->
	<button type="primary" open-type="getUserInfo"  @getuserinfo="mpGetUserInfo">登录</button>
	<!-- #endif -->
	<!-- #ifdef MP-ALIPAY -->
	<button class="btn-action" @click="alGetUserInfo">登录</button>
	<!-- #endif -->
</view>

再看看这两个按钮分别对应的方法

alGetUserInfo() { // 支付宝的
	uni.getUserInfo({
		provider: 'alipay', // 登录服务提供商先写死
		success: (result) => {
			console.log('getUserInfo success', result);
		},
		fail: (error) => {
			console.log('getUserInfo fail', error);
			let content = error.errMsg;
			if (~content.indexOf('uni.login')) {
				content = '请在登录页面完成登录操作';
			}
			// ...
		}
	});
},
mpGetUserInfo(result) { // 微信和百度的
	console.log('mpGetUserInfo', result);
	// ...
},

我们先看下好不好使，有没有反应东西

百度小程序：

微信小程序：

良心的微信小程序更是把你的所在地，国家信息…都给你了

支付宝：

去支付宝小程序的官网看下

官网写的也很清楚，想要获取你先授权

他既然说未授权那我就授权一下下

getUserInfo() {
	my.getAuthCode({
		scopes: 'auth_user',
		success: (auth) => {
		uni.getUserInfo({
			provider: 'alipay', 
			success: (result) => {
				console.log('getUserInfo success', result);
			},
			fail: (error) => {
				console.log('getUserInfo fail', error);
				let content = error.errMsg;
				if (~content.indexOf('uni.login')) {
					content = '请在登录页面完成登录操作';
				}
				// ...
			}
		});
		},
		fail: (error) => {
			console.log(error)
		}
	});
},

都能拿到了把这些乱七八糟的代码先放着

【二】，既然都授权过了，刷新就可以自动获取到了，我们在main.js写一个全局的方法

Vue.prototype.$global = {
//...
// updata Code and UserInfo
appLogin() {
	return new Promise((resole, reject) => {
		uni.getProvider({
			service: 'oauth',
			success(res) {
				console.log(res.provider);
				uni.setStorage({
					key: 'provider',
					dta: res.provider[0]
				});
				if (res.provider.includes('alipay') || res.provider.includes('weixin') || res.provider.includes('baidu')) {
					uni.login({
						provider: uni.getStorageSync('provider'),
						// #ifdef MP-ALIPAY
						scopes: 'auth_user',  //alipay need to set empower'type
						// #endif
						success(loginRes) {
							console.log('-------获取openid(unionid)-----');
							console.log(JSON.stringify(loginRes));
							uni.setStorage({
								key: 'Code',
								data: loginRes.code
							});
							// get user info
							uni.getUserInfo({
								provider: uni.getStorageSync('provider'),
								success(infoRes) {
									console.log('-------获取用户所有-----');
									console.log(JSON.stringify(infoRes.userInfo));

									uni.setStorage({
										key: 'UserInfo',
										data: infoRes.userInfo
									});
									resole(true)
								},
								fail(err) {
									console.log(err)
									reject(false)
								}
							});
						}
					})
				}
			}
		});
	})
}
//...
}

大致是这样的——>

流程还是很粗暴的，具体可以看下官方爸爸 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

当然啦，这个方法我们在 【项目/App.vue】里面的onLaunch()调用一下，一进入小程序的时候看看用户是否曾经主动触发过授权按钮，如果触发过可以获取到。

onLaunch() {
	this.$global.appLogin()
}		

-------------------------------------------网黄分割线-----------------------------------

那最后把【一】上面的代码整理一下

登录按钮组件：

<template>
	<view class='loginDom'>
		
		<view class="uni-btn-v">
			<!-- #ifdef  MP-ALIPAY  -->
			<button type="primary" @click="alGetUserInfo">获取用户信息</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
			<button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">获取用户信息</button>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	
	export default {
		methods: {
			alGetUserInfo() {
				let that = this
				that.$global.appLogin().then(status => {
					//that.$emit('loginImport', {
						//status: status
					//})
				})
			},
			mpGetUserInfo(result) {
				let that = this
				that.$global.appLogin().then(status => {
					//that.$emit('loginImport', {
						//status: status
					//})
				})
			}
		}
	}
</script>

呼～基本都是官方现成的，个别流程可根据业务逻辑自行调整
哦～为什么没有头条因为账号申请不通过…