uniapp 登录注册页面代码
时间: 2023-08-26 19:04:59 浏览: 146
以下是一个基本的uniapp登录注册页面代码示例:
```
<template>
<view>
<view v-if="!isLogin">
<input type="text" v-model="username" placeholder="请输入用户名"/>
<input type="password" v-model="password" placeholder="请输入密码"/>
<button @click="login">登录</button>
</view>
<view v-else>
<p>欢迎,{{ username }}</p>
<button @click="logout">退出登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin: false,
username: '',
password: ''
}
},
methods: {
login() {
// 在此处添加登录验证逻辑
// 如果验证通过,则将isLogin设置为true,并将用户名存储在本地存储中
// 如果验证不通过,可以在此处添加错误提示信息
uni.setStorageSync('username', this.username)
this.isLogin = true
},
logout() {
uni.removeStorageSync('username')
this.isLogin = false
this.username = ''
this.password = ''
}
},
onLoad() {
const username = uni.getStorageSync('username')
if (username) {
this.isLogin = true
this.username = username
}
}
}
</script>
```
该代码包括一个登录表单和一个注册表单,当用户填写完表单并点击“登录”按钮时,将执行`login`方法。该方法将验证用户名和密码是否正确,如果验证通过,则将`isLogin`设置为`true`并将用户名存储在本地存储中。如果验证不通过,则可以在此处添加错误提示信息。
当用户成功登录后,将显示一个欢迎消息,并显示一个“退出登录”按钮,当用户单击该按钮时,将执行`logout`方法,该方法将将`isLogin`设置为`false`并从本地存储中删除用户名。