邢臺網站建設,邢臺系統開發
邢臺網站建設,邢臺網站制作,邢臺網絡公司,邢臺系統開發,邢臺網站設計,邢臺網頁制作
15081754822
網站首頁 網站建設 系統開發 系統開發知識 手機網站 外貿網站 網站維護 網站案例 選課系統 域名注冊 微信開發 行業交流 聯系我們
 
邢臺區縣網站建設
邢臺行業門戶網站建設
邢臺網站策劃
公司主營業務
  系統開發
網站建設
手機網站
網站案例
成品網站
網站維護
域名注冊
虛似主機
機房工程
弱電工程
視頻主持人
 
增值服務
 
SSL證書申請
微信小程序
 
關于我們
 
公司簡介
公司視頻
支付方式
人才招聘
企業文化
服務承諾
合作伙伴
下載中心
 
你所處的位置:首頁 - 微信小程序 - 微信小程序之登錄頁———-實例
微信小程序之登錄頁———-實例
發布日期:2020-3-8 20:20:08  瀏覽次數:80次

下面是代碼:


login.wxml:


<!--pages/login/login.wxml-->

<view class="container">

 <view class="login-icon">  

   <image class="login-img" src="/images/logo.png"></image>  

 </view>  

 <view class="login-from">  

 <form bindsubmit="formSubmit" class='form'>

   <view class="myno">

   <!-- 學號 -->

     <view class="weui-cell weui-cell_input">

     <image class="nameImage" src="/images/name.png"></image>

         <!-- <view class="weui-cell__hd">

             <view class="weui-label">學號</view>

         </view> -->

         <view class="weui-cell__bd">

             <input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="請輸入學號" />

         </view>

     </view>

   </view>

   <view class="mypwd">

     <!-- 密碼 -->

     <view class="weui-cell weui-cell_input">

     <image class="nameImage" src="/images/key.png"></image>

         <!-- <view class="weui-cell__hd">

             <view class="weui-label">密碼</view>

         </view> -->

         <view class="weui-cell__bd">

             <input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="請輸入密碼" value='{{pwd}}'/>

         </view>

     </view>

   </view>


    <!--按鈕-->  

   <view class="loginBtnView">  

     <button class="loginBtn" size="{{primarySize}}"  form-type='submit' disabled='{{disabled}}'>登錄</button>  

   </view>  

   </form>

 

 </view>  

</view>  

login.wxss:


/* pages/login/login.wxss */

page{

 height: 100%;

 background-size:100%;

 background-image: url('http://songlijuan.top/bk2.jpg');

}


.container {

 height: 100%;

 display: flex;

 flex-direction: column;

 padding: 0;

 box-sizing: border-box;

 /* background-color: #f2f2f2;     */

}


/*登錄圖片*/

.login-icon{

 flex: none;

 margin: 0 auto;

 margin-top: 200rpx;

}

.login-img{

 width: 220rpx;

 height: 220rpx;

 border-radius: 110rpx;

 opacity: 0.6;

}


/*表單內容*/

.login-from {

 margin-top: 90px;

 flex: auto;

 height:100%;

}


/* 輸入框 */

.myno{

 width: 90%;

 height: 80rpx;

 margin: 0 auto;

 border:1px solid #ccc;

 border-radius: 50rpx;


}

.mypwd{

 width: 90%;

 height: 80rpx;

 margin: 0 auto;

 border:1px solid #ccc;

 border-radius: 50rpx;

 margin-top: 20rpx;

}

/*按鈕*/

.loginBtnView {

 margin-top: 0px;

 margin-bottom: 0px;

 padding-bottom: 0px;

}


.loginBtn {

 width: 90%;

 height: 80rpx;

 line-height: 80rpx;

 margin-top: 35px;

 color: #fff;

 background-color:#7e8ef0;

 border: 0.1rpx solid #ccc;

 border-radius: 40rpx;

}



.nameImage, .keyImage {

 margin-right: 10px;

 width: 14px;

 height: 14px

}

login.js:


// pages/login/login.js

const app = getApp()

