微信小程序输入账号密码点击按钮登录事件示例代码
时间: 2023-06-24 08:04:09 浏览: 67
以下是一个简单的微信小程序登录页面的示例代码,包括输入账号密码和点击登录按钮的事件处理:
WXML 文件:
```html
<view class="container">
<view class="form-group">
<text>账号:</text>
<input type="text" placeholder="请输入账号" bindinput="bindAccountInput" />
</view>
<view class="form-group">
<text>密码:</text>
<input type="password" placeholder="请输入密码" bindinput="bindPasswordInput" />
</view>
<button type="primary" bindtap="login">登录</button>
</view>
```
JS 文件:
```javascript
Page({
data: {
account: '',
password: ''
},
bindAccountInput: function(e) {
this.setData({
account: e.detail.value
})
},
bindPasswordInput: function(e) {
this.setData({
password: e.detail.value
})
},
login: function() {
if (this.data.account && this.data.password) {
// 发起登录请求
wx.request({
url: 'https://example.com/api/login',
method: 'POST',
data: {
account: this.data.account,
password: this.data.password
},
success: function(res) {
// 登录成功,跳转到首页
wx.switchTab({
url: '/pages/index/index'
})
},
fail: function(res) {
// 登录失败,提示用户错误信息
wx.showToast({
title: '登录失败,请检查账号密码',
icon: 'none'
})
}
})
} else {
// 如果账号或密码为空,提示用户输入
wx.showToast({
title: '请填写账号密码',
icon: 'none'
})
}
}
})
```
其中,`bindinput` 事件用于监听输入框的输入事件,`bindtap` 事件用于监听按钮的点击事件。在登录按钮被点击时,会发起一个 POST 请求到后端 API,传递账号和密码,并根据返回的结果进行相应的操作。如果登录成功,则跳转到首页;否则提示用户错误信息。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)