uni-app 小程序插件讨论 获取昵称头像弹窗 适用最新微信小程序 特哦那首歌 昵称赋值上去为空 输入也无值

在uni-app中处理微信小程序获取用户昵称和头像的弹窗，并处理昵称赋值为空或输入无值的问题，通常涉及使用微信小程序的wx.getUserProfile或wx.getUserInfo接口（取决于微信小程序的版本和权限要求）。以下是一个示例代码，展示了如何实现这一功能，并确保昵称能够正确赋值和更新。

1. 配置小程序权限

首先，确保在pages.json中已配置相关页面，并在manifest.json中声明所需的用户信息权限：

// manifest.json
{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false,
      "requestDomain": [],
      "wsRequestDomain": [],
      "uploadDomain": [],
      "downloadDomain": [],
      "debug": false,
      "permission": {
        "scope.userInfo": {
          "desc": "你的用户信息将用于小程序展示"
        }
      }
    }
  }
}

2. 获取用户信息

在需要获取用户昵称和头像的页面或组件中，使用wx.getUserProfile（或wx.getUserInfo，如果需要兼容旧版本）来弹出授权弹窗并获取用户信息。

// pages/index/index.vue
<template>
  <view>
    <button open-type="getUserInfo" @getuserinfo="handleUserInfo">获取昵称头像</button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl" style="width: 100px; height: 100px;"></image>
      <text>{{ userInfo.nickName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    handleUserInfo(e) {
      if (e.detail.userInfo) {
        this.userInfo = e.detail.userInfo;
      } else {
        wx.showModal({
          title: '提示',
          content: '您拒绝了授权，将无法获取昵称和头像',
          showCancel: false
        });
      }
    }
  }
};
</script>

3. 处理昵称为空或输入无值

如果昵称在赋值后为空或用户未输入，可以在handleUserInfo方法中增加逻辑来处理这种情况。例如，可以设置一个默认值或者在用户未授权时提示用户。

handleUserInfo(e) {
  if (e.detail.userInfo) {
    const { nickName, avatarUrl } = e.detail.userInfo;
    this.userInfo = {
      nickName: nickName || '默认昵称', // 如果昵称为空，则使用默认值
      avatarUrl: avatarUrl
    };
  } else {
    wx.showModal({
      title: '提示',
      content: '您拒绝了授权，将无法获取昵称和头像',
      showCancel: false
    });
    this.userInfo = {
      nickName: '默认昵称',
      avatarUrl: ''
    };
  }
}

通过上述代码，你可以在uni-app中实现微信小程序获取用户昵称和头像的弹窗，并处理昵称为空或输入无值的情况。