小程序获取用户信息

getUserInfo

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取信息</button>
<block wx:if="{{userInfo}}">
  <text>{{userInfo.nickName}}</text>
  <text>{{userInfo.gender}}</text>
</block>
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getUserInfo: function(e) {
    if(e.detail.userInfo) {
      console.log(e.detail.userInfo);
      this.setData({
        userInfo: e.detail.userInfo
      })
    }
  }
})

GetUserProfile

<button bindtap="getUserInfo">获取信息</button>
<block wx:if="{{userInfo}}">
  <text>{{userInfo.nickName}}</text>
  <text>{{userInfo.gender}}</text>
</block>
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getUserInfo: function() {
    wx.getUserProfile({
      desc: "用于完善用户体验",
      success: res => {
        console.log(res.userInfo);
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  }
})

小程序获取用户信息

上一篇:HTML5 Canvas


下一篇:前端路由原理之 hash 模式和 history 模式