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


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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JavaScript 装逼指南(js另类写法)
May 10 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
Cakephp 执行主要流程
2010/03/24 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php微信开发自定义菜单
2016/08/27 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
事业单位公务员的职业生涯规划
2014/01/15 职场文书
法制宣传标语
2014/06/23 职场文书
代理人委托书
2014/08/01 职场文书
付款委托书范本
2014/10/05 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Hive常用日期格式转换语法
2022/06/25 数据库