基于小程序点击button，获取用户授权信息跟授权弹窗

//WXML
<!-- 外层视图背景 -->
<view class='cont'>
<!-- 头像 -->
<image class='list_img' src='{{image}}'></image>
</view> 
<!-- button外层 -->
<view class='button'>
<!-- button按钮获取用户信息授权 -->
 <button class='btn_sub' bindgetuserinfo='btn_sub' open-type="getUserInfo">点击获取头像昵称</button>
</view>

/* pages/button/button.wxss */
/* 背景视图 */
.cont{
  position: relative;
  width: 100%;
  height: 350rpx;
  text-align: center;
  background-color: beige;
}
/* 头像 */
.list_img{
  position: relative;
  top: 25%;
  width: 144rpx;
  height: 144rpx;
  border-radius: 50%;
}
/* button外层视图 */
.button{
  position: relative;
  text-align: center;
  top: 100rpx;
  width: 100%;
  height: 100rpx;
}
/* 按钮居中 */
.btn_sub{
  width: 80%;
  height: 100rpx;
  background-color: aquamarine;
  border: 0rpx;
}

 

// pages/button/button.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 默认头像
  image:"../../image/list_img.png"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  // 获取授权用户信息
  btn_sub:function(res){
    // 声明一个变量接收用户授权信息
    var userinfos=res.detail.userInfo;
    // 判断是否授权  true 替换微信用户头像
    if(userinfos!=undefined){

      this.setData({
        image: userinfos.avatarUrl
      })
    }else{
      // false 默认头像
      this.setData({
        image: "../../image/list_img.png"
      })
    }
  },

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

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

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

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

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

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

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