uniapp获取微信用户信息的解决方案

原因

由于微信更新,直接获取用户信息的所有接口已被回收,即便在开发者工具中可以获取到,真机运行时获得的信息中全部为默认内容。

解决方案

先通过后端随机生成昵称和固定设置统一头像,在系统中增加修改个人信息的页面,待授权登录成功后再由用户自行设置。在设置过程中可以通过微信开发文档提供的头像昵称填写接口:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.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 class="login-btn" type="primary" @click="getUserInfo">
			微信用户一键登录
		button>
	view>
template>

<script>
	export default {
		data() {
			return {
				nickName: '',
				avatarUrl: 'https://pic.imgdb.cn/item/648448141ddac507ccf110ca.png',
				activeRadio: '',
				code: "",
				AppId: "wxc8c8cdce1ec8fdb1",
				APPSecret: "d5f690aeefc5a4afd689cd8ec773b9dd"
			}
		},
		methods: {
			bindblur(e) {
				// console.log(e);
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value; // 将获取到的微信昵称填写到输入框
			},
			chooseAvatar(e) {
				console.log(e);
				this.avatarUrl = e.detail.avatarUrl
				uni.login({
					"provider": "weixin",
					success: function(run) {
						console.log(run);
						const {
							code
						} = run
						console.log(code);
						uni.request({
							url: 'https://api.weixin.qq.com/sns/jscode2session',
							method: 'POST',
							data: {
								code: this.code,
								AppId: this.AppId,
								APPSecret: this.APPSecret
							},
							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
				});
			},
			getUserInfo() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code
					}
				});
				uni.request({ // 此处请求可根据实际需要向自己的后端发送,利用后端将处理后的数据进行返回
					url: 'https://api.weixin.qq.com/sns/jscode2session',
					data: {
						appid: this.AppId,
						secret: this.APPSecret,
						js_code: this.code,
						grant_type: 'authorization_code'
					},
					success: (res) => {
						console.log(res.data);
					}
				});
			}
		}
	}
script>

<style lang="scss">

style>

uniapp获取微信用户信息的解决方案_第1张图片

你可能感兴趣的:(uniapp,前端,uni-app,微信)