推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 920|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(25) : 微信小程序之登錄頁實例

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:44:07 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

提供一個登錄頁的案例,供同學們使用



項目效果圖:



目錄結構:



圖片資源:

name.png


key.png


loginLog.jpg




login.wxml:

[html] view plain copy


  • <view class="container">  
  •   <view class="login-icon">  
  •     <image class="login-img" src="../images/loginLog.jpg"></image>  
  •   </view>  
  •   <view class="login-from">  
  •   
  •     <!--賬號-->  
  •     <view class="inputView">  
  •       <image class="nameImage" src="../images/name.png"></image>  
  •       <label class="loginLab">賬號</label>  
  •       <input class="inputText" placeholder="請輸入賬號" bindinput="phoneInput" />  
  •     </view>  
  •     <view class="line"></view>  
  •   
  •     <!--密碼-->  
  •     <view class="inputView">  
  •       <image class="keyImage" src="../images/key.png"></image>  
  •       <label class="loginLab">密碼</label>  
  •       <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" />  
  •     </view>  
  •   
  •     <!--按鈕-->  
  •     <view class="loginBtnView">  
  •       <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登錄</button>  
  •     </view>  
  •   </view>  
  • </view>  



login.wxss:

[css] view plain copy


  • page{  
  •   height: 100%;  
  • }  
  •   
  • .container {  
  •   height: 100%;  
  •   display: flex;  
  •   flex-direction: column;  
  •   padding: 0;  
  •   box-sizing: border-box;  
  •   background-color: #f2f2f2  
  • }   
  •   
  • /*登錄圖片*/  
  • .login-icon{  
  •   flex: none;  
  • }  
  • .login-img{  
  •   width: 750rpx;  
  • }  
  •   
  • /*表單內容*/  
  • .login-from {  
  •   margin-top: 20px;  
  •   flex: auto;  
  •   height:100%;  
  • }  
  •   
  • .inputView {  
  •   background-color: #fff;  
  •   line-height: 44px;  
  • }  
  • /*輸入框*/  
  • .nameImage, .keyImage {  
  •   margin-left: 22px;  
  •   width: 14px;  
  •   height: 14px  
  • }  
  •   
  • .loginLab {  
  •   margin: 15px 15px 15px 10px;  
  •   color: #545454;  
  •   font-size: 14px  
  • }  
  • .inputText {  
  •   flex: block;  
  •   float: right;  
  •   text-align: right;  
  •   margin-right: 22px;  
  •   margin-top: 11px;  
  •   color: #cccccc;  
  •   font-size: 14px  
  • }  
  •   
  • .line {  
  •   width: 100%;  
  •   height: 1px;  
  •   background-color: #cccccc;  
  •   margin-top: 1px;  
  • }  
  • /*按鈕*/  
  • .loginBtnView {  
  •   width: 100%;  
  •   height: auto;  
  •   background-color: #f2f2f2;  
  •   margin-top: 0px;  
  •   margin-bottom: 0px;  
  •   padding-bottom: 0px;  
  • }  
  •   
  • .loginBtn {  
  •   width: 80%;  
  •   margin-top: 35px;  
  • }  



login.js:


[javascript] view plain copy


  • Page({  
  •   data: {  
  •     phone: '',  
  •     password:''  
  •   },  
  •   
  • // 獲取輸入賬號  
  •   phoneInput :function (e) {  
  •     this.setData({  
  •       phone:e.detail.value  
  •     })  
  •   },  
  •   
  • // 獲取輸入密碼  
  •   passwordInput :function (e) {  
  •     this.setData({  
  •       password:e.detail.value  
  •     })  
  •   },  
  •   
  • // 登錄  
  •   login: function () {  
  •     if(this.data.phone.length == 0 || this.data.password.length == 0){  
  •       wx.showToast({   
  •         title: '用戶名和密碼不能為空',   
  •         icon: 'loading',   
  •         duration: 2000   
  •       })   
  • }else {  
  •   // 這里修改成跳轉的頁面  
  •       wx.showToast({   
  •         title: '登錄成功',   
  •         icon: 'success',   
  •         duration: 2000   
  •       })   
  •     }   
  •   }  
  • })  




運行結果:


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 手机白城麻将免费下载 七星开彩结果 股票融资技巧·杨方配资 篮球即时比分90vs比分 二人麻将需要几张牌 经典麻将安卓单机版 云南快乐十分遗漏 黑龙江11选5正好彩票网 黑龙江36选7147期开奖结果 福建36选7 排球比分网站 急速赛车下载