Web App开发基础知识：从零构建现代化Web应用

在移动互联网时代，我们每天都在使用各种Web应用：在线文档、社交媒体、电商平台...这些通过浏览器访问的应用统称为Web App。与传统的网站不同，Web App提供了类似原生应用的交互体验，却无需下载安装。随着PWA（渐进式Web应用）技术的发展，Web App正在变得越来越强大！

Web App

Web App（Web Application）是通过Web技术（HTML、CSS、JavaScript）构建的应用程序，运行在浏览器环境中，具有以下特点：

交互性强：提供丰富的用户交互
数据驱动：与服务器频繁交换数据
功能完整：能完成复杂业务逻辑
跨平台：在任何有浏览器的设备上运行

Web App核心技术栈

1. HTML5 - 应用骨架

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的Web App</title>
    <!-- PWA配置 -->
    <link rel="manifest" href="manifest.json">
    <!-- 移动端适配 -->
    <meta name="theme-color" content="#2196F3">
</head>
<body>
    <!-- 应用外壳 -->
    <div id="app">
        <header class="app-header">
            <h1>我的任务管理器</h1>
        </header>
        
        <main class="app-main">
            <!-- 动态内容区域 -->
            <div id="content"></div>
        </main>
        
        <footer class="app-footer">
            <nav class="bottom-nav">
                <button class="nav-item active" data-page="home">首页</button>
                <button class="nav-item" data-page="tasks">任务</button>
                <button class="nav-item" data-page="profile">我的</button>
            </nav>
        </footer>
    </div>

    <!-- 服务Worker注册 -->
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js');
        }
    </script>
</body>
</html>

2. CSS3 - 应用样式

css 复制代码

/* 移动优先的响应式设计 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 应用布局 */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    background: #2196F3;
    color: white;
    padding: 1rem;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-main {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

.app-footer {
    border-top: 1px solid #e0e0e0;
    background: white;
}

/* 底部导航 */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
}

.nav-item {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item.active {
    background: #2196F3;
    color: white;
}

/* 任务列表样式 */
.task-list {
    list-style: none;
}

.task-item {
    background: white;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-item.completed {
    opacity: 0.6;
    text-decoration: line-through;
}

/* 响应式设计 */
@media (min-width: 768px) {
    #app {
        max-width: 400px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        min-height: 80vh;
        margin-top: 5vh;
    }
}

3. JavaScript - 应用逻辑

javascript 复制代码

// 应用状态管理
class TaskManager {
    constructor() {
        this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        this.currentPage = 'home';
        this.init();
    }

    init() {
        this.bindEvents();
        this.render();
    }

    bindEvents() {
        // 导航事件
        document.querySelectorAll('.nav-item').forEach(button => {
            button.addEventListener('click', (e) => {
                this.switchPage(e.target.dataset.page);
            });
        });

        // 添加任务事件
        document.getElementById('addTaskBtn')?.addEventListener('click', () => {
            this.addTask();
        });

        // 任务操作事件委托
        document.getElementById('taskList')?.addEventListener('click', (e) => {
            if (e.target.classList.contains('complete-btn')) {
                this.toggleTask(e.target.dataset.id);
            }
            if (e.target.classList.contains('delete-btn')) {
                this.deleteTask(e.target.dataset.id);
            }
        });
    }

    switchPage(page) {
        this.currentPage = page;
        
        // 更新导航状态
        document.querySelectorAll('.nav-item').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.page === page);
        });
        
        this.render();
    }

    render() {
        const content = document.getElementById('content');
        
        switch(this.currentPage) {
            case 'home':
                content.innerHTML = this.renderHome();
                break;
            case 'tasks':
                content.innerHTML = this.renderTasks();
                break;
            case 'profile':
                content.innerHTML = this.renderProfile();
                break;
        }
    }

    renderHome() {
        const completed = this.tasks.filter(task => task.completed).length;
        const total = this.tasks.length;
        
        return `
            <div class="home-page">
                <div class="stats-card">
                    <h3>任务统计</h3>
                    <div class="stats">
                        <div class="stat-item">
                            <span class="stat-number">${total}</span>
                            <span class="stat-label">总任务</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">${completed}</span>
                            <span class="stat-label">已完成</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">${total - completed}</span>
                            <span class="stat-label">待完成</span>
                        </div>
                    </div>
                </div>
                
                <div class="quick-actions">
                    <button id="addTaskBtn" class="btn-primary">添加新任务</button>
                </div>
            </div>
        `;
    }

    renderTasks() {
        return `
            <div class="tasks-page">
                <div class="task-input">
                    <input type="text" id="taskInput" placeholder="输入新任务...">
                    <button id="addTaskBtn" class="btn-primary">添加</button>
                </div>
                
                <ul id="taskList" class="task-list">
                    ${this.tasks.map(task => `
                        <li class="task-item ${task.completed ? 'completed' : ''}">
                            <span>${task.text}</span>
                            <div class="task-actions">
                                <button class="complete-btn" data-id="${task.id}">
                                    ${task.completed ? '取消完成' : '完成'}
                                </button>
                                <button class="delete-btn" data-id="${task.id}">删除</button>
                            </div>
                        </li>
                    `).join('')}
                </ul>
            </div>
        `;
    }

    renderProfile() {
        return `
            <div class="profile-page">
                <div class="user-card">
                    <h3>用户信息</h3>
                    <p>这是一个简单的Web App示例</p>
                </div>
                <div class="app-info">
                    <h4>关于应用</h4>
                    <p>版本: 1.0.0</p>
                    <button id="clearData" class="btn-secondary">清除所有数据</button>
                </div>
            </div>
        `;
    }

    addTask() {
        const input = document.getElementById('taskInput');
        const text = input?.value.trim();
        
        if (text) {
            const newTask = {
                id: Date.now().toString(),
                text: text,
                completed: false,
                createdAt: new Date().toISOString()
            };
            
            this.tasks.push(newTask);
            this.saveTasks();
            this.render();
            
            if (input) input.value = '';
        }
    }

    toggleTask(taskId) {
        const task = this.tasks.find(t => t.id === taskId);
        if (task) {
            task.completed = !task.completed;
            this.saveTasks();
            this.render();
        }
    }

    deleteTask(taskId) {
        this.tasks = this.tasks.filter(t => t.id !== taskId);
        this.saveTasks();
        this.render();
    }

    saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', () => {
    new TaskManager();
});

4. PWA配置文件

json 复制代码

// manifest.json
{
    "name": "我的任务管理器",
    "short_name": "任务管理",
    "description": "一个简单的任务管理Web App",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2196F3",
    "orientation": "portrait",
    "icons": [
        {
            "src": "icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}