用微信小程序语法写一个登录首页
时间: 2023-02-27 19:29:10 浏览: 59
微信小程序采用的是基于 JavaScript 的语法,下面是一个简单的登录首页的代码示例:
```
// pages/index/index.js
Page({
data: {
userName: '',
password: '',
isLogin: false
},
onLoad: function() {
// 判断是否已经登录
if (wx.getStorageSync('userInfo')) {
this.setData({
isLogin: true
})
}
},
bindUserNameInput: function(e) {
this.setData({
userName: e.detail.value
})
},
bindPasswordInput: function(e) {
this.setData({
password: e.detail.value
})
},
login: function() {
if (this.data.userName === '' || this.data.password === '') {
wx.showToast({
title: '用户名或密码不能为空',
icon: 'none'
})
} else {
wx.setStorageSync('userInfo', {
userName: this.data.userName,
password: this.data.password
})
this.setData({
isLogin: true
})
wx.showToast({
title: '登录成功',
icon: 'success'
})
}
}
})
// pages/index/index.wxml
<view class="container">
<view class="form" wx:if="{{!isLogin}}">
<view class="form-item">
<input class="form-input" placeholder="请输入用户名" bindinput="bindUserNameInput" />
</view>
<view class="form-item">
<input class="form-input" placeholder="请输入密码" password="true" bindinput="bindPasswordInput" />
</view>
<button class="form-button" bindtap="login">登录</button>
</view>
<view class="welcome" wx:if="{{isLogin}}">
<text>欢迎你,{{userName}}</text>
</view>
</view>
// pages/index/index.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
}
.form-item {
margin-bottom: 20rpx;
}
.form-input {
height: 40rpx;
padding
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)