微信小程序实现登录获取头像昵称

微信小程序如何来获取用户头像昵称

大家一定对下面这个图不陌生吧，我们在进入小程序之前，都会遇见类似这样的情况，那么这个是怎么用微信开发者工具实现的呢？

要求

1.首先，我们打开微信开发者工具，新建一个项目，并打开，比如说我新建的是page。

2.当打开开发者工具时，默认会生成一下文件：

我们在app.json这个文件夹中写配置，我们要实现当程序运行时首先进入到获取用户信息的界面，然后当用户同意时进入到下一个界面

3.所以，相信你已经猜出来了，我们要将这个代码写在index文件里面，下面我们就在index这个文件夹里面写获取用户的头像和昵称的代码了。

4.打开index这个文件，我们在index这个文件夹里面，有我们事先创好的目录，它包含：index.js和index.wxml和index.wxss三个文件

4.首先我们要写这个获取用户头像的样式，并且将用户的头像显示出来，如何实现将用户的头像显示出来呢，我们将用到微信小程序里面的“open-data”这个标签

下面我把我写好的index.wxml代码展现一下：

讲解：首先我们将所有的内容写在一个view标签中并用if:{{canIuse}}的形式来判断该页面是否可以显示
，下面展示一下index.json文件中的代码。

 data: {
       canIUse: wx.canIUse('button.open-type'), //判断button下的open.type属性是在当前版本否支持
       isHide:false
  },

“wx.canIUse”这的目的就是要判断button下的open-type属性在当前微信版本支持如果支持的话，其他view标签也可以显示出来。

wxss代码：

.header {
  position: relative;
  margin: 90rpx 0rpx 90rpx 50rpx;
  width: 650rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;     /*居中对齐弹性盒子当中的各项元素*/
  border-bottom: 1px solid #ccc;
}
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

当我们把这些都布局好了之后，想一下，当用户已经用了这个小程序，并且已经获取到他的基本信息了，下次登录还需要获取他的信息吗？肯定不需要了，所以我们要在onLoad:function(options)（也是就是程序打开的时候首先运行的函数中）：

 onLoad: function (options) {
        wx.getSetting({     //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
          success: function(res)              //返回成功时
          {
            if(res.authSetting['scope.userInfo'])  //授权用户信息
            {
            wx.getUserInfo({              //获取用户的信息成功后并打印在控制台
              success:function(res){
                console.log(res.userInfo);
              }
            });
            }
          }
          
        })
  },

wx.getsetting 用来获取用户当前的设置（用户已经登录）

那么，如果用户没有授权是不是需要授权登录呢？
我们上面index.wxml中有定义一个bindgetUserInfo的函数所以下面这个函数中我们要写，如果用户没有授权需要进行交互，判断用户是否授权：

 bindGetUserInfo:function(e)     //当用户点击授权登录按钮触发 bindGetUserInfo函数
  {
    if(e.detail.userInfo)      //触发后返回到detail中，detail调用userInfo获取用户信息
    {
      wx.switchTab({              //获取完用户信息进入的界面，我这边写的时classic这个界面中
        url: '/pages/classic/classic',
      });
    }
    else{
        wx.showModal({           //如果用户选择拒绝,会提示用户是否返回去授权
          title: '提示',
          content: '您选择了拒绝您将无法进入小程序当中',
          showCancel:false,
          confirmText:'返回授权',
          success:function(res)   
          {
             if(res.confirm)
             {
               console.log("点击了授权登录")
             }
          }
        });
    }
  },

感谢您的观看
望大家多多支持，共同学习一些编程技巧