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

忘是亡心i 2024-04-17 15:50 56阅读 0赞

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

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

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

用户信息是空的，这时候该死的用户非要点击【我的钱包】看钱但你根本【没登录】过！！！所以要弹出来一个框框告诉他登录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 2]

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

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

【开始】**项目/manifest.json 里的微信/百度小程序【*AppId*】都填上**，支付宝的![在这里插入图片描述][2019082812383031.png]  
这个【***小东东***】权限开启

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

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

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);
    	// ...
    },

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

百度小程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 3]

微信小程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 4]

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

支付宝：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][20190828120953742.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 5]

官网写的也很清楚，想要获取你先授权  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 6]  
他既然说未授权那我就授权一下下

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)
    		}
    	});
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 2]

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

【二】，既然都授权过了，刷新就可以自动获取到了，我们在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)
    								}
    							});
    						}
    					})
    				}
    			}
    		});
    	})
    }
    //...
    }

大致是这样的——>  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 3]

流程还是很粗暴的，具体可以看下官方爸爸 [https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html][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">
    			
    			<button type="primary" @click="alGetUserInfo">获取用户信息</button>
    			
    			
    			<button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">获取用户信息</button>
    			
    		</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>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ee266f20c8504a6eb69c0ce53dafcde4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/97fd3c93394e4c11892a54bd6e8e528d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3088cdd11b99435eb9446f8557eb5fac.png
[2019082812383031.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4b0442d1499d4dfb930c036b17640bc8.png
[https_uniapp.dcloud.io_case_id]: https://uniapp.dcloud.io/case?id=%E5%AE%98%E6%96%B9%E7%A4%BA%E4%BE%8B
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c53bd7b79c1e4f5fbc67694e23faeb21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5e383264e2214ade9271a94d5765a874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f5e716504a5d4be0b68bf1297643cb2e.png
[20190828120953742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b001d6342eb948459dbaea76e880580b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a6db4d5df9664bc58af6b90321d21406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d5e791e5dddf4dd0922d3837f0797ecd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/04b640dd61314b5e84b8ac4a06a71fd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/43d73f031dc14f00845db8dc3685ac78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/871bc2b0c9444cc28e2b1fe1fc7b4ced.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0Njk1MDY0_size_16_color_FFFFFF_t_70_pic_center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6bedf8e0308c4c00907ca121fe5de13c.png