首页 > 微信 > 详细

三种微信小程序获取用户头像昵称的方式

时间:2021-05-14 15:14:42      阅读:22      评论:0      收藏:0      [点我收藏+]
index.wxml
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}" calss="userinfo-opendata">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>      <!-- 直接显示微信头像 具体可参照官网组件open-data -->
      </view>
      <open-data type="userNickName"></open-data>    <!-- 直接显示微信昵称  具体可参照官网组件open-data-->
    </block>
    <block>
      <button bindtap="getUserProfile"> 获取头像昵称 </button>
      <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称1 </button>
    </block>
    <block>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

 

idex.js

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse(‘button.open-type.getUserInfo‘),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse(‘open-data.type.userAvatarUrl‘) && wx.canIUse(‘open-data.type.userNickName‘) // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: ‘../logs/logs‘
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: ‘展示用户信息‘, // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})
 
 
 

三种微信小程序获取用户头像昵称的方式

原文:https://www.cnblogs.com/wwxdxgb/p/14767489.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!