微信小程序云开发个人中心

Question

我出现了一个问题，在微信小程序开发个人中心的时候，我想实现一个个人中心页面的用户昵称和头像授权登陆确认的弹窗，我出现了点击登录按钮无法弹出用户昵称和头像授权登陆确认的弹窗，反而是没有授权的情况下直接进行了登陆的问题，但是我搜索了很多文章，提问了不同公司的AI，仍然无法解决问题，以下是我的代码

<!-- 上半 -->
<view class='profile'>
  <image bindtap="logout" class="pro" wx:if='{{username.length !== 0}}' src="{{userprofile}}"></image>
  <text wx:if='{{username.length !== 0}}'>{{username}}</text>
  <image bindtap="basicInfo" class="exit" wx:if='{{username.length !== 0}}' src="/images/gerenzhongxin/set.png"></image>
  <button bindtap="login" wx:if='{{username.length== 0}}'>登录</button>
</view>

<!-- 下半 -->
<view class="control">
  <button bindtap='gotoShuoming'>
    <text>使用说明</text>
  </button>
  <button bindtap='gotoWomen'>
    <text>关于我们</text>
  </button>
  <button bindtap='gotoBasicInfo'>
    <text>基本信息</text>
  </button>
  <button bindtap='share'>
    <text>分享好友</text>
  </button>
  <button bindtap='contact'>
    <text>在线客服</text>
  </button>
</view>

/* 上半 */
.profile {
  width: 750rpx;
  background-color: #3bcab2;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pro {
  height: 120rpx;
  width: 120rpx;
  border-radius: 50%;
}
.profile text {
  color: #fff;
  margin-top: 20rpx;
  font-size: 10px;
  letter-spacing: 3rpx;
  font-weight: bold;
}
.profile button {
  font-size: 10px;
  letter-spacing: 5rpx;
  width: 150rpx;
  height: 60rpx;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.exit {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
}

/* 下半 */
.control {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin-top: 10rpx;
  border-top: solid rgb(220, 220, 220) 5rpx;
  border-bottom: solid rgb(220, 220, 220) 5rpx;
}
.control button {
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-bottom: solid rgb(220, 220, 220) 1rpx;
}
.control text {
  font-size: 15px;
}

const app = getApp();
Page({
  data: {
    username: "",
    userprofile: ""
  },
  // 登录
  login(e) {
    wx.getUserProfile({
      desc: '请授权登录',
      success: res => {
        app.globalData.userInfo = res.userInfo;
        wx.setStorageSync('user', app.globalData.userInfo);
        this.setData({
          userprofile: app.globalData.userInfo.avatarUrl,
          username: app.globalData.userInfo.nickName
        });
      },
      fail: res => {
        wx.showToast({
          title: '授权失败',
          icon: "none",
        });
      }
    });
  },
  // 退出
  logout(e) {
    wx.showModal({
      title: '',
      content: '确认退出',
      success: res => {
        if (res.confirm) {
          wx.removeStorageSync('user');
          app.globalData.userInfo = null;
          this.setData({
            userprofile: "",
            username: ""
          });
        }
      }
    });
  },
  // 基本信息
  basicInfo(e) {
    wx.navigateTo({
      url: '/pages/basicInfo/basicInfo'
    });
  },
  // 页面跳转
  gotoShuoming(e) {
    wx.navigateTo({
      url: '/pages/shuoming/shuoming'
    });
  },
  gotoWomen(e) {
    wx.navigateTo({
      url: '/pages/women/women'
    });
  },
  gotoBasicInfo(e) {
    wx.navigateTo({
      url: '/pages/basicInfo/basicInfo'
    });
  },
  share(e) {
    // 分享好友逻辑
  },
  contact(e) {
    // 在线客服逻辑
  },
  onShow: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userprofile: app.globalData.userInfo.avatarUrl,
        username: app.globalData.userInfo.nickName
      });
    }
  },
});

//app.js文件
App({
  globalData: {
    userInfo: null
  },
})

如何解决这个问题呢各位

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据您提供的代码，问题可能出在login函数中的wx.getUserProfile方法。在微信小程序中，从基础库版本2.10.4开始，wx.getUserInfo接口被废弃，改为使用wx.getUserProfile接口。但是，wx.getUserProfile接口需要进行申请权限配置，否则无法正常获取用户信息。

解决方法如下：

1. 登录微信公众平台，进入你的小程序后台，点击左侧菜单的"设置"，然后点击"第三方设置"，在"用户信息"一项中勾选"用户信息"权限。

2. 修改login函数中的wx.getUserProfile方法，添加withCredentials参数，设置为false。这是因为从基础库版本2.10.4开始，wx.getUserProfile需要配合<button open-type="getUserInfo">使用，且需要在app.json或app.js中声明"getUserInfo"权限。但在您的代码中没有看到相关声明，所以建议将withCredentials设置为false。

修改后的login函数如下：

login(e) {
  wx.getUserProfile({
    desc: '请授权登录',
    success: res => {
      app.globalData.userInfo = res.userInfo;
      wx.setStorageSync('user', app.globalData.userInfo);
      this.setData({
        userprofile: app.globalData.userInfo.avatarUrl,
        username: app.globalData.userInfo.nickName
      });
    },
    fail: res => {
      wx.showToast({
        title: '授权失败',
        icon: "none",
      });
    },
    withCredentials: false // 添加这一行
  });
}

1. 如果问题仍然存在，建议检查微信开发者工具中的调试信息，查看是否有报错信息。同时，确保您的小程序基础库版本与代码中使用的API相匹配。