微信小程序实战之登录页面制作(5)

下面是详细的攻略：

微信小程序实战之登录页面制作(5)

1. 登录验证和获取用户信息

首先，在 login.js 文件中，我们需要编写登录验证和获取用户信息的代码。具体步骤如下：

• 定义全局变量 app，用于保存小程序的实例
• 在 onLoad 函数中，获取小程序的实例，并将其保存到全局变量 app 中
• 在 getUserInfo 函数中，调用 wx.getUserInfo 方法获取用户信息，并将其保存到全局变量 userInfo 中
• 在 login 函数中，调用 wx.login 方法获取登录凭证，并将其发送到后端进行验证。验证成功后，将用户信息保存到全局变量 userInfo 中，并跳转到首页

示例代码：

const app = getApp();

Page({
  onLoad: function () {
    // 获取小程序实例和全局数据
    this.app = app;
    this.globalData = app.globalData;

    // 获取用户信息
    this.getUserInfo();
  },

  // 获取用户信息
  getUserInfo: function () {
    wx.getUserInfo({
      success: res => {
        // 保存用户信息到全局变量
        this.globalData.userInfo = res.userInfo;
      },
      fail: res => {
        wx.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        });
      }
    });
  },

  // 登录
  login: function () {
    // 获取登录凭证
    wx.login({
      success: res => {
        // 发送凭证到后端进行验证
        wx.request({
          url: 'http://localhost:3000/login',
          method: 'POST',
          data: {
            code: res.code
          },
          success: res => {
            if (res.data.code === 0) {
              // 验证成功，保存用户信息到全局变量
              this.globalData.userInfo = res.data.userInfo;

              // 跳转到首页
              wx.redirectTo({
                url: '../index/index',
              });
            } else {
              wx.showToast({
                title: '登录失败',
                icon: 'none'
              });
            }
          },
          fail: res => {
            wx.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        });
      },
      fail: res => {
        wx.showToast({
          title: '登录失败',
          icon: 'none'
        });
      }
    });
  }
});

2. 修改首页代码

当用户登录成功之后，需要将用户的头像和昵称显示在首页上。因此，在 index.wxml 文件中，需要添加头像和昵称的显示代码。具体步骤如下：

• 在 <view class="user-info"> 元素中，添加一个 <image> 元素，用于显示用户头像。图片路径从全局变量 userInfo 中获取
• 在 <view class="user-info"> 元素中，添加一个 <text> 元素，用于显示用户昵称。昵称从全局变量 userInfo 中获取

示例代码：

<view class="container">
  <view class="user-info">
    <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
    <text class="nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="content">
    ...
  </view>
</view>

示例说明

• 示例一：如果用户未登录或登录失败，点击小程序的“我的”按钮后，跳转到登录页面。在登录页面输入错误的用户名和密码，点击“登录”按钮后，提示用户登录失败。
• 示例二：用户登录成功后，跳转到首页。在首页上，可以看到用户的头像和昵称显示在页面的顶部。