可视化开发(微搭)进阶指南

前言

本篇文章将讲解云开发平台中 可视化开发（微搭） 的进阶内容，旨在帮助您更全面地掌握其核心能力。如果您对 可视化开发（微搭） 还不太熟悉，建议先阅读 快速入门 以夯实基础

此外，您还需要掌握以下基础知识：

• 基础 JavaScript 概念：包括数据类型、ES6 语法等

提示

若您对 ES6 语法不甚熟悉，编写脚本时可借助 AI 工具辅助实现

开发架构解析

理解应用开发的基本思路

想象一下，每个应用就像一栋房子，由三个主要部分组成：

1. ​​展示层（前端界面）​​ - 就像房子的外观和室内装修

   • 包含页面布局、按钮等可见元素
   • 用户的所有操作都在这里发生

2. 数据层（数据库）​​ - 相当于房子的地基和储物间

   • 存储和管理所有应用数据
   • 提供基本的数据增删改查功能

3. ​​功能层（逻辑处理）​​ - 类似房子的水电系统

   • 处理复杂业务逻辑
   • 连接前端界面和后台数据

通过这三层的划分，我们可以更清晰地理解它们之间的关系，如下图所示：

• 我们可以在 展示层 中通过 模型配置 直接调用 数据模型 的数据进行展示

• 如果需求复杂，不是简单的增删改查的话，则可以在 展示层 调用 ​​功能层 ，通过 ​​功能层 调用 数据层 并对返回的数据进行 二次处理 再返回给 展示层

架构示意图

接下来我们来看一下 可视化开发（微搭） 的开发架构图。通过这张图，您可以更清晰地理解微搭的架构及其各模块间的调用关系

图中所有模块的连接线表示它们之间存在的调用关系

页面及数据流

1. 组件 为页面组成的最小原子，您需要通过组件的搭配进行页面的搭建

2. 数据容器组件 可以通过配置 数据源，从而 自动生成 符合该数据源的表单组件，并自动绑定数据

3. 若数据不是简单的数据模型增删改查，也可以配置 页面方法 通过 sdk 调用 APIs/云函数 获取数据，然后将数据写入 页面/全局变量中，随后在页面任意位置进行使用

样式

1. 可以通过 组件样式配置、主题 等快速修改页面样式

2. 如果样式配置不够满足条件，可以通过 组件CSS 进行编写样式表，实现原子级样式自定义

3. 也可以定义 全局CSS 进行全局样式自定义

第三方集成

1. 可以通过 SSO 提供的几种方式对接 外部系统认证源，实现登录、注册、权限验证等功能

平台能力

下方介绍 可视化开发（微搭） 中的一些平台能力

$w

云开发平台 使用 $w 作为全局的命名空间，微搭前端运行时 所有能力 都可以通过这个命名空间访问到

因此可以在表达式、js脚本中通过 $w 获取全局数据

具体文档：$w指引

全局变量/方法

全局变量 可以理解为一个在页面旁边放置的 箱子，您可以在其中存放变量和方法，并在页面的 任意位置 使用它们。这个箱子里的变量和方法被称为 全局变量 和 全局方法

全局变量用于在全局范围内维护一个属性值，可以在任意位置使用和修改。例如：

1. 定义一个变量 formType，用于控制某个表单的状态（如编辑、新增、只读）
2. 配置 A按钮 的点击事件，点击时将 formType 修改为 edit。
3. 配置 B按钮 的点击事件，点击时将 formType 修改为 read。

通过这种方式，不同的按钮可以通过控制同一个变量来改变表单的属性

这样就能实现不同的按钮通过控制同一个变量，从而改变表单属性

全局方法同理，在全局定义方法，可以在任意位置调用

表达式

在应用开发中，许多属性的值并非固定不变，而是根据特定条件或数据动态变化的。这些动态属性通常通过 JS表达式 来实现。以下是一些常见的应用场景：

1. 数据转换与计算：

• 对数据进行累加、过滤等操作，生成动态结果
• 示例：计算某个字段的总和，或根据条件筛选数据

2. 数据查询：

• 从数据模型中动态获取所需数据
• 示例：根据用户输入的关键字查询相关记录

3. 字段依赖：

• 某个字段的显示或隐藏依赖于另一个字段的值
• 示例：当用户选择“已婚”时，显示“配偶姓名”字段

在 云开发平台 中，所有支持表达式的地方都会用 fx 标记或 {{ }} 占位符来标识

表达式中可以拿到当前页面定义的全局变量、方法、页面状态信息、组件信息等

在表达式框展示时，可以在右侧找到所有变量，点击即可回填

示例：动态计算商品总金额

假设你有一个商品列表，需要动态计算所有商品的总金额。可以通过表达式轻松实现：

$w.queryProduct.data.records.reduce((total, item) => total + item.price, 0)

• $w.queryProduct 是页面新建的数据源查询方法
• reduce 方法遍历每个订单，将 amount 字段的值累加到 total 中
• 然后将该表达式绑定在组件上进行展示

提示

如果你对 reduce 方法不熟悉，可以随时向 AI 提问获取帮助

提问示例：
帮我写一个 JS 表达式，用来累加 $w.queryProduct.data.records 数据中 price 字段的数据。

事件系统

事件处理是 云开发平台 中实现交互功能的关键。您可以为组件配置各种事件（如点击、输入、加载成功等），并在事件触发时执行相应的逻辑

事件中提供了很多快捷方法，比如 调用数据模型方法、打开页面、调用组件方法等等

