uni-app 获取用户微信资料 app 小程序

Bertha 。 2021-09-17 11:04 180阅读 0赞

<template>
    	
    	<view class="userBox">
    		
    		<text class="nickName">{
       {nickNames}}</text>
    		
    		<image class="userIcon" :src="avatarUrl">头像</image>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				nickNames: '匿名用户',
    				avatarUrl: '../../../static/xcx03.jpeg',
    				show: '',
    				hidden: ''
    			}
    		},
    		onLoad: function(option) {
    			let that = this;
    
    			uni.login({
    				provider: 'weixin',
    				success: function(loginRes) {
    					console.log(loginRes);
    					// 获取用户信息
    					uni.getUserInfo({
    						provider: 'weixin',
    						success: function(infoRes) {
    							console.log(infoRes);
    							that._data.nickNames = infoRes.userInfo.nickName;
    							that._data.avatarUrl = infoRes.userInfo.avatarUrl;
    						}
    					});
    				}
    			});
    
    		}
    	}
    </script>
    
    
    <style>
    	/* 用户盒子 */
    	.userBox {
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		padding: 20px;
    		background: linear-gradient(to top right, #63b8ff 0%, #4876ff 25%, #3a5fcd 100%);
    	}
    
    	/* 用户昵称 */
    	.nickName {
    		color: #ffffff;
    	}
    
    	/* 用户头像 */
    	.userIcon {
    		align-self: flex-end;
    		border-radius: 50%;
    		overflow: hidden;
    		width: 100px;
    		height: 100px;
    		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)
    	}
    </style>

微信讨论群：LAMN2017

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的微信小程序，定位获取授权

1. 详细见代码：在需要.vue页面调用如下方法。 onReady(){ this.isGetLocation(); }, metho

谁践踏了优雅/ 2023年02月18日 11:52/ 0 赞/ 43 阅读

相关 uniapp开发微信小程序获取用户手机号

uniapp开发微信小程序获取用户手机号[\-链接][-] 功能描述：微信小程序，点击微信第三方登录，获取到当前用户绑定的手机号与openId（或unionid），请求后

今天药忘吃喽~/ 2023年01月19日 03:28/ 0 赞/ 3230 阅读

相关 uni-app微信小程序获取用户地理位置信息

> uni-app 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。这里根据[腾讯位置服务官网][Link 1]给出的开发指南进行操作，

╰+哭是因爲堅強的太久メ/ 2022年12月12日 15:22/ 0 赞/ 532 阅读

相关 uniapp小程序获取用户手机号以及微信授权

小程序授权，经常用到的，获取手机号码，获取用户信息，都是用的 bindgetphonenumber 和 bindgetuserinfo <button class="

ゞ浴缸里的玫瑰/ 2022年12月01日 01:29/ 0 赞/ 927 阅读

相关小程序微信授权获取用户信息

> 福兮祸所伏，祸兮福所倚关于微信授权这块都有固定的几个步骤 1. 首先调用官方API获取登录凭证code 2. 通过code去换取openId（openId就是

叁歲伎倆/ 2022年11月28日 13:26/ 0 赞/ 509 阅读

相关微信小程序获取用户信息

> 1. 2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo

深藏阁楼爱情的钟/ 2022年11月15日 14:08/ 0 赞/ 377 阅读

相关微信小程序~App.js中获取用户信息

（1）代码：主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs =

Myth丶恋晨/ 2021年11月02日 13:28/ 0 赞/ 365 阅读

相关 uni-app 获取用户微信资料 app 小程序

<template>  <view class="userBox">

Bertha 。/ 2021年09月17日 11:04/ 0 赞/ 181 阅读

相关微信小程序获取用户openid

转：原文链接：[https://blog.csdn.net/qq\_27626333/article/details/54614037][https_blog.csdn.net

╰半橙微兮°/ 2021年09月15日 10:40/ 0 赞/ 598 阅读

相关 uniapp微信小程序获取地理位置授权

文件写在了App.vue onShow() { this.handleAuthorize() }, methods: { /

野性酷女/ 2021年07月24日 20:57/ 1 赞/ 853 阅读