跳到主要内容

自定义样式

草料二维码新版活码编辑器支持「自定义样式」组件。你可以把网页内容、设计稿或 AI 生成的静态 HTML 复制进来，快速制作更有设计感的扫码页面。

自定义样式适合产品介绍、活动宣传、门店信息、设备说明等展示型场景。粘贴后可以先预览实际效果，如样式有偏差，可进入「编码模式」继续调整。

可以复制哪些内容进来​

自定义样式主要支持复制静态 HTML 内容，适合用来展示文字、图片、表格、卡片、按钮等页面元素。

来源适合复制的内容
网页内容图文介绍、参数表格、说明区块、活动信息
设计稿转出的 HTML标题区、图文卡片、信息模块、流程步骤
AI 生成结果移动端静态 HTML 页面、卡片式排版、按钮样式
自己写的代码div、p、span、img、a、table 等 HTML 标签
其他编辑器内容图文混排、表格、简单按钮、分割线等内容

比较适合粘贴的内容包括：

  • 标题、正文、列表、分割线
  • 图片、图文卡片、信息卡片
  • 表格、参数说明、流程步骤
  • 按钮样式、链接入口
  • 背景色、圆角、边框、阴影、字号、间距等基础样式

提示：建议复制以展示为主的内容。完整网页源码通常包含脚本、外部样式和复杂交互，粘贴后不一定能完整保留。

推荐使用流程​

如果你只是想快速做出一个更好看的扫码页面，可以先参考内容展示活码制作教程完成基础内容，再按下面的步骤添加自定义样式。

1. 准备展示内容​

先准备要展示的内容，如产品介绍、活动说明、门店信息等。如果内容已经在网页、设计稿或 AI 生成结果中，可以直接复制对应的静态 HTML。

2. 添加自定义样式组件​

在活码编辑器中添加「自定义样式」组件，将准备好的 HTML 粘贴到组件中。

3. 预览手机端展示效果​

粘贴后切换到预览，检查手机端展示效果。如果有样式偏差，进入「编码模式」调整。

4. 保存二维码内容​

确认文字、图片、按钮和链接都能正常展示后，保存二维码内容。

这个流程不需要你从头写网页。大多数情况下，只要内容是静态展示型 HTML，就可以先复制进来，再根据预览效果微调。

粘贴后先预览效果​

添加自定义样式后，建议先预览扫码页面。电脑端编辑区和手机端扫码页面的显示环境不同，预览能帮助你提前发现样式问题。

可以重点检查：

  1. 文字是否完整显示
  2. 图片是否能正常加载
  3. 页面宽度是否适合手机屏幕
  4. 表格是否过宽
  5. 按钮和链接是否容易点击
  6. 背景色和文字颜色是否清晰
  7. 页面是否出现明显错位或空白

如果预览效果符合预期，就可以继续编辑其他内容。如果样式有偏差，可以进入「编码模式」调整。

在编码模式中调整样式​

粘贴自定义 HTML 后，组件操作条中会提供「编码模式」。进入后，可以直接修改 HTML 和样式代码。

适合在编码模式中调整的内容包括：

  • 修改文字大小、颜色、粗细
  • 调整模块间距和内边距
  • 修改背景色、边框、圆角
  • 删除不兼容或多余的样式
  • 将复杂布局改成手机端更稳定的单列布局
  • 替换图片地址
  • 调整按钮链接

例如，可以把内容区域改成适配手机屏幕的宽度：

<div style="width:100%;box-sizing:border-box;">
  内容区域
</div>

图片建议设置最大宽度，避免超出屏幕：

<img src="图片地址" style="display:block;max-width:100%;height:auto;" />

如果不想继续保留 HTML 样式，也可以使用「转为文本」，将内容转换成普通文本后再编辑。

可以让 AI 根据截图生成样式​

如果你不熟悉 HTML，可以把参考截图发给 AI，让 AI 按截图生成一段可直接粘贴到「自定义样式」里的 HTML。适合用来还原产品介绍卡片、活动海报、门店信息块、价格卡片、按钮组等视觉样式。

为了让生成结果更适合在微信小程序和扫码页面中展示，建议在提示词里说明这些要求：

请根据我提供的截图，生成可直接渲染的 HTML 片段，用于微信小程序 webview、Skyline 和 rich-text 场景。

要求：
1. 只还原截图中的核心组件，不要生成页面背景、导航栏、底部栏等环境内容。
2. 最外层组件 width:100%，直接撑满父容器，不设置 max-width 和左右 margin。
3. 样式全部使用 inline-style，不使用 style 标签、class、id、外部 CSS 和 JS。
4. 只使用 div、span、img 等基础标签，不使用 svg、emoji、伪元素。
5. 布局优先使用 flex，不使用 grid，尽量避免 position:absolute。
6. 所有容器设置 box-sizing:border-box，避免宽度溢出。
7. 适配 PC 和手机宽度，手机端保持紧凑，不要使用过大的字号、间距和 padding。
8. 横向 flex 容器中的文字区域设置 min-width:0，避免撑破布局。
9. 图片使用 img 标签，并设置 display:block;width:100%;。
10. 不使用 calc、vw、vh、clamp、媒体查询、动画、滤镜等兼容性不稳定的写法。
11. 只输出最终 HTML 代码，不要解释，不要用 Markdown 代码块包裹。
12. HTML 压缩为一整行，方便我一次性复制。

