Uniapp跨平台开发实战：构建全平台待办事项应用教程 | 前端技术指南

一、Uniapp简介与开发环境搭建

Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.1 环境准备

首先需要安装HBuilderX，这是DCloud官方推出的IDE，提供了完善的Uniapp开发环境。

下载地址：https://www.dcloud.io/hbuilderx.html

1.2 创建项目

打开HBuilderX，点击文件→新建→项目，选择Uniapp项目模板，填写项目名称和路径，选择默认模板。

二、项目结构与配置

Uniapp项目基本目录结构如下：

├── pages                 // 页面文件目录
│   └── index
│       └── index.vue     // 首页页面
├── static               // 静态资源目录
├── App.vue             // 应用配置，用来配置App全局样式以及监听
├── main.js             // Vue初始化入口文件
├── manifest.json       // 配置应用名称、appid、logo、版本等打包信息
├── pages.json          // 配置页面路由、导航条、选项卡等页面类信息
└── uni.scss            // 全局样式变量
        

2.1 配置pages.json

我们需要在pages.json中配置页面路由和窗口表现：

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "待办事项"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "待办事项",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}
        

三、开发待办事项应用

3.1 设计数据结构

我们的待办事项应用需要存储任务内容、完成状态和创建时间：

data() {
    return {
        todoList: [],          // 待办事项列表
        inputValue: '',        // 输入框内容
        // 示例数据
        // {id: 1, content: '学习Uniapp', completed: false, createTime: 1621234567890}
    }
}
        

3.2 实现页面布局

在pages/index/index.vue中编写页面模板：

<template>
    <view class="container">
        <view class="header">
            <text class="title">待办事项</text>
        </view>
        
        <view class="input-area">
            <input 
                class="input" 
                v-model="inputValue" 
                placeholder="添加新任务..." 
                @confirm="addTodo"
            />
            <button class="add-btn" @click="addTodo">添加</button>
        </view>
        
        <view class="todo-list">
            <view 
                v-for="(item, index) in todoList" 
                :key="item.id" 
                class="todo-item"
                :class="{completed: item.completed}"
            >
                <checkbox 
                    :checked="item.completed" 
                    @click="toggleTodo(index)" 
                />
                <text class="todo-content">{{item.content}}</text>
                <text class="delete-btn" @click="deleteTodo(index)">删除</text>
            </view>
        </view>
        
        <view class="footer" v-if="todoList.length > 0">
            <text>总计: {{todoList.length}} 任务, 已完成: {{completedCount}}</text>
        </view>
    </view>
</template>
        

3.3 实现业务逻辑

在Vue的methods中添加交互功能：

methods: {
    // 添加待办事项
    addTodo() {
        if (!this.inputValue.trim()) {
            uni.showToast({
                title: '内容不能为空',
                icon: 'none'
            });
            return;
        }
        
        const newTodo = {
            id: Date.now(),
            content: this.inputValue,
            completed: false,
            createTime: Date.now()
        };
        
        this.todoList.push(newTodo);
        this.inputValue = '';
        this.saveTodos();
    },
    
    // 切换完成状态
    toggleTodo(index) {
        this.todoList[index].completed = !this.todoList[index].completed;
        this.saveTodos();
    },
    
    // 删除待办事项
    deleteTodo(index) {
        this.todoList.splice(index, 1);
        this.saveTodos();
    },
    
    // 保存到本地存储
    saveTodos() {
        uni.setStorageSync('todoList', this.todoList);
    },
    
    // 从本地存储加载
    loadTodos() {
        const todos = uni.getStorageSync('todoList');
        if (todos) {
            this.todoList = todos;
        }
    }
}
        

3.4 添加计算属性

使用计算属性统计已完成任务数量：

computed: {
    completedCount() {
        return this.todoList.filter(item => item.completed).length;
    }
}
        

3.5 添加样式

在style部分添加样式美化界面：

.container {
    padding: 20rpx;
}

.header {
    margin-bottom: 30rpx;
}

.title {
    font-size: 40rpx;
    font-weight: bold;
}

.input-area {
    display: flex;
    margin-bottom: 30rpx;
}

.input {
    flex: 1;
    border: 1px solid #eee;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.add-btn {
    background-color: #007AFF;
    color: white;
    padding: 0 30rpx;
    border-radius: 10rpx;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
}

.todo-content {
    flex: 1;
    margin-left: 20rpx;
}

.completed .todo-content {
    text-decoration: line-through;
    color: #888;
}

.delete-btn {
    color: #FF3B30;
    font-size: 24rpx;
}

.footer {
    margin-top: 30rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
        

四、数据持久化存储

为了让应用关闭后数据不丢失，我们使用Uniapp的本地存储API：

// 在页面加载时读取数据
onLoad() {
    this.loadTodos();
}

// 在methods中添加保存和读取方法
saveTodos() {
    try {
        uni.setStorageSync('todoList', this.todoList);
    } catch (e) {
        uni.showToast({
            title: '保存失败',
            icon: 'none'
        });
    }
},

loadTodos() {
    try {
        const todos = uni.getStorageSync('todoList');
        if (todos) {
            this.todoList = todos;
        }
    } catch (e) {
        uni.showToast({
            title: '读取失败',
            icon: 'none'
        });
    }
}
        

五、多平台适配与发布

5.1 条件编译

Uniapp提供了条件编译功能，可以针对不同平台编写特定代码：

// #ifdef MP-WEIXIN
console.log('这是微信小程序平台');
// #endif

// #ifdef H5
console.log('这是H5平台');
// #endif

// #ifdef APP-PLUS
console.log('这是App平台');
// #endif
        

5.2 发布到不同平台

发布到H5： 在HBuilderX中点击”发行”→”网站-H5手机版”

发布到微信小程序： 在manifest.json中配置微信小程序AppID，然后点击”发行”→”小程序-微信”

发布到App： 需要配置证书和打包设置，然后点击”发行”→”原生App-云打包”

六、功能扩展建议

至此，我们已经完成了一个基础的待办事项应用。你可以进一步扩展以下功能：

• 添加任务分类和标签
• 实现任务优先级排序
• 添加任务提醒功能
• 实现数据云同步
• 添加任务分享功能
• 实现暗黑模式主题切换

七、总结

通过本教程，我们学习了如何使用Uniapp开发一个完整的跨平台待办事项应用。Uniapp的强大之处在于其”一次开发，多端发布”的能力，大大提高了开发效率。

在实际项目中，你可能还需要考虑更多细节，如性能优化、用户体验、错误处理等。希望本教程能为你入门Uniapp开发提供帮助！