uni-app编写登录页面
时间: 2023-08-03 16:05:52 浏览: 48
Uni-app是一款跨平台的开发框架,可以使用Vue.js语法来开发微信小程序、H5、Android、iOS等多个平台的应用程序。下面是编写登录页面的步骤:
1. 创建一个新的uni-app项目,可以使用HBuilderX等工具进行创建。
2. 在项目的`pages`目录下创建一个新的页面,例如`login.vue`。
3. 在`login.vue`中编写页面布局和样式,例如:
```html
<template>
<div class="login">
<form>
<input type="text" placeholder="请输入用户名" v-model="username">
<input type="password" placeholder="请输入密码" v-model="password">
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<style>
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
width: 300px;
height: 40px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
width: 300px;
height: 40px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
```
4. 在`login.vue`中编写登录逻辑,例如:
```javascript
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 进行登录操作
console.log('username:', this.username)
console.log('password:', this.password)
}
}
}
</script>
```
在`login`方法中可以编写向服务器发送登录请求的代码,例如使用`uni.request`方法发送POST请求。
5. 在`pages.json`文件中添加`login`页面的配置,例如:
```json
{
"pages": [
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}
]
}
```
6. 运行uni-app项目,即可在应用程序中查看到登录页面。