微信小程序簡(jiǎn)潔登錄頁(yè)面的實(shí)現(xiàn)(附源碼)
1.上圖
2.用戶(hù)不存在
3.上代碼
3.1login.wxml
<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- v2父容器 子view使用絕對(duì)布局 --> <view class="v2"> <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登錄</view> <!-- 手機(jī)號(hào) --> <view class="phoneCs"> <!-- <image src="/images/zhang.png" class="ph"></image> --> <input placeholder="請(qǐng)輸入賬號(hào)" type="number" bindinput="content" /> </view> <!-- 密碼 --> <view class=passwordCs"> <!-- <image src="/images/mi.png" class="ps"></image> --> <input placeholder="請(qǐng)輸入密碼" type="password" bindinput="password" /> </view> <!-- 登錄按鈕 --> <view class="denglu"> <button class="btn-dl" type="primary" bindtap="goadmin">登錄</button> </view> </view> </view>
3.2login.css
/* pages/login/login.wxss *//* 最大的父元素 */ .v1{ display: block; position:absolute; width: 100%; background-color: rgb(250, 248, 248); } /* 白色區(qū)域 */ .v1 .v2{ position: relative; margin-top: 150rpx; left: 100rpx; width: 545rpx; height: 600rpx; background-color: rgb(250, 248, 248); border-radius: 50rpx; } /* 白色區(qū)域內(nèi)的登錄文本 */ .v1 .v2 .dltext{ margin-top: 50rpx; position: absolute; margin-left:50rpx; width: 150rpx; height: 100rpx; font-size: 60rpx; font-family: Helvetica; color: #000000; line-height: 100rpx; letter-spacing: 2rpx; } /* 手機(jī)圖片+輸入框+下劃線的父容器view */ .v1 .v2 .phoneCs{ margin-top: 200rpx; margin-left: 25rpx; position: absolute; display: flex; width:480rpx ; height: 90rpx ; background-color: white; } /* 手機(jī)圖標(biāo) */ .v1 .v2 .phoneCs .ph{ margin-top: 5rpx; margin-left: 30rpx; width: 55rpx; height: 55rpx; } /* 手機(jī)號(hào)輸入框 */ .v1 .v2 .phoneCs input{ width: 400rpx; font-size: 30rpx ; margin-top: 25rpx; margin-left: 30rpx; } /* 密碼圖標(biāo)+輸入框+小眼睛圖標(biāo)+下劃線父容器view */ .v1 .v2 .passwordCs{ margin-top: 350rpx; margin-left: 25rpx; position: absolute; display: flex; width:480rpx ; height: 90rpx ; background-color: white; } /* 密碼圖標(biāo) */ .v1 .v2 .passwordCs .ps{ margin-top: 5rpx; margin-left: 30rpx; width: 55rpx; height: 55rpx; } /* 眼睛 圖標(biāo)*/ .v1 .v2 .passwordCs .eye{ margin-top: 5rpx; margin-left: 65rpx; width: 55rpx; height: 55rpx; } /* 密碼輸入框 */ .v1 .v2 .passwordCs input{ width: 400rpx; font-size: 30rpx ; margin-top: 25rpx; margin-left: 30rpx; } /* 登錄按鈕容器view */ .v1 .v2 .denglu{ width: 480rpx; height: 80rpx; position: absolute; margin-top:515rpx; margin-left:25rpx; } /* 登錄按鈕 */ .v1 .v2 .denglu button{ padding: 0rpx; line-height: 70rpx; font-size: 30rpx; width: 100%; height: 100%; border-radius: 5rpx; }
3.3login.js
//index.js //獲取應(yīng)用實(shí)例 const app = getApp() let username='' let password='' Page({ data: { username: '', password: '', clientHeight:'' }, onLoad(){ var that=this wx.getSystemInfo({ success: function (res) { console.log(res.windowHeight) that.setData({ clientHeight:res.windowHeight }); } }) }, //協(xié)議 goxieyi(){ wx.navigateTo({ url: '/pages/oppoint/oppoint', }) }, //獲取輸入款內(nèi)容 content(e){ username=e.detail.value }, password(e){ password=e.detail.value }, //登錄事件 goadmin(){ let flag = false //表示賬戶(hù)是否存在,false為初始值 if(username=='') { wx.showToast({ icon:'none', title: '賬號(hào)不能為空', }) }else if(password==''){ wx.showToast({ icon:'none', title: '密碼不能為空', }) }else{ wx.cloud.database().collection('adminShop') .get({ success:(res)=>{ console.log(res.data) let admin=res.data for (let i = 0; i < admin.length; i++) { //遍歷數(shù)據(jù)庫(kù)對(duì)象集合 if (username === admin[i].username) { //賬戶(hù)已存在 flag=true; if (password !== admin[i].password) { //判斷密碼正確與否 wx.showToast({ //顯示密碼錯(cuò)誤信息 title: '密碼錯(cuò)誤?。?, icon: 'error', duration: 2500 }); break; } else { wx.showToast({ //顯示登錄成功信息 title: '登陸成功??!', icon: 'success', duration: 2500 }) flag=true; wx.setStorageSync('admin', password) wx.navigateTo({ url: '/pages/admin/admin', }) break; } } }; if(flag==false)//遍歷完數(shù)據(jù)后發(fā)現(xiàn)沒(méi)有該賬戶(hù) { wx.showToast({ title: '該用戶(hù)不存在', icon: 'error', duration: 2500 }) } } }) } }, })
到此這篇關(guān)于微信小程序簡(jiǎn)潔登錄頁(yè)面(附源碼)的文章就介紹到這了,更多相關(guān)微信小程序簡(jiǎn)潔登錄頁(yè)面 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)設(shè)置默認(rèn)日期范圍為最近40天的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5 date元素進(jìn)行時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07利用JavaScript將Excel轉(zhuǎn)換為JSON示例代碼
這篇文章主要給大家介紹了關(guān)于利用JavaScript將Excel轉(zhuǎn)換為JSON的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù),需要的朋友可以參考下2014-05-05javascript控制Div層透明屬性由淺變深由深變淺逐漸顯示
控制Div層透明屬性,由淺變深逐漸顯示,由深變淺逐漸消失,具體實(shí)現(xiàn)代碼如下,喜歡的朋友可以感受下2013-11-11微信小程序出現(xiàn)wx.getLocation再次授權(quán)問(wèn)題的解決方法分析
這篇文章主要介紹了微信小程序出現(xiàn)wx.getLocation再次授權(quán)問(wèn)題的解決方法,結(jié)合實(shí)例形式分析了解決wx.getLocation再次授權(quán)問(wèn)題的相關(guān)操作步驟,需要的朋友可以參考下2019-01-01