页面装修

页面装修是指通过可视化的工具和灵活的设计选项，对小程序页面布局、样式、功能模块等内容进行自定义配置的过程。在此处你可以快速发布抖音、小红书、微信、支付宝四端的小程序。具体可分为小程序首页和小程序自定义页面，小程序首页即进入小程序的首先呈现的页面，自定义页面则是作为首页跳转的二级页面，需通过首页各组件配置跳转链接方可进入。

一. 首页

在这里你可以对小程序的首页布置进行页面装修，所有配置效果在保存发布后实时同步至小程序首页中。

• 系统默认首页版本
  • 新建商场后，系统会自动创建一个该商场的标准首页版本，并默认开启状态。
  • 可以在默认首页版本进行页面装修，也可以新创建一个页面
  • 对于已经设置了多个版本的页面，只能开启其中一个实时展示在C端
  • 进入装修页面，可以根据需要对小程序的首页进行设置，支持支付宝、小红书、抖音和微信小程序分开设置。需注意，抖音和小红书的小程序有平台机审，注意不要有第三方引流文案或不属于该平台的二维码，比如在抖音小程序上放微信服务号的二维码，平台会判定违规，封掉该页面。
  • 页面支持复制，当我们需要在原有页面上修改部分内容但又希望保留原始版本时，可以使用复制功能，快速创建

• 版本最多可创建100个，当达到数量时可对之前版本进行删除来解决

1. 页面装修流程

1. 点击「页面装修」，进入装修页面
2. 选择合适组件，添加至页面中
3. 按照页面提示设置根据组件类型设置内容
4. 保存发布，可通过二维码扫码预览装修效果

2. 基础组件介绍

2.1 图片组件

通常用于插入banner或作为其他组件的图形标题使用。

• 同个页面最多可使用20个图片组件

1. 首先添加一个“图片”组件，选中图片后拖拽到页面的合适位置即可。

2. 选中“图片”组件后，右边会弹出图片组件的设置页面；

3. 可以对图片边距进行设置，支持下/左右边距修改最大支持16px

4. 可以设置是否对图片使用圆角

5. 可对抖音端、小红书端、微信端与支付宝端显示进行控制，如仅抖音端，则表示该部分内容仅能在抖音小程序页面显示，支付宝和微信页面则不显示。默认所有端均显示，可根据实际进行设置。

6. 设置跳转链接。即顾客在点击图片后可以直接跳转到指定着陆页。当然也可以不设置，仅做一张宣传图。

   A. 跳转链接类型根据选择的显示控制端有所不同（因不同小程序端的限制，故有些链接类型仅可以在微信端使用，而有些链接类型仅能在抖音端使用），如仅选择微信端时，链接类型中可选择“微信链接”，从而实现微信小程序的跳转

   B. 推广渠道（选填）：可设置推广渠道，顾客从该处点击跳转之后，即会计算对应推广渠道的访问次数等数据

   C. 常见链接类型应用场景举例

   • 首页：即小程序首页，若选择跳转链接类型为首页时，则会跳转至小程序首页
   • 门店列表：可跳转至指定分类/区划/楼层的门店列表中
   • 门店详情：可跳转至指定门店详情页
   • 个人中心：可跳转至小程序个人中心页面
   • 开卡流程：可跳转至开卡引导页面
   • 积分明细：可跳转至顾客积分明细页面
   • 线下消费：可跳转至顾客小程序线下消费订单页面（查看闪电买单订单/拍照积分订单/快速积分订单等）
   • 自助积分：可跳转至自助积分页面，顾客进行手动申请快速积分/拍照积分申请
   • 会员码：可跳转至会员码页面，直接打开顾客会员码
   • 会员规则：可跳转至会员规则详情页面
   • 自定义页面：可跳转至自定义页面
   • 有价券详情：可跳转至指定有价券详情售卖页面，顾客点击后可直接进入对应卡券购买页进行购买
   • 卡券包：可跳转至顾客小程序卡券包页面，查看当前卡券情况
   • 天降盲盒：可跳转至指定的天降盲盒游戏页面，进行游戏参与
   • 智慧停车：可跳转至智慧停车页面，进行停车缴费
   • 免费券详情：可跳转至指定免费券领取页面，顾客点击后可直接进行免费券的领取
   • h5链接：可跳转指定的h5页面，进行联动。为确保h5页面能正常跳转，请联系TP官方人员，将需要的h5链接配置为白名单。
   • 活动报名列表：可跳转至活动报名列表中，进行活动报名的参与
   • 活动报名详情：可跳转至指定的活动报名页面进行报名
   • 满立送活动详情：可跳转至指定的满立送活动详情页面
   • 中奖记录：可跳转至中奖记录页面查看中奖详情
   • 幸运盲盒机：可跳转至指定幸运盲盒机活动页面，进行游戏参与
   • 线上订单：可跳转至小程序中的线上订单页面，查看购买的卡券记录等
   • 消费红包：可跳转至消费红包明细页面，查看消费红包余额
   • 问卷表单：可跳转至指定问卷表单页面
   • 微信链接：若应用平台仅选择“微信”端时，可选择微信链接，实现不同小程序之间的跳转，只需按照页面提示填写要跳转的小程序appid和跳转地址，即可实现在现有小程序基础上跳转至第三方小程序

   

