小程序——登录方法

登录页面

<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()

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