微信小程式實作簡單登入界面和登入功能

## 問題背景

用戶端開發和學習過程中，登入功能是一個很常見的場景。本文将介紹，微信小程式開發過程中是如何實作登入界面和登入功能的。

## 問題分析

話不多說，直接上代碼。

（1）index.js檔案，代碼如下：

Page({
  /**
   * 頁面的初始資料
   */
  data:{
    code:"0",
    location:[],
    imageUrl: "https://profile-avatar.csdnimg.cn/default.jpg!0",
    userName:"",
    userPass:"",
  },

  /* 登入校驗操作 */
  login: function () {
    if (this.data.userName === "baorant" && this.data.userPass === "123123") {
      wx.navigateTo({
        url: '/pages/index2/index',
        success: function(res) {
          console.log('router1 success');
        },
        fail: function(res) {
          console.log('router1 fail');
          console.log(res)
        }
      })
    } else {
      wx.showToast({
        title: '賬号密碼錯誤',
        icon: 'none'
      })
    }
  },
})           

（2）index.wxml檔案，代碼如下：

<view class="container">
  <view class="title">登入頁面測試</view>
  <view class="inputRow">
    <View>賬号</View>
    <input type="text" model:value="{{userName}}" placeholder="請輸入賬号" class="phone_number"></input>
  </view>
  <!-- <view class="divLine"></view> -->
  <view class="inputRow1">
    <View>密碼</View>
    <input type="text" model:value="{{userPass}}" placeholder="請輸入密碼" class="phone_number"></input>
  </view>
  <!-- <view class="divLine"></view> -->
  <button class="buttonStyle" type="primary" bindtap="login">登入</button>
</view>           

（3）index.wxss檔案，代碼如下：

/* 設定swiper元件的寬高 */
.swiper{
  width: 100%;
  height: 600rpx;
}
/* 設定swiper元件裡面圖檔的寬高 */
.image{
  width: 100%;
  height: 600rpx;
}

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 100rpx;
}

.title{
  display:flex;
  font-size: larger;
}

.inputRow{
  margin-top: 150rpx;
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

/*分割線樣式*/
.divLine{
  background: #E0E3DA;
  width: 80%;
  height: 5rpx;
  margin: 10rpx 150rpx;
}

.inputRow1{
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  padding-bottom: 20rpx;
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
}

.phone_number{
  margin-left:40rpx;
}

.content1{
  /* text-align: center; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10rpx;
}

.buttonStyle{
  margin-top: 50rpx;
}

.place{
  font-style: italic;
}           

運作結果如下：

## 問題總結

本文介紹了微信小程式開發過程中模拟實作登入界面和登入功能，有興趣的同學可以進一步深入研究。