各位听众，大家好！我是今天的主讲人，很高兴能和大家一起探讨如何用 UniCloud 和 uni-app 这对“黄金搭档”打造全栈应用。今天咱们不搞那些虚头巴脑的，直接上干货！
一、 啥是 UniCloud 和 uni-app？先来个“相亲式”介绍
咱们先来认识一下今天的主角：
-
uni-app: 就像一个“百变金刚”，一套代码，多端运行！ 它可以编译成 iOS、Android、H5、小程序等各种平台的应用。 简单来说，你写一次代码，就可以在各种手机、电脑、甚至电视上跑，省时省力！
-
UniCloud: 就是个“云端管家”，提供云函数、云数据库、云存储等服务，让你不用自己搭建服务器，就可以轻松搞定后端。 想象一下，你不用自己买服务器、配环境、维护数据库，所有这些都交给 UniCloud，你只需要专注于业务逻辑，是不是爽歪歪？
它们俩结合，简直就是前端和后端的完美CP，能让你快速构建全栈应用！
二、 为什么选择 UniCloud + uni-app？ 优势盘点
这对CP有啥优势呢？ 咱们列个表格，看得更清楚：
| 优势 | 说明 |
|---|---|
| 开发效率高 | uni-app 一套代码多端运行，减少重复开发； UniCloud 免运维，无需自己搭建服务器，大大缩短开发周期。 |
| 成本低 | uni-app 降低了多端开发的成本； UniCloud 按需付费，降低了服务器和运维成本，对于小团队和个人开发者来说，非常友好。 |
| 学习曲线平缓 | uni-app 使用 Vue.js 作为开发框架，如果你熟悉 Vue，上手很快； UniCloud 的云函数使用 JavaScript 编写，前端工程师很容易掌握。 |
| 生态完善 | DCloud 官方和社区提供了丰富的组件、插件和模板，可以快速搭建应用； UniCloud 也提供了完善的文档和示例，方便开发者学习和使用。 |
| 易于扩展 | UniCloud 可以方便地集成第三方服务，例如支付、推送等，扩展应用的功能； uni-app 也可以通过插件扩展原生能力，满足更复杂的需求。 |
| 前后端一体化 | uni-app 可以直接调用 UniCloud 的云函数，实现前后端无缝连接，开发体验非常流畅。 |
三、 实战演练： 打造一个简单的 TodoList 应用
光说不练假把式，咱们来个实战，用 UniCloud 和 uni-app 做一个简单的 TodoList 应用，让你体验一下它们的魅力。
1. 创建 uni-app 项目
首先，用 HBuilderX 创建一个 uni-app 项目，选择 uni-app 模板。
2. 创建 UniCloud 服务空间
在 HBuilderX 中，关联或创建一个 UniCloud 服务空间。
3. 定义数据结构
TodoList 应用需要存储任务信息，包括任务内容、是否完成等。 在 UniCloud 的云数据库中，创建一个名为 todos 的集合，定义以下字段：
{
"content": "string", // 任务内容
"completed": "boolean", // 是否完成
"create_date": "timestamp" // 创建时间
}4. 编写云函数
接下来，编写云函数来操作数据库。
-
getTodos: 获取所有 Todo 任务。
// cloudfunctions/getTodos/index.js const db = uniCloud.database() exports.main = async (event, context) => { const res = await db.collection('todos').orderBy('create_date', 'desc').get() return res } -
addTodo: 添加新的 Todo 任务。
// cloudfunctions/addTodo/index.js const db = uniCloud.database() exports.main = async (event, context) => { const { content } = event const res = await db.collection('todos').add({ content, completed: false, create_date: Date.now() }) return res } -
updateTodo: 更新 Todo 任务的状态。
// cloudfunctions/updateTodo/index.js const db = uniCloud.database() exports.main = async (event, context) => { const { id, completed } = event const res = await db.collection('todos').doc(id).update({ completed }) return res } -
deleteTodo: 删除 Todo 任务。
// cloudfunctions/deleteTodo/index.js const db = uniCloud.database() exports.main = async (event, context) => { const { id } = event const res = await db.collection('todos').doc(id).remove() return res }注意： 部署云函数后，记得配置安全规则，避免数据泄露。 简单的可以设置读写权限为"仅创建者可读写"，复杂场景需要根据实际情况进行配置。
5. 编写前端代码
在 uni-app 项目中，编写前端代码来调用云函数，实现 TodoList 的增删改查功能。
-
template: 页面结构
<template> <view class="container"> <view class="add-todo"> <input type="text" v-model="newTodo" placeholder="添加新的任务" @confirm="addTodo" /> <button @click="addTodo">添加</button> </view> <view class="todo-list"> <view class="todo-item" v-for="todo in todos" :key="todo._id"> <checkbox :checked="todo.completed" @change="updateTodo(todo._id, !todo.completed)" /> <text :class="{ completed: todo.completed }">{{ todo.content }}</text> <button @click="deleteTodo(todo._id)">删除</button> </view> </view> </view> </template> -
script: 页面逻辑
<script> export default { data() { return { newTodo: '', todos: [] } }, onLoad() { this.getTodos() }, methods: { async getTodos() { const res = await uniCloud.callFunction({ name: 'getTodos' }) this.todos = res.result.data }, async addTodo() { if (!this.newTodo.trim()) { return } await uniCloud.callFunction({ name: 'addTodo', data: { content: this.newTodo } }) this.newTodo = '' this.getTodos() }, async updateTodo(id, completed) { await uniCloud.callFunction({ name: 'updateTodo', data: { id, completed } }) this.getTodos() }, async deleteTodo(id) { await uniCloud.callFunction({ name: 'deleteTodo', data: { id } }) this.getTodos() } } } </script> -
style: 页面样式 ( 可选 )
<style> .container { padding: 20px; } .add-todo { display: flex; margin-bottom: 20px; } .add-todo input { flex: 1; padding: 10px; border: 1px solid #ccc; } .add-todo button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } .todo-list { margin-top: 20px; } .todo-item { display: flex; align-items: center; margin-bottom: 10px; } .todo-item checkbox { margin-right: 10px; } .todo-item text { flex: 1; } .todo-item button { padding: 5px 10px; background-color: #dc3545; color: #fff; border: none; cursor: pointer; } .completed { text-decoration: line-through; color: #999; } </style>
6. 运行项目
在 HBuilderX 中，选择运行到浏览器、App 或小程序，就可以看到效果了。 你的 TodoList 应用就跑起来了！
四、 进阶技巧： 让你的应用更上一层楼
掌握了基本用法，咱们再来聊聊进阶技巧，让你的应用更上一层楼。
-
使用云对象: 云对象是 UniCloud 提供的一种更高级的云函数封装，可以更好地组织代码，提高开发效率。 你可以将相关的云函数封装成一个云对象，方便调用和管理。
-
使用数据库事务: 对于需要保证数据一致性的操作，可以使用数据库事务。 例如，在电商应用中，下单时需要同时扣减库存和生成订单，可以使用事务来保证这两个操作要么都成功，要么都失败。
-
使用云存储: UniCloud 提供了云存储服务，可以存储图片、视频等文件。 你可以将用户上传的头像、商品图片等存储到云存储中，减轻服务器的压力。
-
使用定时触发器: UniCloud 提供了定时触发器，可以定时执行云函数。 例如，你可以定时清理过期数据、发送邮件等。
-
优化云函数性能: 云函数的性能直接影响应用的响应速度。 可以通过以下方式优化云函数性能：
- 减少网络请求: 尽量减少云函数对其他服务的调用。
- 使用缓存: 对于不经常变化的数据，可以使用缓存。
- 优化数据库查询: 尽量使用索引，避免全表扫描。
- 使用 CDN: 对于静态资源，可以使用 CDN 加速访问。
五、 常见问题与解决方案
在使用 UniCloud 和 uni-app 的过程中，可能会遇到一些问题，咱们来分析一下常见问题及解决方案：
| 问题 | 解决方案 |
|---|---|
| 云函数调用失败 | 1. 检查云函数是否部署成功； 2. 检查云函数的名称是否正确； 3. 检查云函数的入参是否正确； 4. 查看 UniCloud 控制台的日志，排查错误原因。 |
| 数据库操作失败 | 1. 检查数据库连接是否正常； 2. 检查数据库权限是否正确； 3. 检查 SQL 语句是否正确； 4. 查看 UniCloud 控制台的日志，排查错误原因。 |
| 前端页面显示异常 | 1. 检查前端代码是否正确； 2. 检查数据绑定是否正确； 3. 查看浏览器控制台的错误信息，排查错误原因； 4. 清理浏览器缓存，重新加载页面。 |
| 跨域问题 | 在 UniCloud 的 config.json 文件中配置 cors 选项，允许跨域访问。 |
| 性能问题 | 1. 优化云函数代码，减少计算量； 2. 使用 CDN 加速静态资源； 3. 优化数据库查询，使用索引； 4. 使用缓存。 |
| H5端白屏 | 1、检查引入的包是否存在问题; 2、检查路由跳转是否正常，是否有死循环; 3、检查是否缺少polyfill兼容。 |
六、 总结： UniCloud + uni-app，未来可期！
UniCloud 和 uni-app 的结合，为我们提供了一种快速、高效、低成本的全栈应用开发方案。 无论是个人开发者还是企业团队，都可以利用它们来构建各种类型的应用。 随着 DCloud 官方和社区的不断发展，相信 UniCloud 和 uni-app 的未来会更加美好！
好了，今天的分享就到这里。 希望大家能够从中受益，用 UniCloud 和 uni-app 打造出更多精彩的应用！ 谢谢大家！