AI 生成后，可以先复制到自定义样式组件中预览。如果效果不理想，可以继续让 AI 调整，例如：

  • 把整体字号调小一点，适配手机屏幕
  • 减少左右 padding，避免内容换行
  • 把表格改成卡片式展示
  • 去掉复杂动画和交互，只保留静态样式
  • 将多列布局改成手机端更稳定的单列布局

提示：AI 生成的 HTML 建议先预览，再进入「编码模式」微调。这样既能快速得到接近截图的样式，也能保证扫码页面在小程序端稳定展示。

使用建议​

为了让自定义样式更稳定，建议遵循以下原则：

  • 优先使用简单 HTML 标签，如 div、p、span、img、a、table
  • 样式尽量写在当前元素上，不依赖外部 CSS
  • 页面按手机端单列排版，不使用过宽布局
  • 图片使用可公开访问的链接
  • 表格内容较多时，可以改成分组卡片
  • 不放复杂脚本、动画和网页交互
  • 粘贴后先预览，再根据效果进入编码模式微调

如果只是展示一段产品说明、活动介绍或门店信息，用简单 HTML 加内联样式通常就够了。不要为了追求网页效果，把复杂动效、弹窗、轮播等能力都放进扫码页面里。

常见问题​

1. 哪些内容可能不支持或效果不完整？​

以下内容可能无法完整保留：

类型可能出现的问题
JavaScript 脚本不会执行，交互效果无法生效
外部 CSS 文件可能无法加载，建议改成内联样式
复杂动画可能不展示，或与网页效果不同
悬浮、吸顶、弹窗等交互小程序端可能无法按网页方式运行
伪类样式如 hover、active 等效果可能不明显
复杂布局多层嵌套、绝对定位、超宽元素可能导致错位
第三方组件依赖 JS 的轮播、地图、表单控件等通常不适合直接粘贴

如果内容只是展示文字、图片、表格和按钮，一般更容易得到稳定效果。如果内容依赖脚本或复杂交互，建议改成静态展示形式。

2. 为什么样式可能会有损耗？​

同一段 HTML，在电脑浏览器和微信小程序里看到的效果可能不完全一样。

扫码页面需要适配不同手机、系统和小程序渲染环境。为了保证页面能正常打开、内容不出错，编辑器会对部分 HTML 和样式做兼容处理。这个过程可能会让复杂样式被简化。

常见表现包括：

  • 字体、间距和原网页略有差异
  • 阴影、渐变、圆角效果变弱
  • 复杂布局变成更适合手机阅读的单列排版
  • 部分不兼容标签或属性被忽略
  • 外部样式没有完整带入

这类损耗通常不是内容丢失，而是为了让页面在小程序端更稳定地展示。二维码页面的首要目标是让扫码者顺利查看内容。

3. 样式不符合预期怎么办？​

可以先进入「编码模式」调整 HTML 和内联样式。常见处理方式包括：

  • 删除复杂样式
  • 把多列布局改成单列布局
  • 给图片增加 max-width:100%;height:auto;
  • 把过宽表格改成卡片
  • 调整字号、颜色和间距

如果仍然不好调整，也可以把当前代码复制给 AI，让 AI 帮你改成更适合手机端展示的静态 HTML。

4. 可以直接复制完整网页源码吗？​

不建议直接复制完整网页源码。

完整网页通常包含页面框架、导航栏、底部栏、脚本、外部 CSS、统计代码等内容。这些内容放进二维码页面后，可能会造成样式错乱或显示异常。

更推荐复制网页中的某个内容模块，比如产品介绍区、活动说明区、价格卡片、图文说明卡片等。这样更容易在扫码页面中稳定展示。

5. 自定义样式适合替代所有组件吗？​

不适合。

自定义样式更适合做展示型内容排版。如果你需要上传图片、视频、文件，或添加表单、联系方式、跳转链接等功能，建议优先使用活码编辑器里的标准组件。标准组件的兼容性和后续维护会更稳定。

自定义样式可以作为补充，用来做更个性化的图文展示。

小结​

自定义样式适合把网页内容、设计稿排版或 AI 生成的 HTML 快速放进二维码页面，让扫码展示更有层次。

使用时可以先复制静态 HTML，再预览手机端效果。如样式有偏差，可以进入「编码模式」继续调整。为了保证小程序端稳定渲染，复杂网页效果可能会有损耗，建议优先使用静态 HTML 和内联样式。