Custom Options

  • 创建于

 

一、概述

Custom Options 致力于为跨境电商商家提供高效的定制行业解决方案。不仅通过提供丰富多样的定制组件，如文本、选项集、图片、日期、3D打印等，满足不同商家的不同定制场景，帮助商家实现高效的配置定制商品，把控定制商品从配置到购买到发货的整个闭环过程。还通过描述、弹窗等定制组件，提供给商家更多的创造空间，搭建出具备自己特色的定制商品页面。

Custom Options 目前支持网页版，商家均能够通过应用安装来使用本软件。

 

二、应用安装说明

应用安装
  1. 进入 SaaS 建站平台，点击左侧菜单栏中“应用中心”。
  2. 进入应用中心页面后，将顶部 Tab 中切换到“应用市场”，并在应用市场中搜索“Custom Options”。
image1.png
image2.png
应用卸载
  1. 进入应用中心页面后，在已安装的应用中找到“Custom Options”
  2. 将鼠标移入该应用卡片，单击卡片右下角的“删除”按钮，在弹窗提示中点击“确认”，即可完成对应用的卸载。
image3.png

三、表单定制操作说明

在 Custom-Option 插件中，对商品的定制有两种方式，一种是表单定制，另一种是图文定制。表单定制适用于那些无需预览就能直接购买的定制商品，如右图所示，通过提供文本框、选项卡、附件上传等定制项，提供给买家填写商品定制需求的工具。
下述内容将对表单定制过程给出操作说明.
1.PNG

3.1新增定制商品

  1. 新增定制商品的入口有2处，分别在应用【首页】或【定制管理】页面，均有定制商品和批量定制两个按钮，点击即可开始定制过程。
2.png3.png
  • 定制商品：即只能选择单个商品进行定制，但支持对图文定制或表单定制两种方式；
  • 批量定制：可同时对多个商品进行定制，单次最多不超过100个，但仅支持表单一种定制方式
下述先从定制商品的角度介绍表单定制过程，批量定制会在之后简略描述。
  1. 进入“商品定制”页面，页面分为【选择商品】和【定制方式】两个模块；
    3-4.PNG
  2. 选择需要定制的商品，点击【添加商品】按钮，弹窗获取店铺商品类列表，选择一个商品后，点击【确定】，即完成定制商品的选择
    3-5.png
      • 可以通过商品名称搜索、商品分类筛选来找到需要定制的商品
    3-6.png
    • 选择商品后，如需更换，点击【更换商品】按钮即可重新选择商品
  1. 在定制方式中选择【表单定制】（默认选中），点击【去关联】，在弹出的模板列表中，选择一个需要模板，点击确定，即完成关联
    3-7.png
      • 若列表中无自己需要的定制模板，也可以点击【新建模板】按钮，创建新的定制模板。具体过程将在 3.2 新增定制模板 中进行说明
    3-8.png
  2. 当配置完定制商品和定制模板后，点击保存，即完成商品定制流程。此时该商品在商城的销售页面，已可以成功加载定制内容，买家可通过对定制内容的填写，完成对商品的定制。
    3-9.png3-10.png

3.2 新增定制模板

本流程是“Custom Option”的核心使用流程，商家通过配置一系列表单，将实际的定制需求转化成对应的页面组件和页面效果，最终形成表单定制需要的“定制模板”
  1. 在“模板管理”页面，单击“新建模板”按钮，显示出创建弹窗。
  2. 在弹窗中输入模板的名称和备注信息，点击保存，即完成对模板的创建。
3-11.png
  1. 模板创建后会跳转进入模板编辑页面。在此页面中，可以对定制模板进行细节上的设置。
  2. 点击新建配置，添加模板中所需的组件，目前支持：文本框、文本域、选项卡、附件（图片）上传、弹窗提示、描述、日期选择器、3D 打印上传共8个组件。
  3. 选中一个组件后，会立即创建该组件。并可以在图示右侧位置对组件的标题、提示文字、必填、标题显隐、提示等进行配置。
  4. 当完成内容配置后，会在图示的中间区域实时预览，可点击上方按钮，来切换移动端和PC端的展示效果。
3-12.png

文本框组件

  1. 用户可为文本框组件设置标题、最大字符数、文本占位符、提示文字、字符类型设置、必填设置、隐藏标题设置
  2. 字符类型设置：可以规定买家在文本框内填写的内容类型（全字符、数字、字母、邮件）
    • 在全字符下，支持对emoji、空格和符号进行单独的限制

