一、内容简介
今天呢我们用wx:if wx:else 语句实现用账号密码登录。
二、界面示例图
1、简陋的主界面
2、简陋的登录失败反馈
3、简陋的登录成功界面
三、代码实现
1、布局代码
<!--miniprogram/pages/login/admin.wxml-->
<view wx:if='{{logined==false}}' class='contain'>
<text class='title'>管理系統</text>
<form id='info' bindsubmit='login'>
<input name='usr' class='admin' placeholder='输入管理员账号'></input>
<input name='psw' password='true' class='admin' placeholder='输入管理员密码'></input>
<button type='primary' form-type='submit'>登录</button>
</form>
</view>
<view wx:else>
<view>登录成功</view>
<button bindtap='exit'>退出登录</button>
</view>
2、样式代码
/* miniprogram/login/admin.wxss */
.contain{
text-align: center;
color: rgba(51, 26, 161, 0.89);
font-size: 60rpx;
margin-top: 100rpx;
}
.admin{
margin-top: 150rpx;
margin-left: 30rpx;
margin-right: 30rpx;
margin-bottom: 100rpx;
background: rgba(99, 235, 133, 0.582);
border: 1px solid black;
}
3、js代码
动态控制界面的更换
//miniprogram/login/admin.js
Page({
data: {
logined:false //用于控制哪个view视图展现在界面上
},
login(res){ //点击登录按钮,提交表单后执行的函数,用于验证账号与密码
if(res.detail.value.usr == '123'&&res.detail.value.psw == 'abc')
{
wx.showToast({
title: '登录成功',
})
this.setData({
logined:true
})
}
else{
wx.showToast({
title: '账号与密码不对应',
icon:'none'
})
}
},
exit(){ //退出登录的函数实现,即简单地将管理界面藏起来,使登录界面展现出来。
this.setData({
logined:false
})
}
})