微信小程序登錄註冊實現

一、小程序基本配置

在開始實現微信小程序登錄註冊功能之前，我們需要先完成小程序的基本配置。具體步驟如下：

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()接口獲取用戶的信息，並將其存儲到本地。