精华内容
下载资源
问答
  • 主要介绍了微信小程序如何获取用户头像和昵称,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序获取头像地址

    千次阅读 2020-11-02 11:42:49
    微信小程序获取头像地址获取用户信息开发接口 wx.getUserInfo接口参数说明:微信文档地址: 获取用户信息开发接口 wx.getUserInfo 下面展示一些 内联代码片。 // 必须是在用户已经授权的情况下调用 wx.getUserInfo({...

    获取用户信息开发接口 wx.getUserInfo

    下面展示一些 内联代码片

    // 必须是在用户已经授权的情况下调用
    wx.getUserInfo({
      success: function(res) {
        var userInfo = res.userInfo
        var nickName = userInfo.nickName
        var avatarUrl = userInfo.avatarUrl //当前用户头像地址
        var gender = userInfo.gender //性别 0:未知、1:男、2:女
        var province = userInfo.province
        var city = userInfo.city
        var country = userInfo.country
      }
    })
    
    var avatarUrl = userInfo.avatarUrl //当前用户头像地址
    

    接口参数说明:

    string avatarUrl

    用户头像图片的 URL。URL 最后一个数值代表正方形头像大小(有 0、46、64、96、132 数值可选,0 代表 640x640 的正方形头像,46 表示 46x46 的正方形头像,剩余数值以此类推。默认132),用户没有头像时该项为空。若用户更换头像,原有头像 URL 将失效。

    微信文档地址:

    链接: 微信小程序获取用户开放接口.

    展开全文
  • 1、绑定按钮 <button class="weiBtn" open-type="getUserInfo" ...微信登录</button> 2、获取用户信息 getlogin: function(e) { if (e.detail.userInfo) { this.setData({ usertx: e.detail.userInfo.av

    1、绑定按钮

     <button class="weiBtn" open-type="getUserInfo" bindgetuserinfo="getlogin" bindtap="tozhangLogin">微信登录</button>
    

    2、获取用户信息

     getlogin: function(e) {
        if (e.detail.userInfo) {
            this.setData({
              usertx: e.detail.userInfo.avatarUrl
            })
        }
    },
    

    3、wx.login 获取code、根据code获取openID

     wx.login({
          //获取code
          success: function (res) {
            var code = res.code; //返回code
            console.log(code);
            var appId = '。。。';//微信小程序AppID
            var secret = '。。。';//可在微信开发设置根据二维码获取
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+appId+'&secret='+secret+'&js_code='+code+'&grant_type=authorization_code',
              data: {},
              header: { 
                'content-type': 'json'
              },   
              success: function (res) {
                var openid = res.data.openid //返回openid
              }
            })
          }
        })
    

    注:代码仅供参考,如有不对,请留言。
    标注:微信一键登录只能测试使用、微信平台子域名暂不支持配置、可使用后台服务获取openID

    展开全文
  • ]) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function (res) { // console.log(res.userInfo) that.info(res.userInfo) } }) } } }) }, // 处理获取的头像信息 info: ...

    1


    <view class='my_head'>      <!-- <image class='my_head_img' src='/image/head.png'></image> -->      <image class='my_head_img' src='{{user_img}}'></image>    </view>    <view class='my_head_name'>      {{user_name}}    </view>复制代码

    2


    Page({
      /**   * 页面的初始数据   */  data: {    canIUse: wx.canIUse('button.open-type.getUserInfo'),    'user_name': "",    'user_img': "",  },
      /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {    var that = this;    // 查看是否授权    wx.getSetting({      success: function(res) {        if (res.authSetting['scope.userInfo']) {          // 已经授权,可以直接调用 getUserInfo 获取头像昵称          wx.getUserInfo({            success: function(res) {              // console.log(res.userInfo)              that.info(res.userInfo)            }          })        }      }    })  },
      // 处理获取的头像信息  info: function (res) {    console.log(res)    this.setData({      user_name: res.nickName,      user_img: res.avatarUrl,    })  },})复制代码


    展开全文
  • 小程序中,用户的昵称和头像如果只是用来展示,而非用于其它用途,可以直接拿到进行展示: 1.只是用来展示 (1)wxml &lt;view style='margin:10rpx auto;text-align:center'&gt; 头像 &lt;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)对于有些需要通过用户授权的部分,必须通过按钮来实现,需要授权的参照官网

    展开全文
  • -- 获取微信头像和名字 --> <view class="b1 float"> <view class="head float"> <open-data type="userAvatarUrl"></open-data> </view> <view class="name float"> &...
  • // An highlighted block wx.showModal({ title: '温馨提示', content: '正在请求您的个人信息', success(res) { if (res.confirm) { wx.getUserProfile({ desc: "获取你的昵称、头像、地区及性别", success: res =...
  • 微信小程序获取用户头像和昵称 (不用用户授权) 1.wxml <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data> 但是很多时候我们需要将头像作成圆形...
  • wxml文件: wxss文件: .header { border-radius: 50%; overflow: hidden; width:200rpx; height: 200rpx; position: relative; background: pink;... }, 它可以自动获取用户的昵称和头像,并设置为圆形
  • 微信小程序一键获取用户头像、昵称等基本信息微信小程序一键获取用户头像、昵称等基本信息需求描述功能实现1.操作流程2.目录结构3.关键代码4.效果演示 微信小程序一键获取用户头像、昵称等基本信息 系统:Win10 ...
  • 微信小程序登录 获取头像不显示

    千次阅读 2021-04-08 20:04:24
    1.wxml <view class="container"> <view class="userinfo"> <block wx:if="{{!hasUserInfo}}">... 获取头像昵称 </button> </block> <block wx:else> <image b
  • 微信小程序getUserInfo文档截图 微信小程序getUserInfo文档 这里获取到的avatarUrl是...
  • 微信小程序 获取用户昵称、头像

    千次阅读 2020-07-29 14:54:04
    前段时间微信小程序获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下,首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx....
  • 这里简单说一下微信小程序获取头像,昵称等信息,这里是将demo部分功能单独呈现,最后附上DEMO: 一、效果图: 这个功能比较简单就直接上代码 二、代码部分 1、.WXML代码示例 <view class="main">...
  • 1、可以调用wx.getUserProfile来获取用户的昵称、头像(地址)、地区及性别。但是需要通过按钮事件触发,在showModal弹窗中用户点击确定后才能获取。 WXML: <view> <button class="login_btn" bindtap=...
  • 微信小程序 获取用户的昵称和头像

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

    千次阅读 2019-12-12 09:05:23
    获取头像、昵称~
  • 2、根据userInfo.avatarUrl获取用户头像图片的 URL,这个url在小程序里展示可以,但是不能保存图片。 3、通过wx.getImageInfo()方法获取图片信息 4、通过wx.uploadFile()方法上传图片到服务器 //获取图片信息 ...
  • 使用getUserProfile接口获取用户信息 ...获取头像</u-button> 调用getUserProfile获取nickName和avatarUrl。 async getUserInfo() { uni.getUserProfile({ desc: "登录", success: (res) => { co
  • 本篇文章阐述了微信小程序是如何获取授权登录微信的,并且将显示微信头像
  • 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo获取用户个人信息,根据官方访问,新增getUserProfile接口作为获取用户信息。 wxml代码 <viewclass="container"> <imagesrc="{{...
  • 微信小程序实现登录获取头像昵称

    千次阅读 2020-04-21 00:17:39
    微信小程序获取用户头像昵称 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作...
  • 获取用户头像昵称信息 功能比较简单,这里直接上代码: .js onGetUserInfo: function(e) { if (!this.data.logged && e.detail.userInfo) { console.log('==允许',this.data.logged) this.setData({...
  • 主要介绍了微信小程序-获取用户地理位置名称(无须用户授权)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序获取微信头像和名称

    千次阅读 2020-10-14 12:13:43
    微信小程序开发过程中,个人中心通常都需要实现微信头像和微信名称展示,微信开发已经有封装好的组件,直接在你需要的地方引入代码块就行,type数据类型需要开发过程中按需引入,微信官方文档: <open-data ...
  • 微信小程序获取用户头像和昵称

    万次阅读 2018-01-27 20:51:00
    代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var app = getApp Page({ /** * 页面的初始数据 */ data: { //用户个人信息 ... avatarUrl:"",//用户头像 nickNa
  • 传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,但是在使用时候会有官方log提醒你,这个方法需要升级。... //获取用户头像直接显示在小程序中 <open-data type="userNickName" la...
  • 微信小程序获取用户微信的头像,放大查看时图片是模糊不清的。这是因为在获取头像数据的时候,我们拿的不是高清图。 微信小程序开发文档的相关说明(链接): 因为前端调用微信小程序的getUserInfo拿到的头像默认是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,915
精华内容 3,566
关键字:

微信小程序获取头像

微信小程序 订阅