微信小程式的登入介面實現，供大家參考，具體內容如下

<view class="container">
  <view class="wrapper">
    <view class="left-top-sign">LOGIN</view>
    <view class="welcome">
      歡迎回來！
    </view>
    <view class="input-content">
      <view class="input-item">
        <text class="tit">手機號碼</text>
        <input type="text" placeholder="請輸入手機號碼" id='phone' data-type='phone' bindinput='handerInput' />
      </view>
      <view class="input-item">
        <text class="tit">密碼</text>
        <input type="password" placeholder="請輸入密碼" id='password' data-type='password' bindinput='handerInput' />
      </view>
    </view>
    <button class="confirm-btn"&g
 
程式設計客棧t;登入</button>
    <view class="forget-section">
      忘記密碼?
    </view>
  </view>
  <view class="register-section">
    還沒有賬號?
    <text>馬上註冊</text>
  </view>
</view>

最基本的表單提交。

data: {
    phone: '',//手機號
    password: ''  //密碼
  },/**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },handerwww.cppcns.com
 
Input(event) {
    //let type = event.currentTarget.dataset.type;
    let type = event.currentTarget.id;
    console.log(event);
    this.setData({
      [type]: event.detail.value
   })
  },/**

雙向繫結的實現，利用bindinput 事件，可用id或者dataset 唯一確定資料。

id可傳入一個數據，dataset可傳入多個數據。

微信小程式的互動：訊息顯示框。(官方連結)

對於登入按鈕繫結一個點選回撥函式。

//html
<button class="confirm-btn" bindtap="login">登入</button>

//js
login() {
    let { phone,password } = this.data;
    console.log(password);
    /**
     * 手機號驗證
     * 手機號程式設計客棧為空
     * 手機號式錯誤
     * 手機號正確
     */
    if (!phone) {
      wx.showToast(www.cppcns.com{
        title: '手機號不能為空',icon: 'none'
      })
      return;
    }
    //定義手機號的正則表示式
    let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
    if (!phoneReg.test(phone)) {
      wx.showToast({
        title: '手機號格式錯誤',icon: 'none'
      })
      return;
    }

    if (!password) {
      wx.showToast({
        title: '密碼不能為空',icon: 'none'
      })
      return;
    }

    wx.showToast({
      title: '前端驗證通過'

    })

後端驗證，呼叫介面，通過響應的狀態碼來返回給使用者登入的資訊。

let result = await request('/login/cellphone',{ phone,password });
    if (result.code === 200) {
      wx.showToast({
        title: '登陸成功',})
    }
    else if (result.code === 400) {
      wx.showToast({
        title: '手機號錯誤',icon: 'none'
      })
    }
    else if (result.code === 502) {
      wx.showToast({
        title: '密碼錯誤',ZJppVE        icon: 'none'
      })
    }
    else {
      wx.showToast({
        title: '登入失敗,請重新登入',icon: 'none'
      })
    }
},

個人中心點選頭像，跳轉登入介面，登入成功後將使用者個人資訊資料快取（使用setStorageSync，和getStorageSync 方法），然後使用switchTab 跳轉到tabbar下的個人中心頁，然後將獲得的快取資料儲存到js的data中，注意json格式的轉化，最後在

html裡三元運算特判一下。

<view class="user-info-box" bindtap='toLogin'>
      <view class="portrait-box">
        <image class="portrait"
          src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
      </view>
      <view class="info-box">
        <text class="username">{{userInfo.nickname?userInfo.nickname: '遊客'}}</text>
      </view>
</view>

//login.js
if (result.code === 200) {
      wx.showToast({
        title: '登陸成功',})

      wx.setStorageSync('userInfo',JSON.stringify(result.profile));

      wx.switchTab({
        url: '/pages/personal/personal'
      })
    }
// personal.js
onLoad: function (options) {

    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        userInfo: JSON.parse(userInfo)
      })
    }

  },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。