样式处理及调试

前言

1. 无论做小程序端还是PC端，首先需要配置 整体框架（菜单栏，导航栏等）
2. 然后再开发页面，并将页面链接绑定到菜单栏
3. 接下来将 页面排版 好，再对单个 组件样式 进行调整

在可视化开发(微搭)中：

• 整体框架 通过 页面布局 实现

• 内容排版 通过 布局组件 实现

• 组件样式 通过以下几种方式实现：

  • 快捷配置

  • 组件CSS（支持AI生成）

  • 应用主题

  • 全局CSS

本篇文章将讲解如何自定义调整样式

组件基础知识

在开始调整样式之前，了解一些基础知识会帮助我们更好地理解页面的构建和样式的调整，请务必阅读该章节

什么是盒子？

在网页设计中，每个 组件 都可以被视为一个矩形的 盒子，组件 是页面组成的最小原子，页面是由组件拼凑而成的

这个盒子包含四个部分：

• 内容: 盒子里面装的东西，如文字、图片等
• 内边距: 内容与边框之间的距离，是透明的
• 边框: 围绕内边距和内容的线，有宽度
• 外边距: 盒子与其他盒子之间的距离，也是透明的

结构如下：

盒子特性

1. ​​内容影响盒子尺寸​​：

   • 内容增加会撑大盒子
   • 可手动设置宽高约束

2. ​​间距控制​​：

   • margin：控制盒子与其他元素的距离
   • padding：控制内容与边框的距离

3. 支持嵌套​​：盒子可以嵌套在另一个盒子中

块级组件和行内组件

盒子主要分为两类：块级盒子（Block） 和 行内盒子（Inline），这里我们称为 块级组件 和 行内组件

它们在页面中的表现不同：

特性	块级组件	行内组件
默认显示	每个块级元素独占整行，下一个元素自动换行	只占据内容宽度，多个行内元素可以在一行显示，直到放不下才换行
常见组件	文本、文本框、下拉框、普通容器等	按钮、图片

块级组件示例

两个单行输入组件分别占一行

行内组件示例

按钮、图片会占据一行

样式基本概念

每个组件都有指定的 class(类名) 或者 id 。class 相当于组件的标签，可以多个，id 相当于组件的ID，只能有一个

组件默认都已经有自己的 class，您也可以手动为其添加 class（组件样式属性中支持配置className）

组件是通过 class 或者 id 来指定引用哪些样式

举例：

下述是一个简单的HTML代码片段，一个 div 组件，有个子组件 button 组件

其中 div 的 id 为 page-container ，class 为 container ； button 的 class 为 btn

<div id="page-container" class="container">
    <button class="btn">按钮</button>
</div>

默认情况下，这个 div 我们并看不见，他不带有任何样式，我们只能看见这个按钮(不用关心按钮为什么是蓝色，这是平台自带的默认样式)

如果我们期望调整该组件样式，可以通过 class 或 id 给它设置样式，id以 # 显示 ，class以一个点 . 号显示：

#page-container {
    /* 设置背景色 */
    background: blue;
    /* 设置高度 */
    height: 100px;
    /* 设置宽度 */
    width: 100px;
}

.btn {
    /* 设置背景色 */
    background: red;
}

效果如下：

云开发平台样式调整

在云开发平台上开发时，您不用关心 html 如何编写，云开发平台将各种组件用可视化的方式封装好了，只需要拖拽调整位置即可，在左侧大纲树中看到的就是各个组件的层级关系

因此上述的 div 包裹 按钮 的示例用如下图示组件排版即可完成，接下来在对应的组件属性中设置样式即可

接下来我们来讲解在云开发平台中如何调整样式

快捷配置

如果只需要调整一些基本样式，则只需要在组件配置面板中调整

在 可视化应用 新建的组件中，右侧会有当前选中组件的配置模块，切换到样式模块，即可看到很多的快捷配置，详情参考 组件样式配置

快捷配置中，可以调整 文字、布局、边框、背景色、阴影、圆角、透明度、定位等属性，如果不清楚名词的含义可以 AI 咨询

因此上述的示例我们可以在 普通容器 中给他设置宽高 100px，背景色给定颜色值，同时调整按钮的背景色

组件CSS

如果样式属性面板中的配置不能满足业务需求，您可以在组件的 CSS 编辑面板中，编写样式 API，通过样式选择器，实现组件样式的精细化控制

详情请参考:

如何编写组件CSS

样式API

如何调试样式

现在您已经知道如何通过 class 或者 id 来调整样式，接下来的问题就是如何知道组件的 class 或者 id

因此调试样式的顺序应该如下：

1. 找到要调整样式的组件 class 或者 id

2. 根据class编写css

我们先来看第一步的实现：

组件的 class 或 id 需要通过 浏览器调试工具 查找，您可以右键页面「检查」调出 浏览器调试工具

• 切换到 Elements 选项

• 点击 选中按钮，点击后按钮会高亮

• 选中 想要调试的组件，此时右侧组件树中该 组件的位置 会高亮，可以看到该节点的class或者id

Elements面板展示了当前页面的结构，如果没有定位到具体的组件，可以在右侧组件树中往上下级查找

2. 根据class编写css

如上图中的场景，我希望将选中的组件的字体颜色改为红色，则需要编写如下样式：

:scope .wd-tabs__item.is-selected {
    color: red;
}

.wd-tabs__item.is-selected 是当前选中div的class，因为看到该div下有样式 color: var(--wd-tabs-heder-item-color-selected) ，因此可以判定文字样式是由当前div控制的，因此可以通过该class修改样式

快捷调试样式

打开调试工具，选中节点后，可以直接在调试面板下方的 element.style 位置直接编写 css，即写即生效，调试的没问题后再复制css到组件css中

注意

一般情况下组件都有多层级，由多层 div 或者其他的HTML元素搭配而成，因此样式的调整也需要聚焦找到对应的元素位置

若修改样式没有生效，大概率原因是找错了组件层级位置，可以多上下级，按上述 快捷调试样式 方式调试下

比如设置宽高不生效时：

A1: 可以检查是否有上层的组件固定了宽高，导致子节点设置宽高不生效

A2: 也可能是样式优先级不够，可以在编写的样式后加上 !important

:scope .wd-tabs__item.is-selected {
    color: red !important;
}

示例参考：顶部选项卡自定义样式

应用主题

如果期望修改整体的样式风格，可以使用应用主题统一调整

云开发平台中提供了多套应用主题，使用应用主题可以预定义页面元素的样式，可以应用不同的主题来改变页面默认文字、背景、按钮、图标等的外观

详情请参考 应用主题

全局CSS

如果应用主题不够满足您的定制需求，您可以编写全局CSS，全局修改统一属性

如果希望复用样式的话，可以给组件绑定class，然后在全局定义 class 样式，从而实现样式的复用

详情请参考 代码编辑器

页面排版

调整页面排版，主要是针对 行内组件 和 块级组件 进行排版，因为这两种组件的默认展示有不同的效果，因此在调整时需要用 普通容器 或 网格布局 等布局容器进行处理

普通容器就是div，因此可以善用div进行排版

举例（行内组件换行）

图片和按钮都是行内组件，默认会展示在一行

如果我期望按钮、图片换行展示，则可以通过 普通容器 包裹图片，让普通容器去换行

举例（两端对齐）：

下图页面中有两个 按钮 组件，按钮是 行内组件，因此他们默认会占在同一行，从左到右排列

如果期望将 按钮2 放到最右边，呈现两端对齐

这个需求按钮组件本身并不方便做到，我们需要使用 普通容器 或 网格布局 进行实现

普通容器解决方案

通过普通容器组件，将按钮1和按钮2放置到普通容器中，设置容器的 排列方式 ，并设置为 端对齐 即可实现两端对齐

普通容器还有其他的对齐方式，比如居中、左对齐、右对齐、水平居中、上对齐、下对齐等等

网格布局解决方案

组件文档

网格布局比较容易理解，就是将页面分割为 行和列，类比excel单元格，最多可以分为12列，可以将组件拖入列单元格中，即可实现排版

因此在上述的需求中，只需要将按钮1和按钮2放置到列单元格中，即可实现平分的效果

当然这个效果并不是我们想要的，我们期望将按钮2能够贴着右边，因此我们可以设置第二个列对齐方式为 右对齐

提示

同理，文本、文本框等 块级组件 默认是独占一行，类似于竖向排列，若希望是横向排列，也可以通过上述两种方式进行排版

方案对比

网格布局 更多是用在 等分 排版场景上，例如一行3个元素，多行渲染的情况

普通容器 类比为一个盒子，没有自带任何样式，因此可以善用普通容器进行局部布局

因此在上述组件对齐的案例中，我们更推荐使用 普通容器 进行实现

页面布局

页面布局主要是针对 菜单栏 、顶部导航栏 、页面主体 这几块进行排版

平台提供了多种默认布局模式，您可以选择某个布局做二次调整，然后在页面中引用该布局即可

具体操作如下：

进入可视化应用后，切换到 页面布局

针对移动端，也有标准的底部tab栏布局方案：

调整好logo、title、菜单栏属性 后，在页面中引用布局即可

页面中引用 页面布局

调试案例

需求： 在数据表格中，有些列为了突出展示，期望用标签组件展示，这里将 博客名称 列用标签组件展示

现状： 当该列内容过长，超出组件宽度时，超出部分会自动显示为省略号

目标： 我们希望将该列调大一些宽度，让他不要显示省略号

这个问题看起来比较简单，调整列和组件宽度即可

此时我们会按照如下思路操作：

1. 调整列和标签组件的宽为 150px
   此时发现并没有生效，但是 编辑区 的组件选中框(下图中组件选中的蓝色边框)宽度是变化了的，证明组件宽度确实改变了，但是没有解决内部组件的宽度，此时我们需要用 浏览器调试工具 进行调试，找到对应的组件，然后调整宽度

2. 打开浏览器调试工具，切换到 Elements 选项，点击 选中按钮，选中标签组件
   根据调试可以看到 width: 150px 是写进去了，但是没有生效，因此我们需要排查一下子组件是否有其他的样式有所影响

3. 在调试工具中展开组件，选中子组件
   可以发现在 编辑区 组件高亮了，但是它的宽度并没有撑满，所以在这里我们需要给他设置宽度，width:100%

可以看到当前子组件的class为 wd-tag-item ，因此我们可以通过这个类名来设置样式

4. 打开样式编辑器，在 CSS 中追加样式

:scope .wd-tag-item {
    width: 100%;
}

可以发现样式在编辑器中展示了，且在页面上生效了

但是发现这个文字的省略号还没去掉，因此我们需要继续排查，我们继续找子组件的样式

5. 选中下一层子组件，查看样式

这里我们看到该子组件有个 max-width: 60px ，这就是导致外层组件无论多宽，展示文字的宽度最宽只有 60px，因此我们调整该组件样式，class为 wd-tag__text

6. 打开样式编辑器，在 CSS 中继续添加样式

:scope .wd-tag__text {
    max-width: unset;
}

此时效果正确，因此整体解决方案为，追加如下CSS样式：

:scope .wd-tag-item {
    width: 100%;
}

:scope .wd-tag__text {
    max-width: unset;
}

相关指引

• 应用主题

• 全局CSS编写

• 如何编写组件CSS

• 样式API

• 组件样式的动态控制

• 顶部选项卡自定义样式