具体参考文章：事件系统

示例

期望点击「编辑按钮」时打开「编辑页面」，实现如下：

• 为「编辑按钮」配置点击事件

• 选择打开页面方法，配置打开页面

插槽

插槽就是一个 占位符，可以根据不同的场景放置不同的内容，让组件变得更加灵活

举个例子：

假设你有一个“卡片”组件，卡片里有一个标题和一段描述。但你希望卡片的中间部分可以根据不同的场景显示不同的内容，比如图片、按钮或文字。这时，你就可以在卡片组件中定义一个插槽。当你在使用这个卡片组件时，可以根据需要把图片、按钮或文字“塞”进这个插槽里。

示例1

如下页面有一个 卡片组件 , 其中有三个插槽: 卡片顶部 、 卡片内容 、 卡片底部

卡片组件自带样式，将三个插槽放在不同的位置，你只需要关心插槽中的内容即可，可以在插槽中放置任意的组件

示例2

数据表格中有 全局按钮 、 操作列 插槽，支持你在列表上方、操作列处放置其他的组件

数据表格还支持自定义列插槽，可以自定义每一列的展示形式，详情查看 数据表格文档

案例演示

本章将实现一个博客分类列表模块

功能描述：

• 左侧菜单展示分类列表。
• 点击分类名称后，右侧展示对应分类下的博客列表。

开发设计方案

步骤1: 创建数据表并建立关联关系

我们需要新建 分类表、博客表

1. 新建分类表和博客表

• 在录入博客时，手动填写分类名称可能导致后续关联关系丢失
• 解决方案：期望通过分类数据的唯一值 _id 进行关联
• 录入博客时，使用下拉组件展示分类列表，选择并存入分类的 _id，后续可根据 _id 查询分类数据

提示

当两张表有某种关联关系时，我们就可以利用 关联关系 来实现数据的关联

在博客表中添加 关联关系字段 进行 分类表 的关联

录入博客表时 表单容器组件 下生成的 分类字段 会自动查出分类数据供用户选择，并在提交时自动存入 分类id

后续查询时可以选择是否自动带上关联数据

相关文档链接：关联关系文档

步骤2: 实现左侧分类列表

页面左侧用 侧边选项卡 展示分类，选项卡组件不能直接绑定数据源，因此需要手动查询数据，把数据绑定到 选项卡组件 中

1. 页面新建 内置数据表查询, 用于查询分类列表
2. 选项卡组件 绑定 内置数据表查询 返回值进行渲染

步骤3: 实现右侧博客列表

页面右侧用 数据列表 展示博客列表，因数据列表组件可以直接绑定数据源，因此无需手动查询数据，直接绑定数据源即可

1. 数据列表选择数据源为 博客表
2. 配置数据筛选条件为 所属分类 等于 选项卡组件选中项的值

实操步骤

步骤1: 创建关联字段

1. 在 博客表 中新建一个字段，命名为 所属分类，用于存储与 分类表 的关联信息。
2. 在 分类表 中新建一个字段，命名为 关联博客，用于存储与 博客表 的关联信息。
3. 通过这两个字段，可以在 博客表 中读取关联的 分类表 数据，反之亦然。

步骤2: 查询分类列表

1. 在页面中新建一个 内置数据表查询，命名为 queryBlogList，用于查询分类列表

2. 点击 运行，查看查询结果，确保数据正确显示

3. 将 queryBlogList 的返回值绑定到 选项卡组件

切换选项卡的数据为 表达式 模式，确保数据结构包含 label 和 value 字段

• label: 标签展示内容
• value: 标签对应的值，拿到标签选中的值是该值

因此需要把 queryBlogList 的返回值中的 flmc 字段作为 label ， _id 作为 value

可以用如下的脚本将 queryBlogList 的返回数据转换成 [{label: xxx,value: xxx}] 的格式

$w.queryBlogList.data.records.map((item) => ({
    label: item.flmc,
    value: item._id
}))

提示

如果你对 map 方法不熟悉，可以随时向 AI 提问获取帮助

提问示例：
帮我写一个 JS 表达式，将 $w.queryBlogList.data.records 数据转换成 [{label: xxx,value: xxx}] 的格式，其中源数据的 flmc 字段作为 label ， _id 字段作为 value 。

4. 设置默认选中的标签为第一条数据：

$w.queryBlogList.data.records?.[0]?._id

5. 完成后，选项卡组件 应正常显示分类数据

步骤3: 绑定博客列表

1. 在 侧边选项卡 的插槽中添加一个 数据列表 组件，并绑定数据源为 博客列表

这里展示了所有的数据，我们期望选择不同的分类时，只展示分类下的博客数据

2. 设置 数据筛选 条件为: 所属分类 等于 选项卡组件选中项的值

选项卡组件选中项的值通过如下的表达式获取：

$w.sideTab1.selectedValue

3. 此时切换分类选项卡，博客列表 过滤条件根据选项卡选中值的改变而改变，从而自动刷新

步骤4: 调整布局

1. 为 博客列表 添加一个 普通容器，并设置左右间距，确保布局美观

2. 完成布局调整后，最终效果如下：

总结

通过博客分类列表的示例，我们应该清楚了如何通过 数据容器组件 快速渲染数据，也清楚如何手动查询数据，将数据绑定到 普通组件 中

现在你可以举一反三做出类似的 分类数据管理 模块，比如：

1. 商品分类列表
2. 订单列表
3. 用户列表
4. 评论列表
5. ...