uni-app课程《UniApp开发教程》的章节

针对您提到的uni-app课程《UniApp开发教程》的章节，我将通过提供一个具体的代码案例来展示uni-app开发中常见的一个功能实现，即使用uni-app创建一个简单的登录页面。这个案例将涵盖页面布局、数据绑定以及事件处理的基本用法，适合作为课程中的一个实践环节。

章节标题：创建登录页面

1. 项目结构

首先，确保您的uni-app项目已经创建。在项目根目录下，通常会有pages文件夹，用于存放各个页面。

2. 登录页面布局（login.vue）

在pages文件夹下创建一个新的login文件夹，并在其中创建login.vue文件。

<template>
  <view class="container">
    <input v-model="username" placeholder="用户名" />
    <input type="password" v-model="password" placeholder="密码" />
    <button @click="login">登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123456') {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        // 跳转到首页或其他页面
        uni.redirectTo({
          url: '/pages/home/home'
        });
      } else {
        uni.showToast({
          title: '用户名或密码错误',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
input {
  margin: 10px;
  padding: 10px;
  width: 80%;
}
button {
  padding: 10px 20px;
  width: 80%;
  background-color: #1aad19;
  color: white;
}
</style>

3. 配置页面路径

在pages.json文件中添加新页面的路径配置：

{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    // 其他页面配置...
  ]
}

总结

以上代码展示了一个简单的登录页面实现，包括用户输入用户名和密码，以及点击登录按钮后的逻辑处理。这个案例可以作为《UniApp开发教程》中关于页面布局、数据绑定和事件处理章节的实践内容，帮助学生理解uni-app的基本开发流程。