E企盈小程序开发-热线：4006-838-530最近在学习开通美式家具小程序电话:4006-838-530微信小程序，下面提供自己做的微信小程序登录页面，仅供参考。效果图： 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.jsconst 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==t开通摆件小程序电话:4006-838-530rue){ 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.statusCod开通cvc牛津纺小程序电话:4006-838-530e == 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并引用。后台控制器的代码只需要查下数据库里面的信息就可以了；
最新评论