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


Posted in Javascript onSeptember 23, 2019

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

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

代码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 () {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的js表单验证函数
Oct 28 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
微信小程序使用蓝牙小插件
Sep 23 #Javascript
微信小程序实现蓝牙打印
Sep 23 #Javascript
微信接入之获取用户头像的方法步骤
Sep 23 #Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 #Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 #Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 #Javascript
ES10的13个新特性示例(小结)
Sep 23 #Javascript
You might like
php连接mysql数据库代码
2009/03/10 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
django 按时间范围查询数据库实例代码
2018/02/11 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python实现扫雷小游戏
2020/04/24 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
公共事业管理本科生求职信
2013/10/07 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
采购经理岗位职责
2014/02/16 职场文书
初三新学期计划书
2014/05/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
MySql开发之自动同步表结构
2021/05/28 MySQL
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
MYSQL常用函数介绍
2022/05/05 MySQL
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS