可以帮忙写个微信小程序的登录页面吗
当然可以。
以下是一个简单的微信小程序的登录页面的代码示例:
<!-- login.wxml -->
<view class="container">
<image class="logo" src="/images/logo.png"></image>
<view class="form">
<input class="input" placeholder="请输入用户名" bindinput="onUsernameInput"></input>
<input class="input" type="password" placeholder="请输入密码" bindinput="onPasswordInput"></input>
<button class="btn" bindtap="onLogin">登录</button>
</view>
</view>
/* login.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #F2F2F2;
}
.logo {
width: 200rpx;
height: 200rpx;
margin-bottom: 50rpx;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 50rpx;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.input {
width: 100%;
height: 80rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
padding: 0 20rpx;
border: 1rpx solid #CCCCCC;
border-radius: 5rpx;
outline: none;
}
.btn {
width: 100%;
height: 80rpx;
background-color: #4D7FFF;
color: #FFFFFF;
font-size: 32rpx;
border: none;
border-radius: 5rpx;
outline: none;
}
// login.js
Page({
data: {
username: '',
password: ''
},
onUsernameInput(event) {
this.setData({
username: event.detail.value
})
},
onPasswordInput(event) {
this.setData({
password: event.detail.value
})
},
onLogin() {
if (!this.data.username || !this.data.password) {
wx.showToast({
title: '请输入用户名和密码',
icon: 'none'
})
return
}
// TODO: 发送登录请求
wx.showToast({
title: '登录成功'
})
// 跳转到首页
wx.switchTab({
url: '/pages/home/home'
})
}
})
以上代码实现了一个简单的登录页面,包括一个输入用户名和密码的表单,以及一个登录按钮。在点击登录按钮时,会进行输入校验,并且发送登录请求。如果校验失败,会提示用户输入用户名和密码。如果登录成功,会跳转到首页。
需要注意的是,以上代码仅供参考,具体实现方式可能因需求而异。需要根据实际需求进行修改和完善
原文地址: https://www.cveoy.top/t/topic/eJxt 著作权归作者所有。请勿转载和采集!