实现效果,用户输入帐号:admin和密码:admin提示登录成功,输入其它提示登录失败
具体效果如下
感受:一开始为了获取 input 中的值,就想着用var obj = document.getElementById,然后通过obj.value来获取输入的帐号信息,但是在微信小程序中是不行的。小程序的思路是通过input 的 bindinput 来将输入的信息存放在 data 中,在点击登录按钮时我们通过 data 来获取输入的值。言归正传,具体代码如下:
index.json代码
{
"navigationBarTitleText":"登陆"
}
index.wxml页面代码
<view class="top">
<view class="inputView">
<input type="text" placeholder=" 请输入帐号" placeholder-class="ph" bindinput="setname"/>
</view>
<view class="inputView">
<input type="text" placeholder=" 请输入密码" password="true" placeholder-class="ph" bindinput="setpwd"/>
</view>
</view>
<button type="primary" bindtap="login">登录</button>
index.wxss代码
.top{
margin-top:40%;
}
.inputView{
margin:40rpx 20rpx 0rpx 20rpx;
border: 2rpx solid gainsboro;
border-radius: 40rpx;
height: 80rpx;
}
input{
margin-left: 25rpx;
margin-right: 25rpx;
height: 80rpx;
}
.ph{
color: gainsboro;
font-size: 0.875em;
}
button{
margin: 40rpx 20rpx 0 20rpx;
border-radius: 40rpx;
}
index.js代码
Page({
data:{
name:'',
pwd:''
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
//监听输入的帐号
setname:function(e){
this.data.name=e.detail.value;
},
//监听输入的密码
setpwd:function(e){
this.data.pwd=e.detail.value;
},
//监听登录
login:function(){
console.log('帐号:'+this.data.name);
console.log('密码:'+this.data.pwd);
if(this.data.name=='admin' && this.data.pwd=='admin'){
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
}
else{
wx.showToast({
title: '登录失败',
icon: 'success',
duration: 2000
})
}
}
})