7. 其中图片尺寸需要满足格式jpg、jpeg、png，图片尺寸固定宽度750px，高度不得超过2000px，大小≤600kb

2.2 图文导航

当SP活动内容过多，无法在单个页面全部呈现时，可根据活动主题和业态将内容分布在多个页面，并在活动主页面中通过图文导航（金刚区）实现引流。

• 同个页面最多可使用20个图文导航组件

1. 在左边页面组件中将图文导航拖拽至小程序页面的适当位置，选中图文导航之后会在右侧出现设置栏；

2. 在这里，你可以设置排列方式以及下边距的修改，支持下边距修改最大支持16px

3. 可对导航项数量进行增减，排列顺序进行调整

4. 点击导航图标后，可对导航名称，跳转链接，显示控制进行设置

   A. 跳转链接类型根据选择的显示控制端有所不同（因不同小程序端的限制，故有些链接类型仅可以在微信端使用，而有些链接类型仅能在抖音端使用），如仅选择微信端时，链接类型中可选择“微信链接”，从而实现微信小程序的跳转

   B. 推广渠道（选填）：可设置推广渠道，顾客从该处点击跳转之后，即会计算对应推广渠道的访问次数等数据

5. 图标支持自定义上传

2.3 卡片导航

对金刚区功能模块的自定义。

• 同个页面最多可使用5个卡片导航组件

1. 在左边页面组件中将卡片导航拖拽至小程序页面的适当位置，选中卡片导航之后会在右侧出现设置栏；

2. 可以卡片导航进行排列方式的调整以及边距的调整

3. 可对导航栏数量进行增减，排列顺序进行调整

4. 点击导航图标后，可对导航名称，导航简述，跳转链接，显示控制进行设置

   A. 跳转链接类型根据选择的显示控制端有所不同（因不同小程序端的限制，故有些链接类型仅可以在微信端使用，而有些链接类型仅能在抖音端使用），如仅选择微信端时，链接类型中可选择“微信链接”，从而实现微信小程序的跳转

   B. 推广渠道（选填）：可设置推广渠道，顾客从该处点击跳转之后，即会计算对应推广渠道的访问次数等数据

5. 图标支持自定义上传

2.4 轮播焦点图

用于多张图片展示场景，点击图片可进行页面跳转。

• 同个页面最多可使用20个轮博焦点图组件

1. 在左边页面组件中将轮播焦点图组件拖拽至小程序页面的适当位置，选中轮播焦点图之后会在右侧出现设置栏

2. 可对下边剧进行调整，支持下边距修改最大支持16px

3. 上传图片，图片规格需满足：格式jpg、png，宽高1344px*528px，大小≤600kb，最多添加16张

4. 当添加了多张图片时，可对其排列顺序进行调整

5. 设置跳转链接后，可对显示控制进行设置，即对抖音端、小红书端、微信端及支付宝端是否显示进行控制设置

   A. 跳转链接类型根据选择的显示控制端有所不同（因不同小程序端的限制，故有些链接类型仅可以在微信端使用，而有些链接类型仅能在抖音端使用），如仅选择微信端时，链接类型中可选择“微信链接”，从而实现微信小程序的跳转

   B. 推广渠道（选填）：可设置推广渠道，顾客从该处点击跳转之后，即会计算对应推广渠道的访问次数等数据

2.5 门店分类导航

根据门店的分类设置，顾客可快速锁定同类型的门店