3-13.png

  1. 必填设置开启后，此组件必须买家完成填写才能够加购（通用设置，下同）
  2. 标题隐藏开启后，此组件不显示标题（通用设置，下同）
  3. 弹窗开启后，支持为此组件设置一个附带链接的弹窗提示，通常用于对定制方法进行讲解说明。（通用设置，下同）
3-14.png
  1. 配置完成后，在网站商品详情页面会显示一个可供买家输入的文本框
3-15.png

 

文本域组件

  1. 用户可以为文本域组件设置标题、最大字符数、占位符、提示文字、必填设置、隐藏标题设置。
  2. 文本域与文本框的区别在于，文本域支持买家在填写时输入回车以换行；通常适用于一个段落位置的文本定制场景。
3-16.png
  1. 配置完成后，在网站商品详情页面会显示一个可供买家输入的文本域输入框
3-17.png

 

选项卡组件

  1. 用户可填写选项卡组件的标题、提示文字以及选项内容，选项内容支持文本选项和图文选项两种格式；用户可以对选项值进行拖拽排序。
  2. 还可以配置项选项卡的展示样式（纵列、网格、下拉）、单多选设置、必填设置、标题隐藏设置、默认选中设置。
  3. 用户可以对选项值进行拖拽排序来调整选项值的显示顺序。
  4. 目前图文选项支持上传（PNG、JPG、JPEG、SVG）格式。
3-18.png
  1. 选项卡定制项支持配置设置一行2个，来提供更多的页面空间
3-19.png
  1. 配置完成后，在网站商品详情页面会显示一个可供买家选择的选项卡，有下拉，纵列和网格三种方式，详见下图
3-20.png

色板组件

  1. 色板组件允许商家配置好一组色板提供给买家选择；色板的配置以选项卡方式提供，因此配置方式与选项卡类似，但只提供网格模式供选择

    3-21.png
  2. 色板组件配置完成后，在商城侧展示如下图说是
    3-22.png

附件上传组件

  1. 用户可填写附件上传组件的的标题、提示文字、文件类型支持、必填设置、文本占位符设置、标题隐藏设置
  2. 支持开启图片裁剪功能，当上传的附件为图片格式时，允许买家对图片自行裁剪，以获得最佳的定制效果。
3-23.png
  1. 裁剪功能开启后，当买家使用附件上传组件上传一张照片时就会触发裁剪功能，买家可以放大缩小原图片大小，也可以拖拽拉伸裁剪区域及大小，同时也支持翻转原图片。当买家裁剪完成后点击confirm即可保存裁剪之后的图片。
3-24.png
3-25.png
  1. 点击裁剪完成后的图片即可放大预览
3-26.png
  1. 支持设置图片的大小限制
3-27.png

多图上传组件

  1. 与附件上传的功能类似，允许配置一个图片上传组件。
  2. 但仅支持上传图片，同时支持配置允许上传组件的数量（1-30）。设置后创建一个组件即支持买家上传多张图片。但需要注意的是，买家上传时仍旧只能单张上传。
  3. 同时也支持开启图片裁剪功能，当上传的附件为图片格式时，允许买家对图片自行裁剪，以获得最佳的定制效果。
    3-28.png
  4. 配置完多图上传组件后，买家即可在商城侧上传多张图片
    3-29.png

弹窗组件

  1. 用户可以选择创建一个独立弹窗配置项，不依赖于某一个定制组件；弹窗配置项可以帮助买家配置一些提示，例如定制示例等。
  2. 用户可以在弹窗内配置以下内容：弹窗的标题（必填）、弹窗的图标、弹窗位置（弹窗标题在店铺侧的展示位置而非弹窗位置）以及弹窗内具体显示的内容（富文本编辑）；可以点击放大按钮来增加编辑体验。
3-30.png
  1. 配置完成后，在网站商品详情页，会以配置的弹窗提示文字生成一个超链接文本，点击后会弹窗显示富文本内容
3-31.png3-32.png

描述组件

  1. 描述组件是一种排版类组件，用户可以在描述配置项中的富文本内编辑内容，这些内容会以富文本的方式展示在商品详情页里。
