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


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 相关文章推荐
用jquery来定位
Feb 20 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
javascript常用的方法分享
Jul 01 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
微信小程序使用蓝牙小插件
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程序时遇到的三个问题
2012/01/17 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP实现小偷程序实例
2016/10/31 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Django和Flask框架优缺点对比
2019/10/24 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
详解pandas映射与数据转换
2021/01/22 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
综治目标管理责任书
2015/05/11 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
redis protocol通信协议及使用详解
2022/07/15 Redis