uniapp获取微信昵称和头像_uniapp 获取微信头像

可以参考官方文档的示例 根据API调试进行获取 uni-app官网 (dcloud.net.cn)

多的不说 直接上示例看看我的代码

HTML部分

简单的搞了一个样式 样式就不用了多说了吧？

<template>
	<view class="login">
		<image :src="avatarUrl" mode=""></image>
		<view class="nickname">
			<text>昵称：</text>
			<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="点击获取昵称"
				@input="bindinput" />
		</view>
		<button type="balanced" open-type="chooseAvatar" @chooseavatar="chooseAvatar">获取头像</button>
		<button @click="onSubmit">授权登录</button>
	</view>
</template>

 JS部分

<script>
	export default {
		data() {
			return {
				nickName: '',
				avatarUrl: 'https://pic.imgdb.cn/item/648448141ddac507ccf110ca.png',
				activeRadio: ''
			}
		},
		methods: {
			bindblur(e) {
				// console.log(e);
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				// console.log(e);
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			chooseAvatar(e) {
				console.log(e);
				this.avatarUrl = e.detail.avatarUrl
				uni.login({
					"provider": "weixin",
					// "onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(run) {
						// console.log(run);
						const {
							code
						} = run
						console.log(code);
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						uni.request({
							url: '地址链接',//这里用自己的地址获取
							method: 'POST',
							data: {
								code: code
							},
							success: (res) => {
								//获得token完成登录
								console.log(res.data.openid);
								uni.setStorageSync('token', res.data.openid)
							}
						});
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
 
				let {
					avatarUrl
				} = e.detail;
				uni.showLoading({
					title: '加载中',
					duration: 1000
				});
			},
			onSubmit() {
				//这里是提交事件 根据自己的情况写
 
			}
		}
	}
</script>

这是我的效果图 样式随便写了一个 仅供参考