3-33.png
  1. 配置完成后，在网站商品详情页面会生成一段富文本描述
3-34.png

 

3D 文件上传组件

  1. 3D 文件上传主要是为3D在线打印商家提供服务，支持编辑标题、提示文字、文件类型支持、必填设置、标题隐藏设置、弹窗提示。
image26.png
  1. 配置后在商品详情页面，显示一个可以上传3D文件的定制组件
image27.png
  1. 买家可以上传3D文件，对文件支持进行3D预览 ，并计算显示3D文件的尺寸信息
image28.png
  1. 点击预览图即可对3D文件进行预览
image29.png

 

日期选择组件

  1. 日期组件通常用于生日定制等场景；支持编辑标题、提示文字、占位符、必填设置、标题隐藏设置、弹窗提示
image30.png
  1. 日期格式支持 年-月-日 和 年-月两种方式
  2. 日期的可选范围支持设置可选日期和禁选日期两种，其中可选日期有“所有日期、动态日期和指定日期”三种方式：
    • 所有日期即没有限制
    • 动态日期是设置在购买当天后多少天内的日期可选
    • 指定日期则是设置一个具体的可选日期区间
image31.pngimage32.pngimage33.png
  1. 配置完成后，在网站商品详情页面，会显示一个日期选择器供买家选择
image34.png

定制组件显隐设置流程

为了提升买家填写购买过程中的体验，让买家在完成某一项的选择后，才会显示后续组件，针对组件的配置提供了“条件规则”功能。
  1. 在定制模板编辑页面，从左侧菜单栏中选中“选项卡”组件
  2. 选中后在页面右侧，将显示 tab 切换至“条件规则”
CleanShot_2022-10-17_at_11.22.58.png
  1. 点击“增加条件”按钮开始设置条件。在条件设置中有四个选项
    • 条件对象：即动作的发起对象，默认选择当前组件，且不可编辑
    • 包含：针对选项卡组件，可选择当选项卡包含的值，此值即为触发条件
    • 触发对象：即动作的影响对象，可选择其他组件
    • 影响方式：即条件触发后，对“触发对象”会有什么样的影响，目前仅支持“显示”，即条件触发后显示触发组件，条件未触发时默认隐藏。
CleanShot_2022-10-17_at_11.22.26.pngCleanShot_2022-10-17_at_11.24.10.png
若不想再用某个条件，点击右上角的“删除”按钮即将该条件删除
若想直接复用某个条件，点击条件右上角的“复制”按钮即可
CleanShot_2022-10-17_at_11.28.00.png


3.3删除模板流程

  1. 进入“模板管理页面”，将鼠标悬停到需要删除的模板卡片上
  2. 单击卡片右上角“删除”按钮，在弹窗的提示弹窗中单击“确认”，即完成了对模板的删除
  3. 模板删除后，关联的商品会自动从定制商品列表移除。
3-35.png

3.4 编辑模板流程

  1. 进入“模板管理页面”，将鼠标悬停到需要编辑的模板卡片上
  2. 单击卡片右下角“编辑”按钮，即进入该模板的编辑页面，具体与上述“2.3 新增定制模板”相同
3-37.png

3.5 模板关联商品管理

  1. 进入“模板管理页面”，模板卡片的左下角显示了已经关联的商品数量
  2. 单击具体的数字，弹窗显示具体关联的商品
3-38.png
  1. 在弹窗中，可对已关联的商品进行移除，单击“移除”按钮即可
  2. 也可单击“添加商品”，针对此模板添加新的关联商品

 

3.6商品更换模板流程

  1. 在“定制管理”页面，找到需要更换模板的商品，单击“更换模板”按钮
    3-39.png
  2. 进入“商品定制”页面，点击更换按钮，在弹窗中选择希望更换的模板，点击确定即更换成功
    3-40.png3-41.png


3.7定制组件样式设置

当商品和定制模板配置完成后，就会涉及定制模板在商城的样式展示。Custom Options 插件提供了灵活的样式策略供用户选择。
  1. 新安装插件的店铺，我们会默认提供两个内置主题 Basic（defualt）和 Vogue；并将Vogue 主题设为默认值
  2. 默认主题是指在新建模板时，会自动将模板关联此策略，用户可以根据自己店铺的需要，修改默认主题，具体操作步骤见下述“创建样式策略”过程
