微信小程序获取用户信息

为了提高用户对小程序安全的可信度，一般要在用户的操作下获取用户信息，而不是在用户刚一进入小程序小程序就自动获取了用户信息

获取前的简洁页面

获取后的简洁界面

"获取用户信息"按钮（有open-type="getUserInfo"属性）点击会弹出一个窗口，询问用户允许还是拒绝获取用户信息，并通过给按钮绑定事件（bindgetuserinfo=“haddleGetUserInfo”）获取用户是否允许，若允许，则进行wx.getUserInfo()获取用户信息，将获取的新的信息更（setData）换掉data里旧的信息，同时将按钮设为display：none

弹出的窗口：

废话不多数上代码
代码展示：

wxml：

<view class="container">
  <image src="{{userInfo.avatarUrl}}"></image>
  <button bindgetuserinfo="haddleGetUserInfo" class="getusername" open-type="getUserInfo" style='display:{{attention ? "block" : "none"}}'>获取用户信息</button>
  <text>Hello{{userInfo.nickName}}</text>
  <button class="btn" >开启小程序之旅</button>
</view>

wxss:

.container{
  display:flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
image{
  height:200rpx;
  width:200rpx;
  border-radius: 100rpx;
  margin:200rpx 0;
}
text{
  margin-bottom: 100rpx;
}
.btn{
  background-color: aqua;
}
.getusername{
  position: absolute;
  top:250rpx;
  left:200rpx;
}

js:

// pages/index/index.js
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getuserinfo();
  },
  getuserinfo(){
    //判断用户是否授权
    wx.getSetting({
      success:(data)=>{
        if(data.authSetting['scope.userInfo']){
          this.setData({
            attention:false
          });
        }else{
         this.setData({
           attention:true
         });
        }
      }
    })
     //获取用户登录的信息
     wx.getUserInfo({
       success:(data)=>{
         this.setData({
           userInfo:data.userInfo
         })
       }
     })
  },
  haddleGetUserInfo(data){
    //判断用户点击是否允许
    if(data.detail.rawData){
      //用户点击允许
      this.getuserinfo();
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})