微信小程序登录注册页面

// 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.valueif (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.valueif (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": {}
}```

帐号 密码

</view>
<view class="hr"></view><!-- <button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bind:tap="login">登录</button> -->
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" open-type="getUserInfo"  bindgetuserinfo="onClickSubmit">登录</button>
<view class="operate"><view><navigator url="../mobile/mobile">手机快速注册</navigator></view><view>找回密码</view>
</view>
<!-- <view class="login"><view><image src="..//images/wxlogin.png" /></view><view><image src="../images/qqlogin.png" /></view>	
</view> -->

{{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;
}