微信小程序实现简单登录界面和登录功能

问题背景

客户端开发和学习过程中，登录功能是一个很常见的场景。本文将介绍，微信小程序开发过程中是如何实现登录界面和登录功能的。

问题分析

话不多说，直接上代码。 （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;
}

运行结果如下：

问题总结

本文介绍了微信小程序开发过程中模拟实现登录界面和登录功能，有兴趣的同学可以进一步深入研究。