小程序——登录方法

登录页面

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值