微信小程序-获取用户信息

页面index.wxml

<!--pages/index/index.wxml-->
<view class='indexContainer'>
  <view class='header'style='display:{{isShow?"block":"none"}}'>
    <image src='/images/index/cart.jpg'></image>
  </view>

  <view class='content'style='display:{{isShow?"block":"none"}}'>
    <view>申请获取以下权限</view>
    <text>获得你的公开信息(昵称，头像等)</text>
  </view>

  <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="handlerGetUserInfo" style='display:{{isShow?"block":"none"}}'>
    授权登录
  </button>

  <image class='avatar' src='{{userInfo.avatarUrl}}' style='display:{{isShow?"none":"block"}}'></image>
  <text style='display:{{isShow?"none":"block"}}' class='userName'>{{userInfo.nickName}}</text>
  <view style='display:{{isShow?"none":"block"}}'  class='goStudy'>
    <text>开启小程序之旅</text>
  </view>

</view>

用isShow来动态控制视图容器的显示与隐藏

没有授权前是上图这个样子的

授权后

index.js
下面js中使用的箭头函数是为了让this指向当前页面实例对象

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    isShow:true
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getUserInfo();
  },
  getUserInfo(){
    //判断用户是否授权了
    wx.getSetting({
      success: (data) => {
        if (data.authSetting['scope.userInfo']) {
          // console.log("授权了")
          this.setData({
            isShow: false
          })
        } else {
          // 没有授权
          this.setData({
            isShow: true
          })
        }
      }
    })
    //获取用户登录的信息
    wx.getUserInfo({
      success: (data) => {
        //更新data中的userInfo
        this.setData({
          userInfo: data.userInfo
        })
      },
      fail: () => {
        console.log("获取用户信息失败");
      }

    })
  },
  //open-type='getUserInfo'按钮的回调
  handlerGetUserInfo(data){
    //如果用户按的是允许
    if (data.detail.rawData){
      this.getUserInfo();
    }
  },

index.wxss

/* pages/index/index.wxss */
page{
  height: 100%;
  background: rgb(252, 252, 252);
}
.indexContainer{
  display: flex;
  /* 主轴变为纵向 */
  flex-direction: column;
  align-items: center;

}
.avatar{
  /* overflow:hidden;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0; */
  overflow:hidden;
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  margin-top: 100rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);

}
.userName{
  font-size: 32rpx;
  /* font-weight:400是正常的字体,往上是加粗,往下是变细 */
  font-weight: bold;
  margin: 100rpx 0;
}
.goStudy{
  width:260rpx;
  height: 80rpx;
  margin-top: 200rpx;
  font-size: 28rpx;
  border: 1rpx solid #999;
  border-radius: 50rpx;
  text-align: center;
  line-height: 80rpx;
}

.header {
    margin: 90rpx 50rpx 90rpx 50rpx;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}

.header image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
}

.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}

.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}

.bottom {
  width: 600rpx;
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}