样式处理及调试

前言​

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

• 组件样式的动态控制

• 顶部选项卡自定义样式