1. 程式人生 > >微信小程式獲取使用者頭像和暱稱

微信小程式獲取使用者頭像和暱稱

程式碼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 () {

  }
})