微信小程序实现登陆页面代码

wxml

 <view class="usermotto">

    <view>

    账号:<input data-id="u_name" bindinput="setVals" />

    </view>

    <view>

    密码:<input data-id=u_password" bindinput="setVals" type="password"/>

    </view>

    <view>

      <button class="btn_login" bindtap="btn" data-indo="{{3}}"  > 登录</button>

    </view>

   </view>

</view>

wxss

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

  color: #aaa;

}

.userinfo-avatar {

  overflow: hidden;

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

.usermotto {

  margin-top: 50px;

}

.usermotto >view{

    display:flex;

    margin-top: 12px;

}

.usermotto> view> input{

    border-bottom: 1px rgb(15, 15, 15) solid;

    border-color: rgb(15, 15, 15);

}

.btn_login{

    margin-top: 30px;

    background-color: rgb(75, 111, 209);

}

js

 data: {

    u_name: '',

    u_password: ''

  },

btn(e){

    let name = this.data.u_name;

    let password = this.data.u_password;

    // if(name == null || name == "" || name == undefined || name == "undefined"){

    if(this.isNull(name)){

        wx.showToast({

            title: '请输入账号!',

            icon: 'error'

        });

        

    }else if(this.isNull(password)){

        wx.showToast({

            title: '请输入密码!',

            icon: 'error'

        });

        

    }else{

        wx.request({

            url: 'http://114.116.32.26:8080/func/OPERATOR/LOGIN',

            method: 'GET',

            data: {

              loginname: name,

              pass: password

            },

            success: function (res) {

                if(res.data.errorcode == 0){

                  app.globalData.userInfo = res.data.employee;

                    console.log(app.globalData.userInfo);

                  wx.navigateTo({

                      url:"../home/home"

                  })

                }else{

                  wx.showToast({

                    title: res.data.message,

                    icon: 'error'

                });

                }

               

            }

          })

       

    }

  },

  

  isNull(val){

      console.log(val);

    if(val == null || val == "" || val == undefined || val == "undefined" ){

        return true

    }else{

        return false

    }

 }, setVals(e){

  this.setData({

    [e.currentTarget.dataset.id]:e.detail.value

  })

  console.log(this.data);

},

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序实现登录界面需要以下几个步骤: 1. 在小程序页面中创建一个表单,包含用户名和密码的输入框以及登录按钮。 2. 绑定表单提交事件,当用户点击登录按钮时触发。 3. 在事件处理函数中获取用户输入的用户名和密码,并进行校验。 4. 校验通过后向服务器发送登录请求,获取登录结果。 5. 根据登录结果进行相应的处理,如跳转到主界面或者提示登录失败。 下面是一个简单的实现登录界面的代码示例: ``` // login.wxml <view class="container"> <form bindsubmit="login"> <input name="username" placeholder="请输入用户名" /> <input name="password" type="password" placeholder="请输入密码" /> <button formType="submit">登录</button> </form> </view> ``` ``` // login.js Page({ login: function(e) { var username = e.detail.value.username; var password = e.detail.value.password; // 校验用户名和密码 if (username === '' || password === '') { wx.showToast({ title: '请输入用户名和密码', icon: 'none' }); return; } // 发送登录请求 wx.request({ url: 'http://example.com/login', method: 'POST', data: { username: username, password: password }, success: function(res) { if (res.data.code === 0) { // 登录成功,跳转到主界面 wx.navigateTo({ url: '/pages/home/home', }); } else { // 登录失败,提示错误信息 wx.showToast({ title: res.data.message, icon: 'none' }); } }, fail: function() { // 请求失败,提示网络错误 wx.showToast({ title: '网络错误', icon: 'none' }); } }); } }); ``` 在上面的代码中,我们定义了一个表单,绑定了提交事件 login。在事件处理函数中,获取用户输入的用户名和密码,并进行校验。如果校验通过,就向服务器发送登录请求,获取登录结果。根据登录结果进行相应的处理,如跳转到主界面或者提示登录失败。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值