精华内容
下载资源
问答
  • 主要介绍了微信小程序如何获取用户头像和昵称,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序中,用户的昵称和头像如果只是用来展示,而非用于其它用途,可以直接拿到进行展示: 1.只是用来展示 (1)wxml <view style='margin:10rpx auto;text-align:center'> 头像 <open...

    在小程序中,用户的昵称和头像如果只是用来展示,而非用于其它用途,可以直接拿到进行展示:

    1.只是用来展示

    (1)wxml

    <view style='margin:10rpx auto;text-align:center'>
      头像
      <open-data class="open-data-userAvatarUrl" type="userAvatarUrl"></open-data>    
    </view>
    
    <view style='margin:40rpx auto;text-align:center;display:flex;justify-content: center;'>
    姓名:<open-data class="open-data-userNickName line1" type="userNickName" lang="zh_CN"></open-data>
    </view>
    
    <view style='margin:10rpx auto;text-align:center'>
    性别:<open-data type="userGender" lang="zh_CN"></open-data>
    </view>

    (2)wxss

    .intro {
      margin: 30px;
      text-align: center;
    }
    
    .line1{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis; 
    }
    
    .open-data-userAvatarUrl {
      width: 160rpx;
      height: 160rpx;
      display: block;
      overflow: hidden;
      border-radius: 50%;
      margin: 40rpx auto;
    }
    .open-data-userNickName{
      max-width: 105rpx;
      display:block;
    }
    

    (3)效果

    2.用于别的用途  (button按钮获取官方地址:官方

    (1)通过页面的按钮,用户授权,这些涉及用户隐私的信息,必须由用户授权,否则无法拿到;

    (2)涉及授权的操作必须使用button;

    3.说明:

    (1)open-data标签不能直接给一个随便的ClassName,须要给一个open-data-classname(classname可以自己变通定义),来实现可以实现头像的倒圆角,如果用户名对长度有要求限制的话也可以通过这种方法来实现限制;

    (2)对于有些需要通过用户授权的部分,必须通过按钮来实现,需要授权的参照官网

    展开全文
  • // An highlighted block wx.showModal({ title: '温馨提示', content: '正在请求您的个人信息', success(res) { if (res.confirm) { wx.getUserProfile({ desc: "获取你的昵称头像、地区及性别", success: res =...

     官方网址:

    https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

    参考:

    https://blog.csdn.net/qq_45221690/article/details/114389689

    只需要复制这个代码即可:

     

    代码:

    // An highlighted block
     wx.showModal({
       title: '温馨提示',
       content: '正在请求您的个人信息',
       success(res) {
         if (res.confirm) {
           wx.getUserProfile({
           desc: "获取你的昵称、头像、地区及性别",
           success: res => {
             console.log(res)
             let wxUserInfo = res.userInfo;
           },
           fail: res => {
           	 //拒绝授权
             that.showErrorModal('您拒绝了请求');
             return;
           }
         })} else if (res.cancel) {
           //拒绝授权 showErrorModal是自定义的提示
           that.showErrorModal('您拒绝了请求');
           return;
         }
       }
     })
    

     

    展开全文
  • 在一次开发微信小程序的过程中,需要获取到使用小程序的用户头像和用户昵称,而且只需要一次授权,后面再使用就自动获取用户的信息 功能实现 1.操作流程 用户登录时,使用 wx.getSetting 来查询用户是否授权过 如...

    微信小程序一键获取用户头像、昵称等基本信息

    系统:Win10
    微信开发工具:Stable v1.03.2005140

    根据官方发布更新说明:小程序登录、用户信息相关接口调整说明
    对getUserInfo的功能进行了调整,可能已经无法实现下面的效果,请注意!!!

    需求描述

    在一次开发微信小程序的过程中,需要获取到使用小程序的用户头像和用户昵称,而且只需要一次授权,后面再使用就自动获取用户的信息

    功能实现

    1.操作流程

    • 用户登录时,使用 wx.getSetting 来查询用户是否授权过
      • 如用户首次登录,则使用 button open-type=‘getUserInfo’ 来调起授权
        • 若未授权或拒绝授权,则一直显示授权按钮
        • 若获得授权,则使用 wx.getUserInfo 来获取用户的头像、昵称等信息
      • 若用户是再次登录,则通过成功返回的 scope.userInfo 来调用用户的头像、昵称等信息

    2.目录结构

    这里我新建了一段代码片段来测试
    在这里插入图片描述

    3.关键代码

    记得在 app.js 下创建一个全局变量 userInfo

    App({
      globalData: {
        userInfo: null
      },
      onLaunch: function () {
        
      }
    })
    

    index/index.js

    const app = getApp()
    var that
    Page({
      /* 页面初始数据 */
      data: {
        userInfo: {},
        hidden_actionSheet: true,
      },
    
      /**
       * 页面加载
       */
      onLoad: function () {
        that = this
        that.isAuthorize().then(res => { //用户已经授权获取基本信息
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              that.setData({
                userInfo: app.globalData.userInfo,
              })
            }
          })
        }).catch(res => { //用户没有授权获取基本信息
          that.setData({
            hidden_actionSheet: false,
          })
        })
      },
    
      /* 是否授权获取基本信息,已经授权返回到then,没有授权返回到catch */
      isAuthorize() {
        return new Promise((resolve, reject) => {
          // 获取用户授权状态
          wx.getSetting({
            success: res => {
              if (res.authSetting['scope.userInfo']) {
                console.log("全局--用户已经授权")
                resolve()
              } else {
                console.log("全局--用户还没有授权获取基本信息")
                reject()
              }
            }
          })
        })
      },
    
      // 底下的取消按钮
      actionSheetChange: function (e) {
        wx.showModal({
          showCancel: false,
          content: '部分功能需要登录才能使用',
        })
      },
    
      // 获取用户信息:拒绝还是接受都会进入这里
      allowGetUserInfo: function (e) {
        if (e.detail.rawData) { // 权限选择了:允许
          that.setData({
            userInfo: app.globalData.userInfo,
          })
          // 获取用户信息
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              that.setData({
                userInfo: app.globalData.userInfo,
                hidden_actionSheet: true, // 隐藏actionSheet
              })
            }
          })
        } else { // 权限选择了:拒绝
          wx.showModal({
            showCancel: false,
            content: '部分功能需要登录才能使用',
          })
        }
      },
    })
    
    

    index/index.wxml

    <view class="container">
      <view class="userinfo">
        <!-- hasUserInfo为false表示没有获取到用户信息,就显示获取头像昵称的按钮 -->
        <action-sheet hidden="{{hidden_actionSheet}}" bindchange="actionSheetChange">
          <button class="bt_login" open-type="getUserInfo" bindgetuserinfo="allowGetUserInfo"> 微信授权登录 </button>
          <!-- 取消按钮可以不用 -->
          <action-sheet-cancel class='cancel'>取消</action-sheet-cancel>
        </action-sheet>
    
        <!-- 已获取用户信息,显示头像和昵称 -->
        <block hidden="{{!hidden_actionSheet}}">
          <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
    
      </view>
    </view>
    

    index/index.wxss

    page {
      width: 100%;
      height: 100%;
    }
    
    .container {
      width: 100%;
      height: 100%;
    }
    
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .bt_login {
      width: 200rpx;
      height: 70rpx;
      color: #6699FF;
      border: 3rpx solid #6699FF;
      border-radius: 80rpx;
      font-size: 35rpx;
      margin: 20rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .cancel {
      font-size: 35rpx;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    

    4.效果演示

    下面是测试效果图,除了头像和昵称外,还可以获取用户的国家,城市,性别,语言等信息
    在这里插入图片描述

    展开全文
  • 前段时间微信小程序获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下 首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 微信小程序 获取用户的昵称和头像

    千次阅读 2020-08-11 18:15:49
    如果只需要展示用户头像和昵称,不获取头像地址和昵称字符串的话。可以直接用<open-data /> <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data...

    注意:

    如果只需要展示用户头像和昵称,不获取头像地址和昵称字符串的话。可以直接用<open-data />

    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userNickName"></open-data>
    

    下面说的都是需要获取头像地址和昵称字符串的方法

    方法一: wx.getUserInfo

    wx.getUserInfo需要授权后才能得到数据
    在新版本中 wx.getUserInfo 需要搭配 button 让用户主动授权

    html:
    <button wx:if="{{canIUse}}" open-type="getUserInfo">授权登录</button>
    <view wx:else>请升级微信版本</view>
    
    js:
    Page({
      data: {
        canIUse: wx.canIUse('button.open-type.getUserInfo') // 这个是兼容
      },
      onLoad: function() {
        // 查看是否授权
        wx.getSetting({
          success (res){
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称
              wx.getUserInfo({
                success: function(res) {
                  console.log(res.userInfo)
                }
              })
            }
          }
        })
      }
    

    方法二: button + bindgetuserinfo

    html:
    <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
    <view wx:else>请升级微信版本</view>
    
    js:
    Page({
      data: {
        canIUse: wx.canIUse('button.open-type.getUserInfo') // 这个是兼容
      },
      onLoad: function() {
      },
      bindGetUserInfo (e) {
        console.log(e.detail.userInfo);
      }
    })
    
    展开全文
  • 前段时间微信小程序获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下   首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 主要介绍了微信小程序wx.getUserInfo授权获取用户信息(头像昵称)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序 获取用户昵称头像

    千次阅读 2020-07-29 14:54:04
    前段时间微信小程序获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下,首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 智慧同城v4 微信小程序新接口获取用户信息 4月20后无法获取头像昵称等,直接替换前端小程序pages\mainPages\login 里面的文件
  • 微信小程序获取用户头像和昵称 (不用用户授权) 1.wxml <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data> 但是很多时候我们需要将头像作成圆形...
  • 小程序授权获取头像昵称登录 <view class="page_wrap"> <view class="logo"> <image src="../../images/logo.png"></image> </view> <view class="button"> <button ...
  • 以前 wx.getUserInfo 会弹出一个给用户...只展示用户头像昵称 不做后台数据库用 Open-data标签 可以不用用户授权直接获得头像昵称 <open-data type="userAvatarUrl"></open-data> //获取用户头像直接显示在小程序中 ...
  • 微信小程序-获取用户昵称和头像信息
  • 小程序登录获取用户头像和昵称

    千次阅读 2020-06-18 19:12:16
    获取用户信息 这个是点击登录按钮获取用户信息 <image src="{{userInfo.avatarUrl}}"></image> <view wx:if="{{userInfo.openid}}"> {{userInfo.nickName}} </view> <button wx:...
  • 获取头像昵称 {{userInfo.nickName}} {{motto}} //index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasU...
  • 微信小程序获取用户头像昵称

    千次阅读 2019-12-12 09:05:23
    获取头像昵称~
  • 小程序获取头像昵称

    千次阅读 2019-05-07 17:56:33
    小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备应用技能。 参考文档:...
  • 小程序获取用户头像和昵称

    千次阅读 2019-05-11 08:14:33
      这个获取让我纠结好一阵,小程序官方模板里面是点击一个button事件然后用户授权登录后获取的,我想要的效果是没有那个button获取。   后来查到一个方法: wxml代码: <!-- 获取用户的姓名和头像 --> &...
  • 做一款小程序,如果需要判断用户,当然...小程序前端index.wxml 获取头像昵称 {{userInfo.nickName}}{{motto}}index.js//index.js//获取应用实例const app = getApp()Page({data: {motto: 'Hello World',userInfo: ...
  • 新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像和昵称,并且只能页面产生点击事件(例如 button 上 bindtap 的回调中...
  • 这里简单说一下微信小程序获取头像昵称等信息,这里是将demo部分功能单独呈现,最后附上DEMO: 一、效果图: 这个功能比较简单就直接上代码 二、代码部分 1、.WXML代码示例 <view class="main">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,770
精华内容 2,308
关键字:

小程序获取头像和昵称