微信小程序?qū)崿F(xiàn)簡單登錄界面和登錄功能

問題背景

客戶端開發(fā)和學(xué)習(xí)過程中，登錄功能是一個很常見的場景。本文將介紹，微信小程序開發(fā)過程中是如何實現(xiàn)登錄界面和登錄功能的。

問題分析

話不多說，直接上代碼。 (1)index.js文件，代碼如下：

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data:{
    code:"0",
    location:[],
    imageUrl: "https://profile-avatar.yssmx.com/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文件，代碼如下：

/* 設(shè)置swiper組件的寬高 */
.swiper{
  width: 100%;
  height: 600rpx;
}
/* 設(shè)置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;
}

運行結(jié)果如下：

問題總結(jié)

本文介紹了微信小程序開發(fā)過程中模擬實現(xiàn)登錄界面和登錄功能，有興趣的同學(xué)可以進一步深入研究。文章來源地址http://www.zghlxwxcb.cn/news/detail-519511.html