Page({

 /**

  * 頁面的初始數據

  */

 data: {

   disabled:false,

   no:'',

   pwd:'',

   noinput:false,

   pwdinput:false,

 },

 noinput:function(e){

   this.setData({no:e.detail.value});

   this.setData({noinput:true});

   if(this.data.noinput==true && this.data.pwdinput==true){

     this.setData({ disabled: false });

   }


 },

 pwdinput: function (e) {

   this.setData({ pwd: e.detail.value });

   this.setData({ pwdinput: true });

   if (this.data.noinput == true && this.data.pwdinput == true) {

     this.setData({ disabled: false });

   }

 },

 formSubmit: function (e) {

   wx.showLoading({

     title: '登錄中...',

   })

   console.log(e);

   this.setData({ disabled: true});

   wx.request({

     url: app.globalData.url.login, //僅為示例,并非真實的接口地址

     data: {

       no: e.detail.value.no,

       pwd: e.detail.value.pwd

     },

     header: {

       'content-type': 'application/json' // 默認值

     },

     success: function (res) {

       console.log(res);

       if (res.statusCode == 200) {

         if (res.data.error == true) {

           wx.showToast({

             title: res.data.msg,

             icon: 'none',

             duration: 2000

           })

         } else {

           wx.setStorageSync('student', res.data.data);

           wx.showToast({

             title: res.data.msg,

             icon: 'success',

             duration: 2000

           })

           setTimeout(function(){

             wx.switchTab({

               url: '../teacher/teacher',

             })

           },2000)

         }

       }else{

         wx.showToast({

           title: '服務器出現錯誤',

           icon: 'none',

           duration: 2000

         })

       }

     }

   })

 },

 /**

  * 生命周期函數--監聽頁面加載

  */

 onLoad: function (options) {

   this.setData({disabled:false});

   var student = wx.getStorageSync('student');

   if (typeof (student) == 'object' && student.no != '' && student.classid != '') {

     wx.switchTab({

       url: '../teacher/teacher',

     })

   }

 },


 /**

  * 生命周期函數--監聽頁面初次渲染完成

  */

 onReady: function () {


 },


 /**

  * 生命周期函數--監聽頁面顯示

  */

 onShow: function () {

   if(this.data.no=='' || this.data.pwd==''){

     this.setData({ disabled: true });

   }else{

     this.setData({ disabled: false });

   }

 },


 /**

  * 生命周期函數--監聽頁面隱藏

  */

 onHide: function () {


 },


 /**

  * 生命周期函數--監聽頁面卸載

  */

 onUnload: function () {


 },


 /**

  * 頁面相關事件處理函數--監聽用戶下拉動作

  */

 onPullDownRefresh: function () {


 },


 /**

  * 頁面上拉觸底事件的處理函數

  */

 onReachBottom: function () {


 },


 /**

  * 用戶點擊右上角分享

  */

 onShareAppMessage: function () {


 }

})

我引用了weui的樣式,大家可以參考下weui的樣式,下載weui并引用。






作者:未知 上一條: 微信小程序和H5頁面間相互跳轉代碼實例
來源:互聯網 下一條: 微信小程序開發之前后端打通小demo
奧祥介紹 聯系我們
域名注冊 成品網站
成功案例 客戶服務
行業交流 支付方式
版權所有: © 2005-2015 邢臺奧祥網絡™
聯系電話:15081754822  15102693855
公司郵箱:[email protected] 《信息產業部備案 冀ICP備09043254號》
本站關鍵詞:邢臺網站建設 邢臺網站設計 河北邢臺網絡公司 邢臺網站制作公司 邢臺網站推廣邢臺網站制作
網站統計:
黑色沙漠造船赚钱 网络捕鱼游戏技巧 幸运飞艇真正官方开奖号码 吉祥棋牌斗地主? 股票趋势技术分析下 富贵乐园怎么倒闭了 网赚学院 南宁麻将技巧与心得 2018香港一波中特最准 黑龙江36选7#1 黄大仙精准大全正版资料 杭州幻游南京麻将 直播意甲 温州麻将玩法 近日推荐股票 陕西麻将版全版本 可以上下分的捕鸟游戏