修改为微信官方推荐的新方式获取头像和昵称

问题： - getUserProfile API已被微信废弃 - getUserInfo API无法获取用户信息 - 导致无法获取微信头像和昵称解决方案： - 使用button组件的open-type="chooseAvatar"获取头像 - 使用input组件的type="nickname"获取昵称 - 这是微信官方推荐的新方式前端实现： - 头像按钮：open-type="chooseAvatar" @chooseavatar事件 - 昵称输入框：type="nickname" 自动填充微信昵称 - 简化登录流程，移除getUserProfile调用 - 使用async/await优化代码结构功能特点： - 用户点击头像按钮选择微信头像 - 用户点击昵称输入框自动填充微信昵称 - 支持手动输入昵称 - 更符合微信小程序最新规范
2026-03-09 00:35:48 +08:00
1 parent 7914781263
commit 2af29c604b
@@ -9,16 +9,19 @@
    </view>
    
    <view class="auth-card">
-      <view class="auth-avatar" @click="chooseAvatar">
+      <button class="auth-avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar-img" :src="avatarUrl || defaultAvatar" mode="aspectFit" />
        <text class="auth-tip">点击选择头像</text>
-      </view>
+      </button>
      
      <view class="auth-nickname">
-        <input class="nickname-input" v-model="nickname" placeholder="点击获取昵称" disabled />
-        <view class="get-nickname-btn" @click="getNickname">
-          <text class="btn-text">获取昵称</text>
-        </view>
+        <input 
+          class="nickname-input" 
+          type="nickname" 
+          v-model="nickname" 
+          placeholder="点击获取昵称" 
+          @blur="onNicknameInput"
+        />
      </view>
    </view>
    