• 同个页面最多可使用1个门店分类导航组件

1. 在左边页面组件中将门店分类导航组件拖拽至小程序页面的适当位置，选中之后会在右侧出现设置栏
2. 可对下边距进行设置，支持下边距修改最大支持16px
3. 门店导航中的文字颜色可进行自定义设置
4. 当分类项较多时，可对其排列顺序进行调整
5. 点击图标后，可在系统中的图标库中进行选择，不支持自定义上传

2.6 推荐门店

商场热门门店推荐引流。

• 同个页面最多可使用1个推荐门店组件
• 推荐门店组件添加至小程序页面时，默认添加在页面最下方，不能够调整其位置
• 将该组件添加至小程序页面时所显示的内容即小程序实际展示内容，所见即所得
• 热门门店的排列顺序是按照系统所统计昨天门店消费笔数（数据来源于闪电买单、拍照积分、支付即积分、pos订单）进行排名展示
• 每天2:00算一波统计数据后算出昨天前24的门店，存好这份热门店铺的名单，显示时直接拿名单数据而非实时计算

2.7 沉浸式轮播

用于小程序首页顶部多张图片轮播，支持包含顶部页面标题在内的更大区域的海报图配置，提升页面的氛围感。支持配置跳转链接后点击图片可进行页面跳转。

• 同个页面最多可使用1个沉浸式轮播组件

1. 沉浸式轮播图对图片设计要求较高，banner主视觉和文字不可放入预留区域防止被搜索条及页头遮盖，预留区域为图片上面，高度为432px

2. 图片格式支持jpg、png，宽高1125px*1284px，大小≤600kb，最多添加16张

3. 可以设置展示方式，有三种类型可选择：超大，大，标准。系统可预览效果

4. 添加图片后，可对页头文字颜色，跳转链接，显示端进行设置

   A. 页头文字颜色：目前仅支持微信端修改页头文字： 包括手机端电量、信号标志、电量、WiFi等标志颜色

   B. 跳转链接，配置后点击图片即可跳转至对应链接页面

   C. 显示控制：可以对抖音，小红书，微信，支付宝端是否显示进行设置（当系统未授权抖音/小红书/支付宝/微信小程序时，则不能设置对应端显示）

   • 跳转链接类型根据选择的显示控制端有所不同（因不同小程序端的限制，故有些链接类型仅可以在微信端使用，而有些链接类型仅能在抖音端使用），如仅选择微信端时，链接类型中可选择“微信链接”，从而实现微信小程序的跳转

   • 推广渠道（选填）：可设置推广渠道，顾客从该处点击跳转之后，即会计算对应推广渠道的访问次数等数据

2.8 自定义热区

支持一张图片配置多个热区跳转链接，进行商场活动功能导航。

• 同个页面最多可使用20个自定义热区组件

1. 图片的上传需满足格式jpg、jpeg、png，图片尺寸固定宽度750px，高度不得超过2000px
2. 支持是否对抖音端，微信端，支付宝端显示进行控制
3. 在设置热区时，支持热区的复制及删除
4. 每个热区可以设置不同的页面地址
5. 一张图的热区有数量的限制

   • 一张图最多添加30个热区。报错提示：“图片热区最多添加30个”

   • 最少添加1个。报错提示：“图片热区至少添加1个”

3. 营销组件介绍

3.1 免费券展架

主要用于免费送商品券和抵金券，通过该步骤，将我们所创建的免费券在C端展示，并设置活动场次和页面布局。

• 同个页面最多可使用20个免费券展架

1. 在左边页面组件中将免费券展架组件拖置小程序页面中适当位置，点击后在右边会出现免费券展架组件的设置页面；
2. 支持是否对抖音端，微信端，支付宝端显示进行控制。即可实现针对不同端发放不同券。
3. 在设置页面中可以设置是否显示标题，券的排列方式，展架场次；

• 是否显示标题：表示若开启则展架标题会露出，若不开启则不会显示展架标题；
• 券的排列方式：分为一列，两列，三列，滑动；
• 展架场次：即该展架参与活动的场次，当设置多场次时 ，表示同时展示多场免费券，具体的免费券发放时间由创建免费券展架时设置的时间决定。
• 上述步骤中添加的免费券展架仅是一个模版，需要在「选择展架」中添加已提前制作好的免费券展架，才能算免费券展架组件创建完成。
• 支持通过拖拽卡券来调整排列顺序

