微信小程序之登录页-------实例

article/2025/10/8 10:49:39

最近在学习微信小程序，下面提供自己做的微信小程序登录页面，仅供参考。

效果图：

目录结构：

图片：

name.png

key.png

下面是代码：

login.wxml：

<!--pages/login/login.wxml-->
<view class="container"> <view class="login-icon">  <image class="login-img" src="/images/logo.png"></image>  </view>  <view class="login-from">  <form bindsubmit="formSubmit" class='form'><view class="myno"><!-- 学号 --><view class="weui-cell weui-cell_input"><image class="nameImage" src="/images/name.png"></image><!-- <view class="weui-cell__hd"><view class="weui-label">学号</view></view> --><view class="weui-cell__bd"><input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="请输入学号" /></view></view></view><view class="mypwd"><!-- 密码 --><view class="weui-cell weui-cell_input"><image class="nameImage" src="/images/key.png"></image><!-- <view class="weui-cell__hd"><view class="weui-label">密码</view></view> --><view class="weui-cell__bd"><input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="请输入密码" value='{{pwd}}'/></view></view></view><!--按钮-->  <view class="loginBtnView">  <button class="loginBtn" size="{{primarySize}}"  form-type='submit' disabled='{{disabled}}'>登录</button>  </view>  </form></view>  
</view>

login.wxss：

/* pages/login/login.wxss */
page{height: 100%;background-size:100%;background-image: url('http://songlijuan.top/bk2.jpg');
}.container {height: 100%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;/* background-color: #f2f2f2;     */
} /*登录图片*/
.login-icon{flex: none;margin: 0 auto;margin-top: 200rpx;
}
.login-img{width: 220rpx;height: 220rpx;border-radius: 110rpx;opacity: 0.6;
}/*表单内容*/
.login-from {margin-top: 90px;flex: auto;height:100%;
}/* 输入框 */
.myno{width: 90%;height: 80rpx;margin: 0 auto;border:1px solid #ccc;border-radius: 50rpx;}
.mypwd{width: 90%;height: 80rpx;margin: 0 auto;border:1px solid #ccc;border-radius: 50rpx;margin-top: 20rpx;
}
/*按钮*/
.loginBtnView {margin-top: 0px;margin-bottom: 0px;padding-bottom: 0px;
}.loginBtn {width: 90%;height: 80rpx;line-height: 80rpx;margin-top: 35px;color: #fff;background-color:#7e8ef0;border: 0.1rpx solid #ccc;border-radius: 40rpx;
}.nameImage, .keyImage {margin-right: 10px;width: 14px;height: 14px
}

login.js：

// pages/login/login.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {disabled:false,no:'',pwd:'',noinput:false,pwdinput:false,},noinput:function(e){this.setData({no:e.detail.value});this.setData({noinput:true});if(this.data.noinput==true && this.data.pwdinput==true){this.setData({ disabled: false });}},pwdinput: function (e) {this.setData({ pwd: e.detail.value });this.setData({ pwdinput: true });if (this.data.noinput == true && this.data.pwdinput == true) {this.setData({ disabled: false });}},formSubmit: function (e) {wx.showLoading({title: '登录中...',})console.log(e);this.setData({ disabled: true});wx.request({url: app.globalData.url.login, //仅为示例，并非真实的接口地址data: {no: e.detail.value.no,pwd: e.detail.value.pwd},header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res);if (res.statusCode == 200) {if (res.data.error == true) {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})} else {wx.setStorageSync('student', res.data.data);wx.showToast({title: res.data.msg,icon: 'success',duration: 2000})setTimeout(function(){wx.switchTab({url: '../teacher/teacher',})},2000)}}else{wx.showToast({title: '服务器出现错误',icon: 'none',duration: 2000})}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({disabled:false});var student = wx.getStorageSync('student');if (typeof (student) == 'object' && student.no != '' && student.classid != '') {wx.switchTab({url: '../teacher/teacher',})}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {if(this.data.no=='' || this.data.pwd==''){this.setData({ disabled: true });}else{this.setData({ disabled: false });}},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

我引用了weui的样式，大家可以参考下weui的样式，下载weui并引用。