@@ -52,32 +55,25 @@ export default {
    }
  },
  methods: {
-    chooseAvatar() {
-      uni.chooseImage({
-        count: 1,
-        sizeType: ['compressed'],
-        sourceType: ['album', 'camera'],
-        success: (res) => {
-          if (res.tempFilePaths && res.tempFilePaths.length > 0) {
-            this.avatarUrl = res.tempFilePaths[0]
-          }
-        }
-      })
+    onChooseAvatar(e) {
+      console.log('选择头像:', e)
+      const { avatarUrl } = e.detail
+      if (avatarUrl) {
+        this.avatarUrl = avatarUrl
+        console.log('头像URL:', avatarUrl)
+      }
    },
-    getNickname() {
-      uni.getUserInfo({
-        provider: 'weixin',
-        success: (res) => {
-          if (res.userInfo) {
-            this.nickname = res.userInfo.nickName
-            if (res.userInfo.avatarUrl) {
-              this.avatarUrl = res.userInfo.avatarUrl
-            }
-          }
-        }
-      })
+    
+    onNicknameInput(e) {
+      console.log('输入昵称:', e)
+      const value = e.detail.value
+      if (value) {
+        this.nickname = value
+        console.log('昵称:', value)
+      }
    },
-    doAuth() {
+    
+    async doAuth() {
      if (!this.avatarUrl) {
        uni.showToast({ title: '请选择头像', icon: 'none' })
        return
@@ -85,67 +81,54 @@ export default {
      
      this.loading = true
      
-      uni.getUserProfile({
-        desc: '用于完善用户资料',
-        success: (profileRes) => {
-          console.log('获取用户信息成功:', profileRes)
-          
-          const userInfo = profileRes.userInfo
-          const nickname = userInfo.nickName || this.nickname || '微信用户'
-          const avatarUrl = userInfo.avatarUrl || this.avatarUrl
-          
+      try {
+        const loginRes = await new Promise((resolve, reject) => {
          uni.login({
-            success: (loginRes) => {
-              if (loginRes.code) {
-                console.log('获取code成功:', loginRes.code)
-                
-                api.userApi.loginOrRegister({
-                  code: loginRes.code,
-                  nickname: nickname,
-                  avatarUrl: avatarUrl
-                }).then(res => {
-                  this.loading = false
-                  if (res.success) {
-                    console.log('登录成功:', res.data)
-                    uni.setStorageSync('userId', res.data.userId)
-                    uni.setStorageSync('userInfo', JSON.stringify(res.data))
-                    uni.setStorageSync('userCoins', res.data.coins || 10)
-                    uni.setStorageSync('vipLevel', res.data.vipLevel || 0)
-                    uni.setStorageSync('username', res.data.username || res.data.nickname)
-                    uni.setStorageSync('userAvatar', res.data.avatarUrl)
-                    
-                    uni.showToast({ title: '登录成功', icon: 'success' })
-                    
-                    setTimeout(() => {
-                      uni.switchTab({ url: '/pages/index/index' })
-                    }, 1500)
-                  } else {
-                    uni.showToast({ title: res.error || '登录失败', icon: 'none' })
-                  }
-                }).catch((err) => {
-                  this.loading = false
-                  console.error('登录失败:', err)
-                  uni.showToast({ title: '网络错误', icon: 'none' })
-                })
-              } else {
-                this.loading = false
-                uni.showToast({ title: '获取授权失败', icon: 'none' })
-              }
-            },
-            fail: (err) => {
-              this.loading = false
-              console.error('uni.login失败:', err)
-              uni.showToast({ title: '登录失败', icon: 'none' })
-            }
+            success: resolve,
+            fail: reject
          })
-        },
-        fail: (err) => {
-          this.loading = false
-          console.error('getUserProfile失败:', err)
-          uni.showToast({ title: '获取用户信息失败', icon: 'none' })
+        })
+        
+        if (!loginRes.code) {
+          throw new Error('获取授权失败')
        }
-      })
+        
+        console.log('获取code成功:', loginRes.code)
+        
+        const res = await api.userApi.loginOrRegister({
+          code: loginRes.code,
+          nickname: this.nickname || '微信用户',
+          avatarUrl: this.avatarUrl
+        })
+        
+        if (res.success) {
+          console.log('登录成功:', res.data)
+          uni.setStorageSync('userId', res.data.userId)
+          uni.setStorageSync('userInfo', JSON.stringify(res.data))
+          uni.setStorageSync('userCoins', res.data.coins || 10)
+          uni.setStorageSync('vipLevel', res.data.vipLevel || 0)
+          uni.setStorageSync('username', res.data.username || res.data.nickname)
+          uni.setStorageSync('userAvatar', res.data.avatarUrl)
+          
+          uni.showToast({ title: '登录成功', icon: 'success' })
+          
+          setTimeout(() => {
+            uni.switchTab({ url: '/pages/index/index' })
+          }, 1500)
+        } else {
+          throw new Error(res.error || '登录失败')
+        }
+      } catch (err) {
+        console.error('登录失败:', err)
+        uni.showToast({ 
+          title: err.message || '网络错误', 
+          icon: 'none' 
+        })
+      } finally {
+        this.loading = false
+      }
    },
+    
    skipAuth() {
      uni.switchTab({ url: '/pages/index/index' })
    }
@@ -215,29 +198,36 @@ page {
  width: 100%;
 }

-.auth-avatar {
+.auth-avatar-btn {
  width: 160rpx;
  height: 160rpx;
  margin: 0 auto 24rpx;
  position: relative;
+  background: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.auth-avatar-btn::after {
+  border: none;
 }

 .avatar-img {
-  width: 100%;
-  height: 100%;
+  width: 160rpx;
+  height: 160rpx;
  border-radius: 50%;
 }

 .auth-tip {
-  position: absolute;
-  bottom: -10rpx;
-  left: 50%;
-  transform: translateX(-50%);
  font-size: 22rpx;
  color: #10B981;
  background: rgba(255, 255, 255, 0.9);
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
+  margin-top: 10rpx;
 }

 .auth-nickname {
@@ -255,17 +245,6 @@ page {
  color: #065F46;
 }

-.get-nickname-btn {
-  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
-  padding: 20rpx 32rpx;
-  border-radius: 16rpx;
-}
-
-.btn-text {
-  font-size: 26rpx;
-  color: #ffffff;
-}
-
 .tips-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;