微信小程序實現登錄界面

更新時間：2021年04月23日 09:43:01 作者：Harris-H

這篇文章主要為大家詳細介紹了微信小程序實現登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序的登錄界面實現，供大家參考，具體內容如下

<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">登錄</button>
    <view class="forget-section">
      忘記密碼?
    </view>
  </view>
  <view class="register-section">
    還沒有賬號?
    <text>馬上注冊</text>
  </view>
</view>

最基本的表單提交。

data: {
    phone: '', //手機號
    password: ''  //密碼
  },

  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

  },
  handerInput(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({
        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: '前端驗證通過'

    })

后端驗證，調用接口，通過響應的狀態(tài)碼來返回給用戶登錄的信息。

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: '密碼錯誤',
        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)
      })
    }

  },