微信小程序使用微信昵称登录

获取微信用户昵称和头像是小程序中常见的需求，可以通过调用微信提供的API实现。具体步骤如下：

1. 在小程序中，使用`wx.getUserInfo`方法获取用户信息，该方法返回一个对象，包含用户的昵称、头像、性别等信息。

wx.getUserInfo({
  success: function(res) {
    console.log(res.userInfo.nickName); // 输出用户昵称
    console.log(res.userInfo.avatarUrl); // 输出用户头像
  }
})

2. 在小程序中，使用`button`组件的`open-type`属性设置为`getUserInfo`，当用户点击该按钮时，会弹出授权窗口，用户可以选择授权或拒绝授权。如果用户授权，小程序就可以获取用户信息。

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>

Page({
  getUserInfo: function(e) {
    console.log(e.detail.userInfo.nickName); // 输出用户昵称
    console.log(e.detail.userInfo.avatarUrl); // 输出用户头像
 }
})

至于在微信开发者工具中实现类似于引用中的登录界面，可以通过在页面中添加`button`组件，并设置`open-type`属性为`getUserInfo`，然后在`onLoad`生命周期函数中判断用户是否已经授权，如果已经授权，则直接获取用户信息并跳转到主页面，否则显示登录按钮。具体实现可以参考以下代码：

<!-- index.wxml -->
<view class="container">
  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{!hasUserInfo}}">微信登录</button>
  <view wx:else>
    <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
    <text class="nickname">{{userInfo.nickName}}</text>
  </view>
</view>

// index.js
Page({
  data: {
    hasUserInfo: false,
    userInfo: {}
  },
  onLoad: function () {
    var that = this;
    wx.getUserInfo({
      success: function(res) {
        that.setData({
          hasUserInfo: true,
          userInfo: res.userInfo
        })
      }
    })
  },
  getUserInfo: function(e) {
    this.setData({
      hasUserInfo: true,
      userInfo: e.detail.userInfo
    })
  }
})