3.2 积分礼品货架

主要是用于将积分兑换商品添加在小程序页面中，使其对外露出提供给顾客使用积分购买商品。

• 同个页面最多可使用20个积分礼品货架

1. 在左边页面组件中将积分礼品货架组件拖置小程序页面中适当位置，点击后在右边会出现积分礼品货架组件的设置页面；
2. 支持对支付宝端、微信端、抖音端是否显示进行控制
3. 在设置页面中可以设置是否显示标题，券的排列方式，展架场次；
4. 是否显示标题：表示若开启则展架标题会露出，若不开启则不会显示展架标题；
5. 券的排列方式：分为一列，两列，三列，滑动；
6. 货架场次：即该货架参与活动的场次，当设置多场次时 ，表示同时展示多场积分礼品券，具体积分礼品券发放时间由创建积分礼品货架时设置的时间决定。
7. 上述步骤中添加的积分礼品货架仅是一个模版，需要在「选择货架」中添加已提前制作好的积分礼品货架，才能算积分礼品货架组件创建完成。
8. 支持通过拖拽卡券来调整排列顺序

3.3 活动报名

该组件主要用于在小程序页面中呈现活动报名。

• 同个页面最多可使用1个活动报名组件

1. 通过拖拽「活动报名」组件至小程序页面中的合适位置，位置放置完成后可支持再调整
2. 完成上一步后，点击小程序页面中的活动报名组件，进行组件页面的设置
3. 可设置排列方式（滑动/竖排）来展示多个活动报名计划
4. 添加活动报名计划，最多可添加5场
5. 活动场次添加之后可通过拖拽调整其排列顺序

3.4 有价券橱窗组件

可根据品牌、业态、价位等维度自定义不同主题的货架，并自由添加所有应用类型的有价券进行推荐展示。

• 同个页面最多可使用20个有价券橱窗组件

1. 将有价券橱窗组件拖拽至页面画布中，点击一下画布中的该组件，进行组件设置
2. 有价券橱窗组件支持沉浸式背景模式，如同一品牌券，可设置沉浸式背景打造品牌氛围
3. 如果不需要沉浸式背景模式，可选择无背景模式，该模式下可设置是否显示标题，标题自定义
4. 可根据卡券数量设置排列方式：一列、两列、三列、滑动
5. 支持对显示端进行设置，如只选择抖音端，则表示该商品只能在抖音端露出售卖
6. 最后点击「添加有价券」，在有价券列表中选择要展示的有价券，可选择不同售卖时间的有价券
7. 支持设置有价券默认排列数量

3.5 限时售卖货架组件

常用于波段式的节点售卖活动，相较于有价券橱窗更加强调时效性，仅可展示限时售卖计划所关联的有价券。（限时售卖计划中的有价券具有相同的售卖时间和售卖结束时间，小程序端显示时将会显示距离本场开始/结束仅剩多少时分秒）

• 同个页面最多可使用20个限时售卖货架

1. 将限时售卖货架组件拖拽至页面画布中，点击一下画布中的该组件，进行组件信息设置
2. 输入标题，可设置是否显示标题，若关闭，则小程序页面中不显示所设置的标题
3. 根据卡券数量设置排列方式：一列、两列、三列、滑动
4. 设置显示端，支持对不同端小程序显示端进行控制，如仅选择抖音端，则只在抖音小程序中显示
5. 添加限时售卖计划，进入限时售卖计划列表中添加所需的计划，如果没有所需要的，可点击「前往创建限时售卖计划」

二. 自定义页面

在这里你可以进行自定义页面的装修，自定义页面不等同于首页，不能直接在小程序上露出，主要是通过在首页中配置跳转链接为自定义页面，实现首页点击跳转进入。

• 页面设置与首页中的设置一样，可直接参考首页设置
• 基于自定义页面不会主动对C端透出，所以如果有线下活动扫码领取体验券时，可在自定义页面中装修，提供自定义页面二维码，即可实现专用券只能通过扫该自定义页面二维码领取
• 其他场景示例：首页展示商场SP活动宣传图，点击图片后二级页面为活动详细介绍，则需要将活动详情页装修为自定义页面
• 自定义页面视频教程：https://www.bilibili.com/video/BV15PtgzBEMd/?vd_source=96adb27c1833077e1186f1db09e2a095

三. 微信小程序appid查询教程

