微信小程序?qū)崿F(xiàn)登錄界面

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

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序的登錄界面實(shí)現(xiàn)，供大家參考，具體內(nèi)容如下

<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">手機(jī)號(hào)碼</text>
        <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" id='phone' data-type='phone' bindinput='handerInput' />
      </view>
      <view class="input-item">
        <text class="tit">密碼</text>
        <input type="password" placeholder="請(qǐng)輸入密碼" id='password' data-type='password' bindinput='handerInput' />
      </view>
    </view>
    <button class="confirm-btn">登錄</button>
    <view class="forget-section">
      忘記密碼?
    </view>
  </view>
  <view class="register-section">
    還沒有賬號(hào)?
    <text>馬上注冊(cè)</text>
  </view>
</view>

最基本的表單提交。

data: {
    phone: '', //手機(jī)號(hào)
    password: ''  //密碼
  },

  /**
   * 生命周期函數(shù)--監(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
   })
  },
  /**

雙向綁定的實(shí)現(xiàn)，利用bindinput 事件，可用id或者dataset 唯一確定數(shù)據(jù)。

id可傳入一個(gè)數(shù)據(jù)，dataset可傳入多個(gè)數(shù)據(jù)。

微信小程序的交互：消息顯示框。(官方鏈接)

對(duì)于登錄按鈕綁定一個(gè)點(diǎn)擊回調(diào)函數(shù)。

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

//js
login() {
    let { phone, password } = this.data;
    console.log(password);
    /**
     * 手機(jī)號(hào)驗(yàn)證
     * 手機(jī)號(hào)為空
     * 手機(jī)號(hào)式錯(cuò)誤
     * 手機(jī)號(hào)正確
     */
    if (!phone) {
      wx.showToast({
        title: '手機(jī)號(hào)不能為空',
        icon: 'none'
      })
      return;
    }
    //定義手機(jī)號(hào)的正則表達(dá)式
    let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
    if (!phoneReg.test(phone)) {
      wx.showToast({
        title: '手機(jī)號(hào)格式錯(cuò)誤',
        icon: 'none'
      })
      return;
    }

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

    wx.showToast({
      title: '前端驗(yàn)證通過'

    })

后端驗(yàn)證，調(diào)用接口，通過響應(yīng)的狀態(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: '手機(jī)號(hào)錯(cuò)誤',
        icon: 'none'
      })
    }
    else if (result.code === 502) {
      wx.showToast({
        title: '密碼錯(cuò)誤',
        icon: 'none'
      })
    }
    else {
      wx.showToast({
        title: '登錄失敗,請(qǐng)重新登錄',
        icon: 'none'
      })
    }
},

個(gè)人中心點(diǎn)擊頭像，跳轉(zhuǎn)登錄界面，登錄成功后將用戶個(gè)人信息數(shù)據(jù)緩存（使用setStorageSync，和getStorageSync 方法），然后使用switchTab 跳轉(zhuǎn)到tabbar下的個(gè)人中心頁，然后將獲得的緩存數(shù)據(jù)儲(chǔ)存到j(luò)s的data中，注意json格式的轉(zhuǎn)化，最后在

html里三元運(yùn)算特判一下。

<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)
      })
    }

  },