微信小程序登录注册页面

// login.js
// 获取应用实例
var app = getApp()
var api = require("../../utils/api.js")

Page({
  data: {
    motto: '@zhenbei V1.0.0',
    userInfo: {},
    hasUserInfo: false,
    disabled: true,
    btnstate: 'default',
    username: '',
    password: '',
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  accountInput: function (e) {
      var username = e.detail.value
    if (username !== '') {
      this.setData({
        disabled: false, 
        btnstate: 'primary', 
        username: e.detail.value
      });
    } else {
      this.setData({
        disabled: true,
        btnstate: 'default'
      });
    }
  },

  pwdBlur: function(e) {
    var password = e.detail.value
    if (password != '') {
      this.setData({password: e.detail.value});
    }
  },

  onClickSubmit:function(e){
    wx.request({
      url: api.LoginAPI,
      data: { 
        username: this.data.username, 
        password: this.data.password, 
        // nickname: e.detail.userInfo.nickName,
        // avatar: e.detail.userInfo.avatarUrl
      },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
          console.log(res)
        if (res.data.code) {
          // 初始化用户信息
          app.initUserInfo(res.data.data, e.detail.userInfo);
          // 跳转会上一级页面
          wx.redirectTo({
            url: '../index/index',
          });
        } else {
          wx.showToast({ title: "登录失败", icon: 'none' });
        }
      }
    })
  },
  bindViewTap() {
      
  },
  onLoad() {
  },

})

// login.json
{
    "usingComponents": {}
}```

帐号 密码

登录

	手机快速注册
	找回密码

{{motto}}

/* pages/login/login.wxss */
/index.wxss/
.content {
margin-top: 60px;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}

.userinfo-avatar {
overflow: hidden;
width: 200rpx;
height: 200rpx;
margin: 0rpx;
border-radius: 50%;
}

.account {
display: flex;
flex-direction: row;
padding-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}

.title {
margin-right: 30px;
font-weight: bold;
}

.hr {
border: 1px solid #ccc;
opacity: 0.2;
width: 90%;
margin: 0 auto;
}

.see {
position: absolute;
right: 20px;
}

.btn {
width: 90%;
margin-top: 40px;
color: #999;
}

.operate {
display: flex;
flex-direction: row;
}

.operate view {
margin: 0 auto;
margin-top: 40px;
font-size: 14px;
color: #333;
}

.login {
display: flex;
flex-direction: row;
margin-top: 60px;
}

.login view {
margin: 0 auto;
}

.login image {
width: 70px;
height: 98px;
}

.usermotto {
margin-top: 140px;
font-size: 15px;
}