1. 搜索进入要跳转的小程序
2. 右上角点“...”，然后点击小程序名称进入小程序信息页面
3. 点击“更多资料”
4. 在更多资料中可获取对应小程序的appid

四. 微信小程序获取跳转路径取教程

1. 在微信公众平台登录任意一个微信公众号，进入「内容与互动-草稿箱」页面，点击「写新图文」

2. 进入创作页面后，选择上方「小程序」，在弹出的页面中去搜索小程序名称或者appid

3. 搜索出要跳转的小程序后，点击「下一步」

4. 点击「获取更多页面路径」后，在弹出的页面中输入一个微信号，点击开启，开启后即可使用该微信号在对应的小程序复制任意页面的路径，该能力十分钟内有效。

5. 获取路径

该微信用户可打开小程序右上角菜单，点击“复制页面路径”并粘贴至左侧“小程序路径”中

五. 小程序跳转携带动态业务参数

功能说明

该功能支持影能小程序在跳转其他小程序/H5页面时,自动携带动态参数（如手机号），从而实现顾客在跳转到目标小程序/H5页面时的单点登录，提升顾客体验。

此功能的实现需要目标小程序进行开发对接，如需使用请联系影能项目经理。

1. 商管后台配置

• 在小程序装修中，跳转链接选择为微信小程序链接/支付宝小程序链接/ 抖音链接/H5链接时，可选择需要携带的业务参数。
  • 手机号：顾客手机号，没有则为空
  • 会员卡号：会员卡号，没有则为空
  • 商场编码：当前顾客小程序页面所在商场的商场编码
  • 外部商场编码：当前顾客小程序页面所在商场的外部商场编码
  • openid/userid：当前顾客登录小程序的openid/userid
  • unionid： 当前顾客登录的unionid

2. 跳转逻辑

• 微信/支付宝/抖音/小红书小程序，均可跳转H5页面
• 微信小程序可跳转其他微信小程序；支付宝小程序可跳转其他支付宝小程序
• 抖音/小红书小程序，不可跳转其他小程序

3. 使用动态参数对接指南

可向影能项目经理获取【小程序跳转携带参数对接指南】

六. 常见问题🤔

1. 多商场的项目，顾客进入会员小程序时展示哪个商场？

若顾客通过搜索小程序或其他路径未获取到与其关联的商场首次进入小程序，系统会提示顾客是否授权GPS定位。若授权， 则会展示距离顾客最近的商场；若未授权，则会展示商场列表让顾客选择。若未选择商场直接返回，则随机展示一个商场。

2. 小程序的会员中心是否支持自定义配置？

答：小程序底部的门店、我的这两个页面均为固定页面，不支持自定义配置。会员中心页面可隐藏某项功能，如隐藏「权益卡」「卡券包」；「自助积分」功能可配置跳转为其他小程序页面。如需隐藏或设置自助积分的跳转，请联系影能项目经理。

3. 扫描自定义页面二维码进入小程序后，页面一直转圈

• 首先排查该自定义页面是否发布，对于首次创建的自定义页面，若未发布，扫码进入之后就会报错。只需要将页面点击发布即可。

4. 如何设置小程序跳转外部H5链接？

对于除了微信公众号文档链接可通过公众号与小程序的关联自动可跳转之外，其他类型的H5页面，需要进行加白后，方可实现由影能侧小程序跳转对应的H5链接中。具体流程如下：

• 影能侧提供校验文件：a6ea8c105a1a4cc3f3053064b95777a5
• 客户自行联系需要跳转H5链接的对应开发团队，让其将上述影能侧提供的检验文件，添加在对应的链接域名下
• 完成域名下添加校验文件后，告知影能侧，并将完整的H5链接提供给影能运营人员，由影能侧进行加白处理

5. 如何设置微信小程序跳转其他小程序？

在小程序装修的组件中，跳转链接选择「微信链接」，并填写需要跳转的小程序appid和跳转地址即可。

6. 怎么将社群二维码放到小程序首页？

可将社群二维码制作成宣传图，在「页面装修」中使用图片、沉浸式轮播等图片类的组件将宣传图放在小程序首页中。但是注意：各个平台的小程序都会有机审，如果平台发现小程序中有第三方引流文案或不属于该平台的二维码，比如在抖音小程序上放微信服务号的二维码，平台会判定违规，封掉该页面。