用微信小程序代码写一个不用数据库的注册以及登录页面
时间: 2024-03-23 09:36:49 浏览: 16
好的,以下是一个用微信小程序代码实现的不用数据库的注册以及登录页面的示例:
注册页面:
```html
<view class="container">
<view class="title">注册</view>
<form bindsubmit="register">
<view class="input-group">
<input name="username" placeholder="用户名" required="true" />
</view>
<view class="input-group">
<input name="password" type="password" placeholder="密码" required="true" />
</view>
<view class="input-group">
<input name="confirmPassword" type="password" placeholder="确认密码" required="true" />
</view>
<view class="actions">
<button formType="submit">注册</button>
<button bindtap="goToLogin">已有账号,去登录</button>
</view>
</form>
</view>
```
注册页面的逻辑:
```javascript
Page({
register: function(e) {
const username = e.detail.value.username;
const password = e.detail.value.password;
const confirmPassword = e.detail.value.confirmPassword;
if (password !== confirmPassword) {
wx.showToast({
title: '两次输入的密码不一致',
icon: 'none',
duration: 2000
});
return;
}
wx.setStorageSync('username', username);
wx.setStorageSync('password', password);
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 2000
});
wx.redirectTo({
url: '/pages/login/login'
});
},
goToLogin: function() {
wx.redirectTo({
url: '/pages/login/login'
});
}
});
```
登录页面:
```html
<view class="container">
<view class="title">登录</view>
<form bindsubmit="login">
<view class="input-group">
<input name="username" placeholder="用户名" required="true" />
</view>
<view class="input-group">
<input name="password" type="password" placeholder="密码" required="true" />
</view>
<view class="actions">
<button formType="submit">登录</button>
<button bindtap="goToRegister">没有账号,去注册</button>
</view>
</form>
</view>
```
登录页面的逻辑:
```javascript
Page({
login: function(e) {
const username = e.detail.value.username;
const password = e.detail.value.password;
const storedUsername = wx.getStorageSync('username');
const storedPassword = wx.getStorageSync('password');
if (username === storedUsername && password === storedPassword) {
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
});
wx.redirectTo({
url: '/pages/index/index'
});
} else {
wx.showToast({
title: '用户名或密码错误',
icon: 'none',
duration: 2000
});
}
},
goToRegister: function() {
wx.redirectTo({
url: '/pages/register/register'
});
}
});
```
这个示例中,我们使用了微信小程序提供的缓存 API 来保存用户的账号和密码信息。当用户注册时,我们将其账号和密码信息保存在缓存中;当用户登录时,我们从缓存中读取账号和密码信息,然后进行比对。如果账号和密码信息匹配,则登录成功;否则登录失败。