低版本情况
- 微信开发者工具的基础库版本要调到2.27版本以下，能够直接申请用户权限获取用户信息，但是会仅限于开发者调试，在真机测试或已上传的小程序在手机上就不能获取
- 以上的原因是微信小程序wx.getUserProfile 和wx.getUserInfo 这两个获取用户信息的接口都已经停用了，取而代之的是：头像昵称填写能力
- 所以我们使用高版本的同时要使用获取头像昵称的新方法：
button按钮中 open-type=‘chooseAvatar’ 和chooseavatar方法结合 image组合实现选择头像
input输入框type="nickname"实现选择微信昵称
以下代码展示：
<template><view class="login-container"><view class="user-info"><!-- 圆形的头像按钮 --><buttonclass="avatar-wrapper"@chooseavatar="onchooseAvatar"open-type="chooseAvatar"><image class="avatar" :src="avatarUrl" /></button><!-- 输入框，获取用户昵称 -->class="nickname-input"type="nickname"v-model="nickname"placeholder="获取或输入昵称111"/><!-- 登录按钮 --><button class="login-btn" @click="handleLogin" v-if="nickname">登录</button></view></view>
</template><script setup>
import { ref } from "vue";
import { useFormStore } from "@/store/formStore.js";
import { storeToRefs } from "pinia";
import config from "@/config/config.js"; // 导入配置文件const avatarUrl = ref("");
const nickname = ref(""); // 存储昵称
const userInfo = ref(null);
const logininfo = ref("");// 选择头像
const onchooseAvatar = (e) => {avatarUrl.value = e.detail.avatarUrl;
};// 登录操作
const handleLogin = () => {uni.login({provider: "weixin",success: function (loginRes) {const code = loginRes.code;uni.showLoading({title: "登录成功",mask: true, // 使遮罩层不可点击});login(code); // 传递 code 调用登录接口},fail: function (error) {console.log("登录失败: ", error);uni.showLoading({title: `登录失败`,mask: true, // 使遮罩层不可点击});},});
};// 登录请求
const login = (code) => {logininfo.value = code;const ip = uni.getStorageSync("ip");uni.request({url: `${config.baseUrl}/api/auth/login`,method: "POST",data: {jsCode: code,},header: {ip: ip,},success: (res) => {console.log("登录成功", res.data);if (res.data.code === 200) {// 登录成功，跳转到首页uni.navigateTo({url: `/pages/index/index`,});}const token = res.data.data.Authorization;uni.setStorage({key: "userToken",data: token,success: function () {console.log("数据存储成功");},fail: function (err) {console.log("数据存储失败", err);},});},fail: (err) => {console.error("登录失败", err);},complete: () => {uni.hideLoading(); // 隐藏 loading},});
};
</script><style scoped>
.login-container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: #f5f5f5;padding: 20px;
}.user-info {display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;
}.avatar-wrapper {width: 100px;height: 100px;border-radius: 50%;overflow: hidden;margin-bottom: 20px;border: 2px solid #e2e2e2;background-color: #e2e2e2;
}.avatar {width: 100px;height: 100px;margin-left: -16px;object-fit: cover;
}.nickname-input {width: 100%;padding: 10px;margin: 10px 0;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;color: #333;outline: none;background-color: #fff;
}.nickname-input::placeholder {color: #888;
}.get-info-btn,
.login-btn {width: 100%;padding: 12px;margin: 15px 0;background-color: #007aff;color: white;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;
}.get-info-btn:hover,
.login-btn:hover {background-color: #005bb5;
}.get-info-btn {background-color: #34c759;
}.get-info-btn:hover {background-color: #28a745;
}button:disabled {background-color: #ddd;cursor: not-allowed;
}
</style>
效果图
