微信小程序如何實現登錄頁面

這篇文章主要講解了“微信小程序如何實現登錄頁面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序如何實現登錄頁面”吧！

1. 在首頁中加入一個彈窗作為登錄窗口，效果如下圖：

(1)index.wxml

登錄窗口代碼如下：

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{!hiddenmodalput}}"></view>
<view class="modal-dialog" wx:if="{{!hiddenmodalput}}" catchtouchmove="preventTouchMove">
  <view class="modal-title">{{tip}}</view>
  <view class="modal-content">
    <view class="modal-input">
      <input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputUsername" class="input" placeholder="用戶名" value="{{username}}">
      </input>
    </view>
    <view class="modal-input">
      <input placeholder-class="input-holder" type="text" maxlength="20" bindinput="inputPassword" class="input" placeholder="密碼" value="{{password}}">
      </input>
    </view>
  </view>
  <view class="modal-footer">
    <navigator class="btn-cancel" target="miniProgram" open-type="exit">
      退出
    </navigator>
    <!-- <view class="btn-cancel" bindtap="cancel" data-status="cancel">取消</view> -->
    <view class="btn-confirm" bindtap="confirm" data-status="confirm">確定</view>
  </view>
</view>

(2)index.js

在onload方法中判斷當前的登錄狀態，這里我用了簡單的 getStorage 來保存登錄信息，hiddenmodalput控制登錄窗口是否顯示，這樣就可以實現簡單的登錄頁面，hideTabBar是用來隱藏底部tab欄按鍵。

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    wx.getStorage({
      key: 'username',
      success (res) {
        console.log(res.data);
        that.setData({
          hiddenmodalput:true,
        })
      },
      fail (res) {
        console.log(res);
        that.setData({
          hiddenmodalput:false,
        })
        wx.hideTabBar({
          animation: true,
          success: (res) => {},
          fail: (res) => {},
          complete: (res) => {},
        })
      }
    })
  },

2.新建一個登錄頁面

（1）在首頁onload中進行登錄轉態驗證，如果為未登錄狀態，則可以使用wx.navigateTo跳轉到登錄頁面

（2）在登錄頁面中處理登錄的相關邏輯，也可以實現相同的效果。

感謝各位的閱讀，以上就是“微信小程序如何實現登錄頁面”的內容了，經過本文的學習后，相信大家對微信小程序如何實現登錄頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！