微信小程序获取用户登录手机号、昵称、头像前端代码

 

 index.wxml

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
         

          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
        </view>
        <button open-type="getPhoneNumber" bind:getphonenumber="onGetPhoneNumber">获取手机号</button>
      </block>
      <block wx:elif="{{!hasUserInfo}}">
        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
      </block>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
 
  </view>
</scroll-view>

index.js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'), // 判断是否支持getUserProfile接口
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs'
      })
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },

    // 获取微信用户信息（包括昵称和头像）
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo, // 设置用户信息
            hasUserInfo: true // 设置用户已授权
          })
        },
        fail: (err) => {
          console.error('获取用户信息失败', err)
        }
      })
    },
  },
})

 获取头像演示

获取昵称演示

获取手机号演示

 

 

总结：

1. 获取微信头像和昵称：

   使用微信小程序的 wx.getUserProfile 接口可以获取用户的头像和昵称。通过这个接口，用户授权后，你可以获得包括 avatarUrl 和 nickName 等基本信息。通过按钮 <button open-type="getUserProfile" bindtap="getUserProfile">获取头像昵称</button> 触发获取用户信息。如果用户信息未授权或不存在，你可以显示一个按钮来请求授权。使用条件渲染 (wx:if 和 wx:else) 来控制是否显示用户信息（头像和昵称）。setData 更新数据后，页面会自动刷新显示用户头像和昵称。使用 wx.getUserProfile 来获取用户信息。成功后，通过 this.setData 方法将获取到的信息存储到页面的数据中，自动更新页面内容。

2. 获取手机号：

   可以通过 <button opentype="getPhoneNumber"bind:getphonenumber="onGetPhoneNumber"> 获取用户授权的手机号信息

关键代码：

• 获取头像和昵称：

  wx.getUserProfile({
    desc: '展示用户信息',
    success: (res) => {
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  })
  

• 获取手机号：

  onGetPhoneNumber(e) {
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      const phoneNumber = e.detail.phoneNumber;
      this.setData({ phoneNumber });
    }
  }
  

小结：

        通过这两个主要功能，你可以在微信小程序中获取用户的头像、昵称和手机号。微信提供的 getUserProfile 和 getPhoneNumber 接口帮助开发者轻松实现这些功能，确保用户在授权的情况下提供个人信息。