注意：目前对于新版 brooklyn 主题暂未兼容

 

创建样式策略

  1. 进入样式管理页面，会自动创建一个主题，自动设置为默认策略。
image__10_.png
  1. 点击“新增样式”按钮，弹出样式中心，可以直接使用已有的样式模板，也可以自定义一个新的样式策略
image__11_.png
  1. 若选择已有样式策略，点击卡片上的使用，即可将该样式复制到自己的样式列表
image__12_.png
  1. 点击列表中的样式卡片，进入策略编辑页面，可对策略进行编辑。下面以自定义样式策略进行说明。对于一个新建的自定义样式，需要填写策略名称，策略名称不可重复
    1. 若希望此策略为默认策略，则勾选“设置为默认策略”，会在保存后，将默认策略进行更换
image__13_.png
  1. 编辑策略
      • 定制区域宽度，会影响定制组件的最大显示宽度，组件宽度无法超过定制区域宽度；仅了配置PC点宽度，移动端会自动适配；若勾选“自适应主题宽度”，则无需配置数值，自动跟随主题的宽度。
      • 定制组件布局，支持配置组件的居中、居左布局；若选中“自动适应主题布局”，则自动更多主题的居中、居左布局（注：不是每个主题都有此配置）
      • 组件间距：支持手动设置组件之间的距离
      • 全局文本样式，支持配置组件的标题、提示文字、正文、异常校验文字的字体大小和颜色；其中标题和组件文件，支持自动获取主题的颜色，并随着主题的调整而调整
      • 圆角半径配置，支持配置组件的圆角，图片的圆角参数；同样支持自动跟随主题的配置
      • 组件尺寸配置，支持手动调整组件的高度和宽度，其中宽度支持自动跟随主题定制区域的宽度，需要注意的是
        • 高度设置对文本域、3D 组件、弹窗组件、描述组件不生效
        • 宽度对移动端不生效
      除上述全局配置外，支持对部分特殊组件进行单独样式设置，目前支持以下几种配置
    • 对纵列选项卡（checkbox）的图文模式，支持配置其图片的宽度和高度；支持配置选中按钮的背景颜色，也可勾选自动获取，跟随主题按钮色
    • 对网格选项卡（swatch）的图文模式，统一支持配置图片的宽度和高度；此外还支持按钮选中后的背景的和文字色；也可勾选自动获取主题的按钮的和文字色
image__14_.png


编辑样式策略

  1. 创建完样式策略后，返回样式管理页面，在对应的策略卡片上，点击“编辑”即可对策略进行修改；
  2. 系统策略暂时不支持编辑和删除，但可通过复制一个新的策略，进行编辑
image__15_.png


复制样式策略

支持对样式策略进行复制，点击复制按钮，即可立即复制一个新的样式策略


删除样式策略

  1. 将鼠标悬停到样式策略卡片，即可看到右上角有删除按钮，点击后即可将策略进行删除
  2. 若删除的样式策略存在关联模板，删除后会将其模板自动绑定默认样式策略
  3. 默认样式策略不支持删除
image__16_.png


样式策略应用

目前有2种应用样式策略的方式

第一种：在模板中编辑

  1. 进入模板管理页面，点击编辑模板（或创建模板）
  2. 打开模板编辑页面，在左上角即可看到当前模板关联主题策略
image__17_.png
  1. 点击该主题按钮，即弹窗显示当前已有的样式策略，找到需要关联的新策略，点击关联，退出弹窗
image__18_.png
  1. 点击保存模板，该模板的关联样式即切换成功
image__19_.png

第二种：在样式管理页面快速应用

  1. 进入样式管理列表页面，将鼠标移动至样式卡片右下角的操作展开按钮，显示更多操作
image__20_.png
  1. 点击快速应用，会弹窗提示此操作会将该样式应用到当前所有模板上，点击确定，即完成全站更换
image__21_.pngimage__22_.png

四、图文定制操作说明

在 Custom-Option 插件中，除了表单定制，另一种定制方式是图文定制，适合需要看到最终效果才能确定个性化定制结果的商品，图文定制是一种在填写定制内容后，支持预览查看定制效果的方式，他在表单定制的基础上，增加了对图层的定制。
演示图：待补充

