自定义图片与活动图标
小程序首页那一排活动入口的图标、各个业务位置上的配图，都不是在每张业务单据里单独贴的，而是统一放在「自定义图片」这个模块里维护：一张图片对应一个「应用 + 分组 + 名称」的位置，业务界面按位置取图。小程序活动图标就是其中一个分组，用来把首页的活动入口换成门店自己的图标，让小程序更美观、活动入口更好认。
功能路径：系统菜单 → O2O业务 → 自定义数据 → 自定义图片
一、功能概述
1. 这套机制解决什么问题
- 集中配图：小程序上各处图片只需在一个窗口维护，不用逐个功能找设置入口；
- 按位置取图：业务界面按「应用、分组、名称」三个条件定位图片，位置没变就不用重配；
- 可排序：同一组里的多张图用「显示顺序」控制先后，小程序端按这个顺序排列；
- 可配文字：「自定义文字」给图片配一句说明，用于界面上跟着图标显示的文字。
2. 整体结构
窗口分三块：
- 图片清单：列出已维护的图片记录，列为「应用」「分组」「名称」「自定义文字」「显示顺序」，右侧是当前记录的图形预览；
- 用户定义选项：给自定义图片这类位置设置可选值；
- 系统选项：软件预置的应用、分组、名称清单，由系统维护，业务界面就是按这些项来取图的。
二、界面布局说明
图片清单区
| 列名 | 说明 |
|---|---|
| 应用 | 图片投给哪个终端使用，例如小程序 |
| 分组 | 同一应用下的图片类别，例如活动图标 |
| 名称 | 具体位置名，通常带上业务标识，便于区分是哪一个入口的图 |
| 自定义文字 | 随图片显示或供界面引用的说明文字 |
| 显示顺序 | 小数，数值小的排前面；同一组内靠它调整先后 |
工具栏
- 新增 / 修改 / 删除：维护图片记录本身；
- 载入图片：为当前记录选择本地图片，选定后右侧预览刷新；
- 删除图片：只清掉当前记录上的图片内容，记录本身保留。
三、业务操作步骤
步骤 1：打开窗口并定位到目标分组
系统菜单 → O2O业务 → 自定义数据 → 自定义图片。清单里按「应用」「分组」筛出要维护的那一类，例如小程序的活动图标。
步骤 2：选中要换图的那一行
双击或单击选中记录，右侧预览区显示当前正在使用的图。
步骤 3：载入新图
点【载入图片】，选择电脑中的图片文件。图片建议尺寸 200×200 像素，正方形、主体居中，四周留出一点空白，避免小程序里圆形或方形裁切时切掉内容。
步骤 4：调整顺序与文字
需要改变小程序上图标排列时修改「显示顺序」；需要在图标下方显示说明文字时填「自定义文字」。
步骤 5：保存并到小程序端确认
保存后记录生效。小程序端刷新首页或对应活动入口，图标按新的图片和顺序显示；没有变化时先确认应用、分组、名称是否与系统选项里的位置一致。
四、字段详细说明
| 字段名 | 含义 |
|---|---|
| 应用 | 图片使用端，小程序侧的图标与图片位统一归在小程序应用下 |
| 分组 | 图片类别，一个分组对应一类位置（活动图标、门店图片等） |
| 名称 | 位置标识，业务绑定时按它取图 |
| 自定义文字 | 该位置的说明文字 |
| 显示顺序 | 组内排序值，支持小数，方便中间插入 |
图片本身与业务界面之间通过绑定关系连接：业务记录只记住它引用了哪一条自定义图片，界面显示时再按「应用 + 分组 + 名称」把图片取出来。因此在【自定义图片】里删掉一条记录，正在引用它的业务位置就会取不到图。
五、各图片档位的素材要求
「自定义图片」里预置的位置不止活动图标一档：开屏广告、底部导航栏图标、个人中心头部背景这些位置也都放在同一个窗口里，操作方式和活动图标完全一样（选中记录 → 载入图片 → 保存），差别只在素材的尺寸、张数和格式。各档要求如下：
| 档位 | 出现在小程序哪里 | 素材格式 | 张数 |
|---|---|---|---|
| 活动图标 | 首页一排活动入口图标 | 200×200 像素正方形 | 每个入口 1 张 |
| 首页全屏广告 | 进入小程序时全屏展示约 3 秒 | GIF 动图（也可用静态图） | 1 张 |
| 底部导航栏图标 | 小程序底部导航按钮 | 38×38 像素 PNG | 必须 10 张 |
| 个人中心头部背景图片 | 「我的」页面顶部背景 | 横版背景图 | 1 张 |
1. 首页全屏广告（开屏动图）
顾客点开小程序时，先整屏展示一张图（通常做成 GIF 动图），停留约 3 秒后自动进入首页，用来在新品上市、节日活动、首单转化这类场景里第一时间抓住注意力。
维护步骤：
- 系统菜单 → O2O业务 → 自定义数据 → 自定义图片，在清单里选中「首页全屏广告」这一位置；没有记录时先【新增】一条，把应用、分组、名称按系统选项里的取值填好。
- 点【载入图片】选择做好的动图文件，右侧预览出现该图即表示已挂上。
- 上传完成后退出当前窗口，再打开小程序验证进入时的全屏效果；只保存不退出，界面可能还是旧图。
- 换档期时重新选中这条记录、再次【载入图片】覆盖即可，不需要删记录重建。
注意两点：
- 素材按手机整屏竖版比例制作，主体放中间，四周留出安全边距，不同机型屏幕高度不同；
- 开屏广告与商城广告窗口里的「弹窗」不是一个东西：弹窗是在首页里弹出的一块广告图，可以点关闭、可以绑跳转；开屏广告是进入小程序瞬间铺满整屏、看完自动消失的展示位，不做跳转。商城广告各点位见 商城广告位。
2. 底部导航栏图标
把小程序底部那一排导航按钮的图标换成门店自己的样式，让品牌视觉贯穿到最底下一层。
- 张数是硬性要求：一共 10 张——5 个导航项各需要一张未选中状态的底图和一张选中后的彩色图。少传任何一张都不生效，小程序会退回软件默认的图标样式，不会出现"改了一半"的效果。
- 尺寸与格式：38×38 像素、PNG 格式，图标主体居中、四周留白，避免描边被切。
- 预置位置：这一档在系统选项里的应用是「微信商城」、分组是「底部导航栏图标」，下面按导航项各预置了两条名称（例如「点单 1 / 点单 2」「订单 1 / 订单 2」「活动 1 / 活动 2」），同一导航项的两条分别挂底图和选中后的彩图；「自定义文字」里写的是这个导航项在小程序底部显示出来的名称，例如「订单」「活动中心」。
- 上传时逐条选中对应名称的记录、分别【载入图片】，10 条都挂上后再打开小程序逐个点一遍底部按钮，确认底图与彩图没有配反。
3. 个人中心头部背景图片
自定义「我的」页面顶部那块背景图，通常与会员卡卡面、门店主视觉配套使用。
- 在自定义图片清单里选中「个人中心头部背景图片」这一位置（没有记录时先新增）。
- 点【载入图片】选择背景图并保存。
- 打开小程序的【我的】页面确认头部已经换成新图。
背景图只做铺底，不承载点击跳转；横版构图，文字和二维码等重要内容不要压在背景区域上，避免被头像和菜单遮挡。尺寸与大小限制以界面标注为准。
六、典型使用场景
场景 1：换掉小程序首页的活动图标
背景：首页某个活动入口的图标还是上一档活动的样式。 操作：自定义图片 → 定位到小程序的活动图标分组 → 选中该位置 → 【载入图片】选新图 → 保存 → 小程序刷新查看。
场景 2：新增活动后调整入口顺序
背景：新上一个活动，希望排在会员入口前面。 操作：给新图标设置一个更小的「显示顺序」值，不用改动其他图标。
场景 3：门店单独配图
背景：某些位置支持按门店分别指定图片，例如门店的资质图与社群二维码。 操作：这类位置在门店设置窗口里单独维护，见 小程序门店营业执照与社群入群码。
场景 4：新品上市铺开屏广告
背景：一款新蛋糕上市，希望顾客一打开小程序就看到。 操作：自定义图片 → 选中「首页全屏广告」→ 【载入图片】选做好约 3 秒的 GIF → 保存并退出窗口 → 重新打开小程序确认全屏效果；档期结束后把这条记录换成下一档素材或【删除图片】清空。
场景 5：整套更换小程序视觉
背景：门店换了主视觉，底部导航按钮还是软件默认样式。 操作：按 5 个导航项各准备底图与彩图共 10 张 38×38 像素 PNG，在「底部导航栏图标」逐条载入，同一批里再顺带更新「个人中心头部背景图片」和首页活动图标。
七、权限控制与前置条件
- 本模块影响顾客在小程序上看到的内容，建议由负责线上运营的岗位统一维护；
- 系统选项里的应用、分组、名称由软件预置，改名或删除会导致业务界面取不到图；
- 图片通过安仕达图片服务对外访问，涉及外部网址的场景可参考 微信图片资料管理；
- 上传的图片会公开展示，不要包含顾客信息、内部单据或其他门店的经营数据。
八、常见问题
1. 换了图，小程序上还是旧的
- 原因：小程序端对图片有缓存，或改的不是这个位置对应的记录；
- 处理：先核对「应用、分组、名称」是否与要改的位置一致，再在小程序里退出重进或下拉刷新确认。
2. 图标变形或被切掉一块
- 原因：图片不是正方形，或主体贴边；
- 处理：按 200×200 像素重新准备，主体居中、四周留白后再【载入图片】。
3. 位置上一片空白
- 原因：该记录上的图片被【删除图片】清掉了，或整条记录被删除；
- 处理：重新【载入图片】补上；记录被删的需重新建立并按正确的应用、分组、名称填好，再补图片。
4. 多个门店共用一个位置，能不能分别显示不同图
- 处理：分组里按门店维度分别建立记录，名称带上门店标识；门店级图片位（如营业执照、入群码）在门店设置窗口维护，不在这里逐条改。
5. 图片大小有没有上限
- 处理：不同位置的限制不一样，窗口内会在图片区域旁标注该位置的大小要求，以界面标注为准；准备素材时尽量控制在几百 KB 以内，既满足上传限制也保证小程序加载速度。
6. 开屏广告放不出来
- 原因：素材传成了静态图但格式浏览器不认、动图帧数过高体积过大，或记录的应用、分组、名称与系统预置的「首页全屏广告」位置不一致；
- 处理：核对位置三要素与系统选项一致，用整屏竖版的 GIF 重新【载入图片】，保存后退出窗口再进小程序看。
7. 底部导航栏只改了一部分图标
- 原因：这一档要求 10 张图（5 张底图 + 5 张选中后的彩图）全部上传，少一张就整体不生效、退回默认样式；
- 处理：把缺的那几张补齐，确认每个导航项的底图和彩图各一张，再逐个点击导航项核对选中态。
附：与其他功能的关系
| 环节 | 对应功能 |
|---|---|
| 门店级图片位（营业执照、入群码） | 小程序门店营业执照与社群入群码 |
| 需要以网址形式引用的图片 | 微信图片资料管理 |
| 首页横幅类广告位 | 首页副广告 |
| 可跳转的商城广告点位（首页、弹窗、背景、个人中心等） | 商城广告位 |
| 小程序上的活动与促销 | 线上特价促销 |