uniapp用户登录及获取用户信息（头像昵称）

news2025/5/13 13:07:46

低版本情况

微信开发者工具的基础库版本要调到2.27版本以下，能够直接申请用户权限获取用户信息，但是会仅限于开发者调试，在真机测试或已上传的小程序在手机上就不能获取
以上的原因是微信小程序wx.getUserProfile 和wx.getUserInfo 这两个获取用户信息的接口都已经停用了，取而代之的是：头像昵称填写能力
所以我们使用高版本的同时要使用获取头像昵称的新方法：
button按钮中 open-type=‘chooseAvatar’ 和chooseavatar方法结合 image组合实现选择头像
input输入框type="nickname"实现选择微信昵称

以下代码展示：

<template>
  <view class="login-container">
    <view class="user-info">
      <!-- 圆形的头像按钮 -->
      <button
        class="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>