如何使用 Bubble：2025 年分步教程

想开发一款应用，但又觉得需要懂很多代码？

那可真是个大问题。

许多用户想要创建自己的内容、设计自己的页面，甚至发布自己的应用程序，但他们却感到束手无策。

他们想使用人工智能功能，并通过观看视频教程学习如何操作，但这似乎还遥不可及。

现在，解决方案是：泡泡。 

我们将向您展示如何使用 Bubble。

气泡

告别复杂的数据库！Bubble 让您以可视化的方式管理应用数据。立即开始构建您的数据驱动型应用！

免费试用 Bubble 阅读完整评论

设置您的 Bubble 账户

访问 Bubble 网站

构建应用程序的第一步是访问 Bubble 网站。

打开你最喜欢的网络浏览器——也就是你用来浏览网站的程序。

常用的浏览器有Chrome、Firefox、Safari或Edge。在顶部的地址栏中，输入“bubble.io”并按回车键。

这将直接带您进入 Bubble 的主页。

四处寻找类似“注册”、“开始使用”或“创建帐户”的按钮。

这是你开始建设的入场券。

注册免费账户

点击该按钮即可开始注册流程。

就像你注册邮箱或游戏账号一样，你需要提供一些信息。

Bubble 需要您的电子邮件地址以便与您联系，您还需要选择一个密码来保护您的帐户安全。

选择一个强密码——最好是字母、数字和符号的组合——并将其写下来放在安全的地方，以免忘记。

Bubble 可能还会问你一些其他问题，例如你计划用 Bubble 做什么。

别担心，只需选择最接近你想要做的选项即可。

了解气泡界面

登录后，您将看到 Bubble 界面。

这是构建应用程序的主屏幕。乍一看可能有点杂乱，但它已按类别组织。

最重要的部分是：

• 设计选项卡： 在这里，您可以直观地创建应用程序的页面。您可以拖放按钮等元素， 文本 将方框和图像放置到此区域。
• 工作流程选项卡： 在这里，你可以告诉你的应用该做什么。你可以创建“工作流”，就像给应用编写的指令，当用户点击按钮或输入内容时，应用要遵循这些指令。
• 数据选项卡： 这里是管理应用程序数据库的地方。数据库就像一个数字文件柜，用于存储信息。
• 元素树： 这会以列表的形式显示您添加到页面中的所有元素。
• 房产编辑： 点击某个元素后，此区域会显示所有可以更改其外观和行为的方式。

构建应用程序的第一页

了解可视化编辑器

可视化编辑器是您实际设计应用程序外观的地方。

它就像一张空白的画布。在屏幕左侧，你会看到一堆被称为“元素”的工具。

这些元素可以拖放到你的页面上。你可以把它们想象成数字积木。

您可以使用文本框输入文字，点击按钮，显示图片等等。

添加文本和按钮

让我们从简单的事情开始。

要添加文本，请点击“文本”元素，然后将其拖到页面中间。

现在，你可以在里面输入任何你想输入的内容。 

或许可以写成“欢迎使用我的应用！”或者“点击下方按钮。”

接下来，我们来添加一个按钮。

点击“按钮”元素并将其拖到文本下方。您可以通过在按钮内的文本框中输入内容来更改按钮上的文字。

试试“开始”或“点击这里”。

页面布局设计

现在，你可能会注意到事情有点乱。

别担心，我们可以解决这个问题。您可以点击并拖动元素来移动它们。

看到拖动时出现的那些蓝线了吗？

它们能帮你把事情安排妥当。 

尝试调整文本和按钮的位置，直到看起来合适为止。

您还可以通过点击角落的小方块并拖动来更改元素的大小。例如，您可以放大或缩小文本，或者拉伸按钮。

添加基本​​功能

了解工作流程

好了，我们已经把应用界面做得很漂亮了。

但我们该如何实现呢？ 做 某物？

这就是工作流程的作用所在。工作流程就像一套指令。

它告诉你的应用在有人点击按钮或执行其他操作时应该做什么。

让按钮执行某些操作

我们来让按钮执行一些简单的操作。

点击你创建的按钮。然后，找到名为“工作流程”的选项卡。

点击它。现在，你会看到一个按钮，上面写着“点击此处添加活动”。

“ 一个 事件 这是启动工作流程的步骤。点击该按钮。

选择“元素操作”，然后单击“单击”。

现在，我们需要告诉应用程序，当按钮被点击时该做什么。

让我们显示一条消息。点击“添加操作”。

你会看到应用可以执行的操作列表。找到并点击“提示”。在文本框中，输入你想显示的消息。例如，“你点击了按钮！”

现在，当有人点击按钮时，会弹出一个小框显示你的消息。这就是你的第一个工作流程！

添加输入字段

输入框是用户可以输入信息的地方。

你可以把它们想象成文本框，人们可以在里面填写姓名、电子邮件或其他任何信息。

