微信小程序如何获取用户头像和昵称

本文介绍了微信小程序如何获取用户头像和昵称，分享给大家，具体如下：

代码user.wxml：

<view >
<view>
 <image class="avatar" src='{{userInfo.avatarUrl}}'></image>
 <view class="nickname">{{userInfo.nickName}}</view>
</view>
</view>

user.js

//sort.js
//獲取應用實例
var app = getApp
Page({

 /**
  * 页面的初始数据
  */
 data: {
  //用户个人信息
  userInfo:{
   avatarUrl:"",//用户头像
   nickName:"",//用户昵称
  }
 },
 /**
  *点击添加地址事件
  */
 add_address_fun:function(){
  wx.navigateTo({
   url: 'add_address/add_address',
  })
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that=this;
  /**
   * 获取用户信息
   */
  wx.getUserInfo({
   success:function(res){
    console.log(res);
    var avatarUrl = 'userInfo.avatarUrl';
    var nickName = 'userInfo.nickName';
    that.setData({
     [avatarUrl]: res.userInfo.avatarUrl,
     [nickName]:res.userInfo.nickName,
    })
   }
  })
 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序如何获取用户头像和昵称

    本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: <view > <view> <image class="avatar" src='{{userInfo.avatarUrl}}'></image> <view class="nickname">{{userInfo.nickName}}</view> </view> </view&g

  • 微信小程序实现获取用户信息替换用户名和头像到首页

    微信小程序实现获取用户信息替换用户名和头像到首页

    目录 一.形成空白文件 二.小程序页面路径配置 三.修改小程序页面 四.与WXML玩耍 1.插入文字 2.插入图片 3.分割代码 五.与wxss玩耍 1.处理图片 2.处理文字 3.调整布局 4.长度单位rpx(responsive pixel): 六.获取用户资料 1.完善wxml 2.结果输出到界面 3.优化程序 一.形成空白文件 1.点击打开目录 2.删除除了project.config.json(项目配置文件)以外所有文件. 3.新建“app.json” 4.接下来我们在app.js

  • 微信小程序getPhoneNumber获取用户手机号

    微信小程序getPhoneNumber获取用户手机号

     微信小程序getPhoneNumber获取用户手机号 小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"

  • 微信小程序如何获取用户信息

    最近在研究微信小程序怎么玩的.接触后发现好多的坑. 比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象.而在微信小程序中是获取不到DOM对象的.document.getElementById() 直接报错 getElementById not function 我也是醉了.不支持这个好多有趣的功能不能实现了. 言归正传,我谈下获取用户信息的感想. 有两种获取用户信息的方案. 1.不包含敏感信息openId 的json对象(包含:nickname.av

  • 微信小程序实现获取用户信息并存入数据库操作示例

    本文实例讲述了微信小程序实现获取用户信息并存入数据库操作.分享给大家供大家参考,具体如下: 微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js Page({ data: { nickName: "微信账号登录", avatarUrl:"./user-unlogin.png", }, onLoad: function () { var that = this; var nic

  • 在微信小程序中获取用户位置的详细过程

    在微信小程序中获取用户位置的详细过程

    目录 前言 wx.getLocation 腾讯位置服务 总结 前言 最近在学习微信小程序,在学习的过程中,有很多好玩的 API,经常点外卖的同学可能在小程序中遇到过,比如:某团.某了么都是有显示当前用户位置信息的,那么今天给大家介绍如何获取当前用户位置信息,听上去很不错,其实实践起来也不是很难. wx.getLocation 首先,我们需要来认识一下 wx.getLocation 这个 API 方法,我们先看看 微信官方文档 中是怎么说的 看我划红线的地方就可以了,文档中明确的表示这个 API

  • 微信小程序授权获取用户详细信息openid的实例详解

    微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序如何获取用户手机号

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i

  • 微信小程序如何获取用户收货地址

    获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并且点击确定授权. 情况二,用户点击取消授权后,再次获取授权 流程: (代码逻辑整理) 1.点击事件触发函数,获取用户当前设置 2.根据用户当前设置中的用户授权结果,判断是否包含收货地址授权 3.如果包含收货地址授权并且没有取消过收货地址授权,直接调用wx.chooseAddress(),获取用户收货地址. 4.取消过收货地址授权,调用wx.openSetting(),调起客户端小程序设置

  • 小程序最新获取用户昵称和头像的方法总结

    前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下 首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统的wx.getUserInfo目前还是能用的,但是在使用时候会有官方log提醒你,这个方法需要升级. 然后就是官方提供的最新方法Open-data标签,使用这个标签可以不用用户授权直接获得头像和昵称 例子: <open-data type="userAvatarUrl"><

随机推荐