4.1 新增图文定制商品

  1. 新增图文定制商品的入口与表单定制相同，但目前只能选择点击【定制商品】来进行图文定制，因为批量定制不支持图文定制。
    3-42.png3-43.png
  2. 进入【商品定制】页面后，选择要定制的商品，与表单定制环节相同
    3-44.png
  3. 选择完定制商品后，在【定制方式】模块选中【图文定制】，点击去关联，即可选择需要关联的图文模板
    3-45.png
  4. 也可以在上述弹窗中点击“新建”按钮，创建新的图文定制模板；具体的图文定制过程操作说明见 图文模板定制，下图仅作示例参考
    3-46.png
  5. 配置完成图文定制模板后，返回【商品定制】页面，点击保存，即完成商品定制。
    3-47.png

4.2 图文模板定制

图文模板的定制分三个环节：
  • 第一个环节是配置可预览的图层及图层信息；
  • 第二个环节是配置买家用于提交定制需求的定制项；
  • 第三个环节是将图层与定制项进行关联，以便于买家在定制项填写内容后，能在图层中实时展示
3-48.png

4.2.1 配置定制面

在定制面配置中，从左到右依次为：图层管理区域，图层预览区域和图层编辑区域，如下图所示
3-49.png
  • 图层管理区域：可以完成新增图层、编辑图层名称、调整图层顺序、锁定图层、删除图层等操作
  • 图层预览区域：可以通过对图层位置、大小进行拖拽调整，是图层最终的展示
  • 图层编辑区域：可以通过坐标、图层顺序、示例等参数进行修改，来调整图层的展示样式
以下详细讲述完成定制面配置的过程
  1. 点击【添加图层】按钮，在弹出的图层选择器中，选择“商品图片”图层，“商品图片”图层可上传定制商品的底图，或一些不需要买家定制的固定设计元素
    3-50.png
  2. 选中“商品图片”图层，在右侧图层编辑处，点击【上传】图片按钮，上传一个商品底图（或者根据定制商品的需要创建多个商品图片图层进行编辑）；这样就完成了商品底图的配置
    3-51.png
  3. 商品底图通常和默认的画板尺寸不一致，因此需要调整画板尺寸，来和商品图片保持一样的大小
    3-52.png
      保存修改后的画板尺寸，调整商品图层的位置，此时可以保证商品图层和画板对齐
    3-53.png
  4. 根据定制商品的需要，新增一些需要用户配置的图层，以下以文本图层和图片图层分别进行示例说明。点击【添加图层】按钮，选择文本图层，将文本图层添加到画板，通过拖拽和编辑文本图层的信息，将文本图层调整成需要呈现的样式
    3-54.png
  5. 点击【添加图层】按钮，选择图片图层，将图片图层添加到画板，同样通过上传示例图片，并调整图层的大小和位置，将图层调整成需要呈现的样式
    3-55.png
      如果图片图层是被商品图覆盖，记得调整将图片图层的顺序调整到商品图片图层下。可通过左侧将图片图层拖拽到商品图片图层下方；也可以在右侧，点击【置底】和【后移】来调整顺序
    3-56.png

4.2.2 配置定制项

配置定制项功能与表单定制完全相同，参考 新增定制模板 中的模板配置过程和组件说明；以下创建一个本演示所需的定制项
3-57.png

4.2.3 关联图层和定制项

  1. 选中文本图层，在右侧图层编辑区域，切换到【关联组件】tab，此tab会显示所有文本框定制项，选择当前图层需要关联的定制项即可。
    3-58.png
  2. 选中图片图层，【关联组件】tab 会显示所有 附件和图片选项 定制项，选择当前图层需要管理的定制项。至此完成了图层和定制项的关联
    3-59.png
      点击保存即完成此图文模板的编辑。

4.3 商城侧预览及加购

在给定制商品配置完图文定制模板后，买家按自己的定制需求填写对应的定制信息，可在商品图处实时预览定制结果，如下图所示；
3-60.png
  1. 点击 preview 按钮，即可在弹窗中查看定制后的信息
3-61.png
  1. 点击加购按钮，定制信息和预览图片会一起传输到购物车，买家下单后，商家可以在订单中查看到定制信息，并下载
    3-62.png

4.4 编辑图文定制商品

  1. 在定制商品列表，找到要编辑的商品，点击“更换模板”，进入商品定制页面
    3-63.png
  2. 你可以把图文定制商品切换为表单定制，也可以把表单定制切换为图文定制，在定制方式处进行操作即可
    3-64.png
  3. 如果想编辑商品的图文定制内容，点击更换按钮，即可在弹窗中选择其他图文模板，或创建新模板；更换选择后点击确定，即更换成功
    3-65.png

