2025 后端自学UNIAPP【项目实战：旅游项目】5、个人中心页面：微信登录，同意授权，获取用户信息

一、框架以及准备工作

1、前端项目文件结构展示           2、后端项目文件结构展示

  

3、登录微信公众平台，注册一个个人的程序，获取大appid（前端后端都需要）和密钥（后端需要） 

微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。https://mp.weixin.qq.com/

4、后端代码配置上自己的appid和密钥以及相关文件

我的是 application.properties，

后端代码逻辑可以从这里获取，自己编写到自己的java后端业务代码中2025 Java 微信小程序根据code获取openid，二次code获取手机号【工具类】拿来就用-CSDN博客文章浏览阅读4次。Spring Boot实现微信小程序登录，含session_key获取和手机号解密功能。https://blog.csdn.net/m0_47484034/article/details/147993148?spm=1001.2014.3001.5501

#wechat
wx.open.applet.app_id=自己的
wx.open.applet.secret=自己的

5、前端配置上自己的appid

 

二、前端页面源码

1、页面源码personal_center.vue

微信登录重点是：弹出框的相关逻辑

<template><view class="container"><!-- 个人信息 --><view class="info-box"><!-- 签到、设置、聊天一行 --><view class="info-header"><!-- 签到 --><view class="sign-in"><up-icon name="calendar" color="#fff" size="30"></up-icon><view class="sign-text">签到</view></view><!-- 设置和聊天 --><view class="action-icons"><up-icon name="chat" color="#fff" size="30"></up-icon><up-icon name="setting" color="#fff" size="30" style="margin-left: 20rpx;"></up-icon></view></view><!-- 个人信息卡片 --><view class="profile-card" @click="toGetUserInfo"><!-- 个人信息卡片 信息主体 --><view class="profile-main"><!-- 如果未登录/未注册显示默认头像并提示注册/登录 --><template v-if="!userInfo.nickName"><!-- 默认头像 --><image class="avatar" src="../../static/logo.png" mode="aspectFill"></image><!-- 去注册/登录 --><view class="nikename">注册 / 登录</view></template><!-- 如果登录后，显示出头像和昵称 --><template v-else><!-- 获取头像 --><image class="avatar" image :src="userInfo.avatar" mode="aspectFill"></image><!-- 昵称 --><view class="nikename">{{userInfo.nickName}}</view></template></view><view class="profile-other"><view class="profile-other-item favourite"><view class="profile-other-item-num favourite—num">5</view><view class="profile-other-item-text favourite-text">最爱</view></view><view class="profile-other-item browse"><view class="profile-other-item-num browse-num">100</view><view class="profile-other-item-text browse-text">浏览</view></view></view></view></view><!-- 功能列表 --><view class="list-box"><view class="list"><uni-list><uni-list-item title="个人信息" showArrow thumb="/static/user-menu/个人信息.png" thumb-size="sm"clickable /><uni-list-item title="我的购物车" showArrow thumb="/static/user-menu/我的购物车.png" thumb-size="sm"clickable /><uni-list-item title="用户反馈" showArrow thumb="/static/user-menu/用户反馈.png" thumb-size="sm"clickable /><uni-list-item title="我的邮件" showArrow thumb="/static/user-menu/我的邮件.png" thumb-size="sm"clickable /><uni-list-item title="分享有礼" showArrow thumb="/static/user-menu/分享有礼.png" thumb-size="sm"clickable /></uni-list></view></view><!-- 弹出层 --><up-popup :show="show" @close="close"><view class="popup"><view class="popup-title">获取您的昵称、头像</view><!-- 头像选择 --><view class="popup-child-box"><view class="label">获取用户头像</view><button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image class="avatar-img" :src="userInfo.avatar || '/static/default-avatar.png'"></image></button></view><!-- 昵称输入 --><view class="popup-child-box"><view class="label">获取用户昵称</view><input class="nickname-input" type="nickname" @input="changeName" /></view><button size="default" type="primary" @click="userSubmit">确认</button></view></up-popup></view>
</template><script setup>import {ref,reactive} from 'vue'// 生命周期，进来就加载import {onLoad} from '@dcloudio/uni-app'// 生命周期，进来就加载import {login} from '../../api/my_api'import avatar from '../../uni_modules/uview-plus/components/u-avatar/avatar';onLoad(() => {// 尝试从本地存储获取用户信息const storedUserInfo = uni.getStorageSync('userInfo');if (storedUserInfo) {userInfo.nickName = storedUserInfo.nickName;userInfo.avatar = storedUserInfo.avatar;}})const userInfo = reactive({nickName: "",avatar: ""})// 控制弹出层的显示const show = ref(false)//关闭弹出层的显示const close = () => {show.value = false}const onChooseAvatar = (e) => {userInfo.avatar = e.detail.avatarUrl}const changeName = (e) => {userInfo.nickName = e.detail.value}// 用户提交信息const userSubmit = async () => {if (!userInfo.nickName || !userInfo.avatar) {uni.showToast({title: '请填写完整信息',icon: 'none'});return;}try {// 保存用户信息到本地存储uni.setStorageSync('userInfo', {nickName: userInfo.nickName,avatar: userInfo.avatar});uni.showToast({title: '信息保存成功',icon: 'success'});show.value = false} catch (e) {uni.showToast({title: '保存失败，请重试',icon: 'none'});}}//微信授权登录，获取微信用户相关信息const toGetUserInfo = () => {// 如果已经有用户信息，直接显示弹窗if (userInfo.nickName && userInfo.avatar) {show.value = true;return;}uni.showModal({title: "温馨提示",content: "授权登录才可以正常使用小程序",success(res) {if (res.confirm) {uni.login({success: async (data) => {uni.getUserInfo({provider: 'weixin',success: async function(infoRes) {const user = await login(data.code, infoRes.userInfo.avatarUrl)userInfo.nickName = infoRes.userInfo.nickNameuserInfo.avatar = infoRes.userInfo.avatarUrl// 保存用户信息到本地存储uni.setStorageSync('userInfo', {nickName: userInfo.nickName,avatar: userInfo.avatar});show.value = true}})}})}}})}
</script><style lang="scss" scoped>.container {height: 100vh;background-color: #f5f5f5;// 个人信息区域.info-box {width: 100%;position: relative;z-index: 1;overflow: hidden;padding: 40rpx 30rpx;box-sizing: border-box;&::after {content: "";width: 140%;height: 400rpx;z-index: -1;position: absolute;top: 0;left: -20%;background-color: #6799FF;border-radius: 0 0 50% 50%;}// 顶部图标行.info-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 40rpx;.sign-in {display: flex;align-items: center;.sign-text {color: white;font-size: 28rpx;margin-left: 10rpx;}}.action-icons {display: flex;align-items: center;}}// 个人信息卡片.profile-card {background-color: #fff;border-radius: 20rpx;padding: 30rpx;box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);// 个人信息卡片 信息主体.profile-main {display: flex;align-items: center;// 用户头像.avatar {width: 120rpx;height: 120rpx;border-radius: 50%;margin-right: 30rpx;}// 用户昵称.nikename {font-size: 36rpx;font-weight: bold;color: #333;}}.profile-other {display: flex;justify-content: space-around;align-items: center;.profile-other-item {text-align: center;margin-top: 40rpx;.profile-other-item-num {color: black;font-weight: 700;font-size: 25rpx;}.profile-other-item-text {color: #757575;margin-top: 10rpx;font-size: 20rpx;}}}}}// 功能列表.list-box {height: 200rpx;margin: -10rpx auto 0;padding: 20rpx;box-sizing: border-box;border-radius: 12rpx;}/* 弹出层样式 */.popup {padding: 40rpx;border-radius: 20rpx;background: #fff;/* 标题 */.popup-title {margin-bottom: 40rpx;font-size: 36rpx;font-weight: bold;text-align: center;color: #333;}}/* 每个选项容器 */.popup-child-box {display: flex;justify-content: space-between;align-items: center;padding: 30rpx 0;border-bottom: 1rpx solid #f0f0f0;/* 标签文字 */.label {font-size: 32rpx;color: #666;width: 200rpx;}/* 头像按钮 */.avatar-btn {margin: 0;padding: 0;border: none;background: transparent;line-height: 1;.avatar-img {width: 100rpx;height: 100rpx;border-radius: 50%;background: #f5f5f5;}}/* 昵称输入框 */.nickname-input {flex: 1;text-align: right;font-size: 32rpx;color: #333;}}}
</style>

2、调用的后端各个接口的js文件：my_api.js

// 引入公共的请求封装
import http from './my_http.js'// 登录接口
export const login = async (code, avatar) => {const res = await http('/login/getWXSessionKey', {code,avatar});
};// 获取bannner列表
export const getBannerList = () => {return http('/banner/list')
}// 获取景点类型列表（支持传入typeId参数）
export const getTypeList = () => {return http('/type/list')
}// 获取景点列表
export const getAttractionList = (typeId) => {// 如果有typeId就拼接到URL，没有就不加const url = typeId ? `/attraction/list?typeId=${typeId}` : '/attraction/list'return http(url)
}
// 获取景点详情
export const getAttractionInfo = (attractionId) => {return http(`/attraction/getInfo/${attractionId}`)
}

3、公共http请求封装的js文件：my_http.js

/*** 基础API请求地址（常量，全大写命名规范）* @type {string}* @constant*/
let BASE_URL="http://localhost:9001/travel"
/*** 封装的HTTP请求核心函数* @param {string} url - 请求的接口路径（不需要包含基础接口URL）* @param {Object} [data={}] - 请求参数，默认为空对象* @param {string} [method='GET'] - HTTP方法，默认GET,支持GET/POST/DELETE/PUT等* @returns {Promise} - 返回Promise便于链式调用* */
export default function http(url, data = {}, method = 'GET') {// 返回一个Promise对象，支持外部链式调用return new Promise((resolve, reject) => {// 调用uni-app的底层请求APIuni.request({// 拼接完整请求地址（基础接口URL +  请求的接口路径）url: BASE_URL + url,// 请求参数（GET请求时会自动转为query string）data: data,// 请求方法（转换为大写保证兼容性）method: method.toUpperCase(),// 请求头配置header: {// 从本地存储获取token，没有就位空'token': uni.getStorageSync('token') || '',// 默认JSON格式'Content-Type': 'application/json'},// 请求成功回调（注意：只要收到服务器响应就会触发，无论HTTP状态码）success: (res) => {/* HTTP层状态码处理（4xx/5xx等也会进入success回调） */if (res.statusCode !== 200) {const errMsg = `[${res.statusCode}]${res.errMsg || '请求失败'}`showErrorToast(errMsg)// 使用Error对象传递更多错误信息reject(errMsg)}/* 业务层状态码处理（假设1表示成功） */if (res.data.code === "200") {// 提取业务数据（约定data字段为有效载荷）resolve(res.data.data)} else {// 业务错误处理const errMsg = res.data.msg || `业务错误[${res.data.code}]`showErrorToast(errMsg)reject(res.data.msg)}},// 请求失败回调（网络错误、超时等）fail: (err) => {const errMsg = `网络连接失败: ${err.errMsg || '未知错误'}`showErrorToast(errMsg)reject(new Error(errMsg))},})})
}/*** 显示统一格式的错误提示（私有工具方法）* @param {string} message - 需要显示的错误信息* @private*/
function showErrorToast(message) {uni.showToast({title: message, // 提示内容icon: 'none', // 不显示图标duration: 3000 // 3秒后自动关闭})
}

三、效果