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


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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
织梦模板标记简介
2007/03/11 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
js的写法基础分析
2011/01/17 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
巧用canvas
2017/01/21 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
关于爱情的广播稿
2014/01/16 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
中学生逃课检讨书
2015/02/17 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL