uni-app在微信小程序如何获取微信头像和名称

ゝ一世哀愁。 2023-05-29 03:45 25阅读 0赞

<template>
    	<view>
    		<view class="tx-w">
    			<view class="tx">
    				<image class="tx-img" :src="yonghuwx.avatarUrl"></image>
    				<view class="zx"></view>
    			</view>
    			<view class="name">{ { yonghuwx.nickName}} </view>
    			<view class="name-qm">自然的美好的，你的</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				yonghuwx: []
    			}
    		},
    		onLoad(){ 
    			let that = this;
    			uni.login({ 
    				provider: 'weixin',
    				success: function(loginRes) { 
    					// 获取用户信息 
    					uni.getUserInfo({ 
    						provider: 'weixin',
    						success: function(infoRes) { 				
    							that.yonghuwx = infoRes.userInfo
    							console.log(that.yonghuwx)
    						}
    					});
    				}
    			});
    		},
    		methods: { 
    			
    		}
    	}
    </script>
    
    <style>
    	.tx-w{ 
    		margin-top:200upx;
    	}
    	
    	.tx{ 
    		text-align:center;
    	}
    	
    	.tx image{ 
    		width:140upx;
    		height:140upx;
    		border-radius: 50%;
    	}
    	
    	.name{ 
    		text-align:center;
    		margin-top:20upx;
    	}
    	
    	.name-qm{ 
    		text-align:center;
    		margin-top:20upx;
    		font-size:30upx;
    	}
    </style>

写完后就在小程序测试一下，是没问题的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191103202754335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4,size_16,color_FFFFFF,t_70