4.5 图层类型及功能说明商品图层

商品图层有两种使用是场景
  1. 设置定制商品的底图，为可定制区域提供参照
  2. 设置一些不需要买家定制，商家提前配置好的设计元素
在商品图层中，支持上传图片素材，并调整图层的大小、位置、角度等
3-66.png

文本图层

文本图层适用于需要定制文本内容的场景，文本图层提供以下功能
  1. 文本字体设置：支持商家自定义上传字体，来调整文本图层的展示样式
    • 点击“上传字体”，选择对应字体文件进行上传，上传成功后即可选择对应字体
      3-67.png
  2. 字号和字间距设置
    3-68.png
  3. 文字排版设置：支持设置文本在图层中居中、居左、居右展示
    3-69.png
  4. 文字颜色：设置修改文字颜色
    3-70.png
  5. 预制文本，支持设置前缀后缀文本
    3-71.png
  6. 倾斜角度，支持设置倾斜角度来实现图层的立体感
    3-72.png
  7. 支持配置文本全大写
3-73.png
文本图层支持关联定制组件
  1. 文本框定制项

文本域图层

文本域图层与文本图层配置基本相同，不同点在于可以配置多行文本
3-74.png
文本域图层支持关联定制组件
  1. 文本域定制项

弯曲文本图层

当希望定制文本以某一个弧度展示时，可配置弯曲文本图层
  1. 支持设置文本是弯曲或突起
  2. 支持拖拽调整弯曲的弧度和文本的起止点
3-75.png

平铺文本图层

平铺文本图层适用于配置可自动重复的文本定制场景；在平铺文本图层中，字体、字号、字色、字间距、预制文本、倾斜角度等与文本图层相同，此处不在赘述，其他特殊功能如下：
  1. 支持设置平铺方式，有重复、水平和垂直3种方式
3-76.png3-77.png3-78.png
  1. 支持设置平铺的文本间距、水平和垂直方向的偏移位置
    3-79.png

图片图层

图片图层包括以下功能

  1. 商家可开启让买家调整图片的大小和位置

      • 开启后，买家在商城侧可通过按钮或手势，对图片进行调整

        3-80.png
      • 买家上传图片，显示操作按钮，买家即可进行对应移动操作
        3-81.png

平铺图片图层

与平铺文本图层配置相同，不同点在于支持图片的重复展示
3-82.png

五、商品规格联动配置

当定制商品的规格属性会和定制项有联动时，例如：选择白色时支持定制（展示定制项），选择黑色时不支持定制（隐藏定制项）；当有此需求时，可在定制过程中进行配置
  1. 点击定制商品，进入商品定制页面
5-1.png
  1. 选择需要定制的商品，并关联对应的模板，此时方可进行商品规格的配置，点击【添加条件】即可配置当规格为某个值时，显示对应的定制项
5-3.png5-2.png
  1. 点击保存即可生效，效果图如下
5-5.png5-4.png

 

六、设置

点击顶部导航的设置按钮，进入设置页面
6-1.png

 

6.1 定制组件异常文案设置

定制组件例如文本框、附件上传会对买家填写的内容有所限制，限制的文案则可以在设置中进行配置
  1. 进入设置页面
  2. 根据自己的需求，编辑对应组件在不同情形下的提示文案内容即可
6-2.png
  1. 配置完成后去商城侧检查异常提示的效果

 

6.2 定制预览设置

针对图文定制，支持设置定制预览按钮的交互和样式，商家可根据店铺主题选择适合的样式

6.3 定制文件配置

针对图文定制，支持设置是否同步导出生产文件，默认关闭。开启后，图文定制商品在加购后，会同步导出一个生产文件，其中只渲染了商家设置好的，需要打印的图层，其他未设置的图层将不渲染
  1. 在设置页面打开定制文件导出功能
6-3.png
  1. 在图文定制模板中，针对自己要导出的图层，开启导出
    6-4.png
  2. 在商城侧预览
6-5.png
  1. 导出预览图片的同时，导出生产文件，打开后如下，没有导出背景图片，仅仅导出了文本图片
6-6.png