jsf實現(xiàn)微信小程序簡潔登錄頁面(附源碼)
上圖:
用戶不存在:
代碼:
login.wxml
<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> ? ?<!-- v2父容器 ?子view使用絕對布局 --> ? ?<view class="v2"> ? ? ?<view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登錄</view> ?? ? ? ?<!-- 手機號 --> ? ? ?<view class="phoneCs"> ? ? ? ?<!-- <image src="/images/zhang.png" class="ph"></image> --> ? ? ? ?<input placeholder="請輸入賬號" type="number" bindinput="content" /> ? ? ?</view> ? ? ?<!-- 密碼 --> ? ? ?<view class=passwordCs"> ? ? ? ?<!-- <image src="/images/mi.png" class="ps"></image> --> ? ? ? ?<input placeholder="請輸入密碼" type="password" bindinput="password" /> ? ? ?</view> ? ? ?<!-- 登錄按鈕 --> ? ? ?<view class="denglu"> ? ? ? ?<button class="btn-dl" type="primary" bindtap="goadmin">登錄</button> ? ? ?</view> ? ?</view> ?</view> ??
login.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; } /* 手機圖片+輸入框+下劃線的父容器view */ .v1 .v2 .phoneCs{ ? margin-top: 200rpx; ? margin-left: 25rpx; ? position: absolute; ? display: flex; ? width:480rpx ; ? height: 90rpx ; ? background-color: white; ?? } /* 手機圖標 */ .v1 .v2 .phoneCs .ph{ ? margin-top: 5rpx; ? margin-left: 30rpx; ? width: 55rpx; ? height: 55rpx; } /* 手機號輸入框 */ .v1 .v2 .phoneCs input{ ? width: 400rpx; ? font-size: 30rpx ; ? margin-top: 25rpx; ? margin-left: 30rpx; } /* 密碼圖標+輸入框+小眼睛圖標+下劃線父容器view */ .v1 .v2 .passwordCs{ ? margin-top: 350rpx; ? margin-left: 25rpx; ? position: absolute; ? display: flex; ? width:480rpx ; ? height: 90rpx ; ? background-color: white; } /* 密碼圖標 */ .v1 .v2 .passwordCs .ps{ ? margin-top: 5rpx; ? margin-left: 30rpx; ? width: 55rpx; ? height: 55rpx; } /* 眼睛 圖標*/ .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; }
login.js
//index.js //獲取應(yīng)用實例 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 ?//表示賬戶是否存在,false為初始值 ? ? if(username=='') ? ? { ? ? ? wx.showToast({ ? ? ? ? icon:'none', ? ? ? ? title: '賬號不能為空', ? ? ? }) ? ? }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ù)庫對象集合 ? ? ? ? ? ? if (username === admin[i].username) { //賬戶已存在 ? ? ? ? ? ? ? flag=true; ? ? ? ? ? ? ? if (password !== admin[i].password) { ?//判斷密碼正確與否 ? ? ? ? ? ? ? ? wx.showToast({ ?//顯示密碼錯誤信息 ? ? ? ? ? ? ? ? ? title: '密碼錯誤??!', ? ? ? ? ? ? ? ? ? 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)沒有該賬戶 ? ? ? ? ? { ? ? ? ? ? ? wx.showToast({ ? ? ? ? ? ? ? title: '該用戶不存在', ? ? ? ? ? ? ? icon: 'error', ? ? ? ? ? ? ? duration: 2500 ? ? ? ? ? ? }) ? ? ? ? ? } ? ? ? ? } ? ? ? }) ? ? } ? }, }) ?
到此這篇關(guān)于實現(xiàn)微信小程序簡潔登錄頁面(附源碼)的文章就介紹到這了,更多相關(guān)微信小程序簡潔登錄頁面 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08layui.layer彈出層(子頁面)改變父頁面內(nèi)容(訪問元素和函數(shù))
當前頁面(父框架或父頁面)使用layer以iframe層的方式彈出新的窗口(子框架或子頁面)時,如何在子頁面中訪問父頁面的元素和函數(shù),從而改變父元素的頁面顯示,給用戶合理舒適的體驗。2023-02-02TypeScript實現(xiàn)類型安全的EventEmitter
這篇文章主要為大家介紹了TypeScript實現(xiàn)類型安全的EventEmitter示例詳解有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03Spartacus中navigation?item?reducer實現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07Typescript是必須要學習嗎?如何學習TS全棧開發(fā)
Typescript目前在前端,網(wǎng)站,小程序中的位置基本無可替代,同時也可以構(gòu)建完美的CLI應(yīng)用。在移動,桌面,后端方面,性能不是要求很高的情況下完全可以勝任,并且在區(qū)塊鏈,嵌入式,人工智能方面也開始茁壯成長。2022-12-12Webpack source map實戰(zhàn)分析詳解
這篇文章主要為大家介紹了Webpack source map示例分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12