要添加输入字段，请点击“输入”元素并将其拖到页面上。

就像文本和按钮一样，你可以移动它并改变它的大小。

您还可以更改输入字段需要的信息类型。

请查看属性编辑器。您可以选择它适用于文本、数字、电子邮件还是密码。

连接页面和导航

创建多个页面

大多数应用程序都有不止一个页面。

您可能拥有主页、个人资料页面或设置页面。

要创建新页面，请查找标有“新建页面”或类似字样的按钮或链接。

点击它，你会看到一个全新的空白页面。

给它起个名字，比如“个人资料”或“设置”。

使用按钮链接页面

现在，让我们实现页面间的跳转功能。

我们可以用按钮来实现这个功能。返回首页。

将按钮拖到页面上。在按钮的工作流程中，添加一个新操作。

这次，选择“导航”，然后选择“转到页面”。

然后，选择您希望按钮指向的页面。 

现在，当有人点击那个按钮时，他们就会跳转到另一个页面。

构建导航菜单

如果你有很多页面，设置导航菜单会很有帮助。

这只是应用程序顶部或底部的一排按钮，方便用户在页面之间轻松切换。

要创建导航菜单，请在页面顶部添加“Group”元素。

然后，在组内添加几个按钮。

就像之前那样，让每个按钮链接到不同的页面。现在，你就可以轻松地在应用内浏览了。

页面间数据传递

有时，您需要将信息从一个页面传递到另一个页面。

例如，如果您有个人资料页面，您可能希望将用户在首页上的姓名发送到个人资料页面。

为此，您需要使用称为“页面参数”的东西。

当您创建一个指向其他页面的按钮时，您可以向 URL 添加参数。 

这就像添加了一个小标签，告诉页面要显示哪些信息。

在你要发送数据的页面上，你可以使用参数来显示信息。

例如，您可以添加一个文本元素，并告诉它显示参数中的用户姓名。

现在，个人资料页面将显示正确的姓名。

测试和预览您的应用

如何预览你的作品

好的，您已经创建了一些页面并添加了一些操作。 

现在，你想看看你的应用长什么样，以及它是如何工作的。

Bubble 让这一切变得简单。找到标有“预览”或类似字样的按钮。

它通常看起来像一个播放按钮。

点击它，Bubble 将在浏览器中打开一个新标签页显示您的应用。

这就像亲眼看到你的应用上线一样。你可以点击按钮、填写字段，看看一切是否都按预期运行。

测试不同场景

预览应用时，不要随意点击。

试着想想人们可能会用哪些不同的方式使用你的应用。

点击每个按钮。在每个字段中输入内容。看看你做不同的事情会发生什么。

例如，如果你有一个登录页面，试着输入错误的密码。

查看您的应用是否显示错误信息。

如果您有一个用于保存数据的按钮，请检查您的数据库，确保数据已正确保存。

常见问题的调试

有时候，事情不会按预期发展。这没关系。

这种情况每个人都会遇到。当你发现问题时，它被称为“bug”。要修复bug，你需要对其进行“调试”。

Bubble有一些工具可以帮助你找到bug。

寻找名为“调试器”的工具。

它可以显示你的应用运行时后台发生的情况。这可以帮助你找出问题所在。

常见问题包括：

• 按钮没有任何反应。
• 数据保存不正确。
• 页面无法加载。
• 错误信息。

泡沫的替代品

正在寻找其他 泡泡替代品 在无代码和低代码应用开发领域？

以下是一些热门选择：

• 更柔和: 这个平台擅长将您的电子表格和数据库（例如 Airtable 和 Google Sheets）快速转换为 Web 应用程序和客户门户。它以易用性和预置模板而闻名。
• 嗡嗡: 这是一个功能强大的无代码平台，支持构建高度可定制的复杂 Web 应用程序。它拥有强大的插件生态系统，但学习曲线可能较为陡峭。
• 滑行: This tool focuses on simplicity, allowing you to create mobile apps directly from Google Sheets. It’s great for быстро creating internal tools and simple applications.
• Softgen: 这个人工智能平台旨在通过解读用户描述并生成应用程序来简化应用程序开发。它的设计目标是实现快速原型制作和迭代改进。
• 阿达洛: 一个专注于构建原生移动应用程序的无代码平台，具有易于使用的拖放界面和预构建组件市场。

结论

你成功了！你现在了解了Bubble的基本用法。

本指南为您提供了一个速成课程，但您仍然可以做更多的事情。

你不需要编写任何一行代码。

如果你想立即投入到下一个项目中，请记住以下几点：不断练习。

不要害怕搜索 YouTube 或者查看 Bubble.io 教程以获取更多操作步骤。

你可以找到大量适合初学者的资源和最佳实践。

Bubble市场是寻找帮助的好地方。

常见问题解答