Matarialize中文社区-UniApp 实战项目：开发一个完整的跨端应用

UniApp 实战项目：开发一个完整的跨端应用

忆往昔 2024-10-08 23:04:34

104 实战项目专栏

在本篇博客中，我们将开发一个完整的跨端应用，包含用户认证、数据管理和消息推送等功能。我们会逐步实现每个功能模块，并确保应用可以在 H5、App 和小程序等多个平台上运行。下面是本项目的功能概览和详细代码实现。

项目概述

我们将开发一个简单的待办事项应用，用户可以通过该应用进行注册、登录、管理待办事项和接收消息推送。具体功能如下：

用户注册与登录
待办事项的增删改查
消息推送（例如，提醒用户完成待办事项）

1. 环境搭建

1.1 安装 HBuilderX

首先，确保安装 HBuilderX，下载地址：HBuilderX。安装完成后，打开 HBuilderX 并创建一个新的 UniApp 项目。

1.2 创建项目结构

在项目中创建以下结构：

/todo-app
  ├── /pages
  │   ├── /login
  │   │   └── login.vue
  │   ├── /register
  │   │   └── register.vue
  │   ├── /todo
  │   │   └── todo.vue
  ├── /store
  │   └── index.js
  ├── /utils
  │   └── api.js
  └── App.vue

2. 用户认证

我们将使用一个简单的 REST API 实现用户注册和登录功能。为了模拟 API，我们可以使用 JSONPlaceholder 或自行搭建一个 Node.js API。以下示例将展示如何使用 uni.request 进行网络请求。

2.1 API 准备

我们将假设存在一个 REST API，提供以下两个接口：

POST /api/register：用于用户注册
POST /api/login：用于用户登录

示例：api.js

// /utils/api.js
const API_URL = 'https://jsonplaceholder.typicode.com'; // 替换为实际 API

export const registerUser = async (userData) => {
  return uni.request({
    url: `${API_URL}/register`,
    method: 'POST',
    data: userData,
  });
};

export const loginUser = async (userData) => {
  return uni.request({
    url: `${API_URL}/login`,
    method: 'POST',
    data: userData,
  });
};

2.2 注册页面

示例：register.vue

<template>
  <view class="container">
    <form @submit.prevent="register">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">注册</button>
    </form>
  </view>
</template>

<script>
import { registerUser } from '@/utils/api.js';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async register() {
      try {
        const response = await registerUser({ username: this.username, password: this.password });
        if (response[1].status === 200) {
          uni.showToast({ title: '注册成功', icon: 'success' });
          setTimeout(() => {
            uni.navigateTo({ url: '/pages/login/login.vue' });
          }, 1500);
        } else {
          uni.showToast({ title: '注册失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '请求失败', icon: 'none' });
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

2.3 登录页面

示例：login.vue

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

<script>
import { loginUser } from '@/utils/api.js';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await loginUser({ username: this.username, password: this.password });
        if (response[1].status === 200) {
          uni.showToast({ title: '登录成功', icon: 'success' });
          // 保存用户信息
          uni.setStorageSync('userInfo', response[1].data);
          uni.navigateTo({ url: '/pages/todo/todo.vue' });
        } else {
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '请求失败', icon: 'none' });
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

3. 待办事项管理

用户登录后，可以访问待办事项页面，在此页面中用户可以添加、删除和查看待办事项。

3.1 待办事项页面

示例：todo.vue

<template>
  <view class="container">
    <input v-model="newTodo" placeholder="添加待办事项" />
    <button @click="addTodo">添加</button>
    <view v-for="(todo, index) in todos" :key="index">
      <text>{{ todo }}</text>
      <button @click="removeTodo(index)">删除</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  onLoad() {
    // 从本地存储中加载待办事项
    const storedTodos = uni.getStorageSync('todos') || [];
    this.todos = storedTodos;
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push(this.newTodo);
        uni.setStorageSync('todos', this.todos);
        this.newTodo = '';
      } else {
        uni.showToast({ title: '待办事项不能为空', icon: 'none' });
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      uni.setStorageSync('todos', this.todos);
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

4. 消息推送

为了模拟消息推送功能，我们将简单使用定时器向用户展示待办事项的提醒。

4.1 消息推送功能

在待办事项页面中添加定时器，每隔一段时间提醒用户完成待办事项。

修改：todo.vue

export default {
  data() {
    return {
      newTodo: '',
      todos: [],
      timer: null // 定时器
    };
  },
  onLoad() {
    const storedTodos = uni.getStorageSync('todos') || [];
    this.todos = storedTodos;

    // 开始消息推送
    this.startPushNotification();
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push(this.newTodo);
        uni.setStorageSync('todos', this.todos);
        this.newTodo = '';
      } else {
        uni.showToast({ title: '待办事项不能为空', icon: 'none' });
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      uni.setStorageSync('todos', this.todos);
    },
    startPushNotification() {
      this.timer = setInterval(() => {
        if (this.todos.length) {
          uni.showToast({ title: `你还有 ${this.todos.length} 个待办事项未完成！`, icon: 'none' });
        }
      }, 10000); // 每 10 秒提醒一次
    },
    onUnload() {
      // 清理定时器
      clearInterval(this.timer);
    }
  }
};