利用quickstart工程,實(shí)現(xiàn)用戶登錄過(guò)程，并簡(jiǎn)單校驗(yàn)用戶名和密碼是否正確。

1.底部有兩個(gè)tabBar(首頁(yè)/個(gè)人中心) 
2.個(gè)人中心顯示用戶信息。 
首次切換到個(gè)人中心，需要先登錄，才能看到個(gè)人信息。登錄后，就一直顯示用戶信息。

改app.json文件，添加tabBar

1. app.json { "pages":[ "pages/index/index", "pages/user/user", "pages/login/login" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁(yè)" },{ "pagePath": "pages/user/user", "text": "個(gè)人中心" }] } }

添加用戶登錄頁(yè)面login  兩個(gè)輸入框(用戶名和密碼)  一個(gè)按鈕  當(dāng)點(diǎn)擊按鈕時(shí)，驗(yàn)證用戶名和密碼是否正確，如果正確，則跳轉(zhuǎn)到用戶頁(yè)面(用戶的個(gè)人信息)。  否則在登錄頁(yè)面有個(gè)錯(cuò)誤提示"請(qǐng)輸入正確的用戶名和密碼"。

login.wxml

1. <view class="mcontainer"> <view class="item"> <view class="login-item"> <view class="login-item-info">用戶名</view> <view><input /></view> </view> <view class="login-item"> <view class="login-item-info">密碼</view> <view class="login-pwd"> <input style="flex-grow:1" password="true" /> <text> 忘記密碼 </text> </view> </view> <view class="login-item bottom"> <button class="login-btn" >登錄</button> </view> <view class="login-item bottom"> <text> 用戶名或密碼錯(cuò)誤 </text> </view> </view> </view>

login.wxss

1. .mcontainer { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .item{ flex-grow:1; height: 30%; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 96%; padding: 0 2%; } .login-item{ width: 90%; margin-top: 30rpx; border-bottom: 1px solid #eee; flex-grow:1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 20rpx; } .bottom{ border-bottom: 0px; } .login-item-info{ font-size: 8px; color: #888; padding-bottom: 20rpx; } .login-pwd{ display: flex; justify-content: space-between; flex-grow: 1; align-items: center; } .login-pwd text{ height: 100%; font-size: 14px; color: #888; display: flex; } .login-btn{ width: 80%; color: white; background-color: green; border-radius: 0; font-size: 14px; } .login-btn:hover{ width: 80%; color: white; border-radius: 0; }

綁定bindinput事件

1. usernameInput