小程序——登錄方法

登錄頁面

<view class="mcontainer">
    <view class="item">
        <image src="/image/logo.png" class="image"/>
    </view>

    <view class="item">
       <view class="login-item">
       	    <view class="login-item-info">用戶名</view>
            <view><input bindinput="usernameInput" /></view>
       </view>
       <view class="login-item">
            <view class="login-item-info">密碼</view>
            <view class="login-pwd">
            
            <input style="flex-grow:1" password="true"  bindinput="passwordInput"/> 
            <text> 忘記密碼 </text>
            
            </view>
       </view>
       <view class="login-item bottom">
            <button class="login-btn" bindtap="loginBtnClick">登錄</button>
       </view>
    </view>


    <view class="item bottom-info">
       <view> 沒有賬戶? <text> 註冊 </text> </view>
       <view class="wechat-icon">
            <image src="/image/wechat.png"  />
       </view>
    </view>


</view>

登錄頁面的js

//登錄按鈕的方法

loginBtnClick: function () {
    
    // 用戶名和密碼驗證的過程
    app.appData.userinfo = { username: this.data.username, password: this.data.password }
    //如驗證完成點擊切換回用戶信息頁面
    wx.switchTab({
      url: '../user/user',
    })
    
  },
  //輸入框的方法
  usernameInput: function (event){
    this.setData({username:event.detail.value})
  },
  passwordInput: function (event) {
    this.setData({ password: event.detail.value })
  },

用戶信息頁面(暫時只放圖片)


<view class="index-container">
   <image  src="/image/uc.jpg" ></image>
   <view class="nickname">
      {{username}}
   </view>
</view>

JS:

//生命週期函數--監聽頁面加載
onLoad: function (options) {
    //判斷用戶登錄頁面是否存在
    if(app.appData.userinfo==null){
      wx.redirectTo({
        url: '../login/login',
      })
    }else{
      
      this.setData({ username: app.appData.userinfo.username })
    }
  },

以上js均需要在頂部引用var app:getApp()

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章