實現(xiàn)效果，用戶輸入帳號：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為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
},
//監(jiān)聽輸入的帳號
setname:function(e){
this.data.name=e.detail.value;
},
//監(jiān)聽輸入的密碼
setpwd:function(e){
this.data.pwd=e.detail.value;
},
//監(jiān)聽登錄
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
})
}
}
})
