微信小程序登录注册实现

一、小程序基本配置

在开始实现微信小程序登录注册功能之前，我们需要先完成小程序的基本配置。具体步骤如下：

1、登录微信公众平台进行小程序开发，创建小程序，并且获取到AppID。

2、为小程序添加合法域名，这些域名需要在调用微信API时使用，包括登录、获取用户信息等。添加合法域名有两种方法：一种是在小程序设置中添加，另一种是在服务器配置文件中添加。

3、创建小程序登录注册页面，将页面地址添加到小程序的“app.json”文件中，使其成为小程序的子页面。

// app.json文件
{
  "pages": [
    "pages/login/login",
    "pages/index/index",
    "pages/register/register"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序登录注册",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#1296db",
    "color": "#8a8a8a",
    "borderStyle": "#e6e6e6",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
      },
      {
        "pagePath": "pages/login/login",
        "text": "登录",
      },
      {
        "pagePath": "pages/register/register",
        "text": "注册",
      }
    ]
  }
}

二、小程序登录功能实现

为了实现小程序登录功能，我们需要使用微信开发者工具提供的wx.login()接口从微信服务器获取用户临时登录凭证code。获取code之后，我们需要将code传递给服务器，在服务器端进行登录验证，通过后返回用户的信息给小程序。

1、在登录页面中使用wx.login()接口获取用户登录凭证code。

// login.js文件
Page({
  data: {
  },
  onLoad: function() {
    // 小程序启动时首先调用wx.login()获取用户登录凭证code
    wx.login({
      success: res => {
        if (res.code) {
          // 利用code传递给服务器进行登录验证
          wx.request({
            url: 'https://example.com/api/user/login',
            data: {
              code: res.code
            },
            success: function (res) {
              if (res.data.code === 0) {
                var user = res.data.data
                // 将用户信息存储到本地
                wx.setStorageSync('user', user)
              } else {
                wx.showModal({
                  title: '提示',
                  content: res.data.msg,
                  success: function (res) {
                    if (res.confirm) {
                      console.log('用户点击确定')
                    }
                  }
                })
              }
            }
          })
        }
      }
    })
  },
})

2、在服务器端进行登录验证，验证成功后返回用户信息。

// login.php文件
 0,
    'msg' => '登录成功',
    'data' => $user
  );
} else {
  $result = array(
    'code' => -1,
    'msg' => '用户不存在，请先注册',
    'data' => null
  );
}

echo json_encode($result);
?>

三、小程序注册功能实现

在实现小程序注册功能时，我们需要在小程序中创建一个注册页面，用户在该页面输入注册信息后，将用户信息传递给服务器进行注册。注册成功后，自动跳转到登录页面，用户可以使用新的账号密码进行登录。

1、创建小程序注册页面，页面布局可以参照下图：

// register.wxml文件

  
    
      
        
      
      <input placeholder="请输入您的用户名" value="{{username}}" bindinput="inputUsername">
    
    
      
        
      
      <input type="password" placeholder="请输入您的密码" value="{{password}}" bindinput="inputPassword">
    
    
      
        
      
      <input type="password" placeholder="请确认您的密码" value="{{confirmPassword}}" bindinput="inputConfirmPassword">
    
    注册
  

2、在小程序注册页面中处理用户注册输入信息，调用wx.request()接口将用户信息传递给服务器进行注册。

// register.js文件
Page({
  data: {
    username: '',
    password: '',
    confirmPassword: '',
  },
  inputUsername: function(e) {
    this.setData({
      username: e.detail.value
    })
  },
  inputPassword: function(e) {
    this.setData({
      password: e.detail.value
    })
  },
  inputConfirmPassword: function(e) {
    this.setData({
      confirmPassword: e.detail.value
    })
  },
  onRegister: function() {
    var that = this;
    if (that.data.password != that.data.confirmPassword) {
      wx.showModal({
        title: '提示',
        content: '密码不一致',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      })
      return
    }
    wx.request({
      url: 'https://example.com/api/user/register',
      data: {
        username: that.data.username,
        password: that.data.password,
      },
      success: function (res) {
        if (res.data.code === 0) {
          wx.showToast({
            title: '注册成功',
            icon: 'success'
          })
          wx.navigateTo({
            url: '/pages/login/login',
          })
        } else {
          wx.showModal({
            title: '提示',
            content: res.data.msg,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
        }
      }
    })
  }
})

3、在服务器端处理用户注册请求，将用户信息存入数据库。

// register.php文件
 0,
    'msg' => '注册成功',
    'data' => null
  );
} else {
  $result = array(
    'code' => -1,
    'msg' => '注册失败，请稍后重试',
    'data' => null
  );
}

echo json_encode($result);
?>

四、小程序获取用户信息

在用户登录成功后，我们可以调用微信开发者工具提供的wx.getUserInfo()接口获取用户的基本信息，包括昵称、头像等，并将用户信息存储到本地。

// index.js文件
Page({
  data: {
    userInfo: null
  },
  onLoad: function () {
    var user = wx.getStorageSync('user')
    if (user) {
      this.getUserInfo(user.openid)
    }
  },
  getUserInfo: function (openid) {
    var that = this;
    wx.getUserInfo({
      success: function (res) {
        wx.setStorageSync('userInfo', res.userInfo)
        that.setData({
          userInfo: res.userInfo
        })
        wx.request({
          url: 'https://example.com/api/user/saveUserInfo',
          data: {
            openid: openid,
            userInfo: res.userInfo,
          },
          success: function (res) {
          }
        })
      },
      fail: function (res) {
        wx.showModal({
          title: '提示',
          content: '获取用户信息失败，请检查权限设置',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            }
          }
        })
      }
    })
  }
})

五、小结

通过微信小程序提供的wx.login()接口，我们可以获取到用户登录凭证code，并通过调用服务器接口进行登录验证。而在实现小程序注册功能时，则需要调用wx.request()接口将用户注册信息传递给服务器进行注册。在登录成功后，我们可以使用wx.getUserInfo()接口获取用户的信息，并将其存储到本地。