展示增强

约 1201 字大约 4 分钟

2026-04-09

当应用类页面的默认展示能力无法满足业务诉求时，可以通过“展示增强”的方式，在指定页面区域插入自定义组件，补充展示区块、视觉信息和局部交互能力。

典型场景例如：

在应用首页增加运营看板、公告、统计卡片
在自定义页面中组合多个业务组件形成完整页面
在站点中增加辅助展示模块、嵌入内容或营销区块
在互联应用和互联自定义页面中补充品牌化展示与业务入口

适用场景

适用于“应用类页面已经存在，但原有展示表达能力不足，需要增加自定义展示区块或局部交互模块”的场景。

适用页面

应用首页
自定义页面
互联自定义页面
互联应用首页
互联站点

什么时候适合做展示增强

如果你遇到下面这些需求，通常都适合优先考虑展示增强：

想在现有页面中增加新的展示区块
想插入图表、卡片、状态说明、外部嵌入内容
想把某些高频操作做成局部交互模块
想在不改动页面整体结构的前提下增强信息表达

开发思路

展示增强通常可以拆成三步理解：

明确增强场景和目标区域
开发自定义组件
将组件发布并配置到目标页面中

开发流程

明确场景与组件目标
在开始之前，先确认以下问题：
- 组件要放在哪个页面
- 组件需要哪些输入数据
- 组件是否需要与宿主页面交互
创建组件
进入后台创建自定义组件，填写组件名称、支持终端、组件类型以及应用类页面适用范围。
对于 Web 端，一般基于 Vue 2 组件方式开发；对于移动端，一般通过在线 IDE 开发小程序组件。

编写组件代码

组件开发时，优先实现以下内容：

页面结构（模板）
数据接收（属性 / 上下文）
交互行为（事件、回调）
样式展示

下面以一个“欢迎横幅”组件为例，展示 Web 端和移动端的基础写法。这个示例适合用于首页顶部提示、公告占位或轻量品牌展示等场景：

移动端

组件示例

components

welcome-banner

index.js

index.json

index.wxml

index.wxss

app.json

config.json

project.config.json

sitemap.json

components/welcome-banner/index.js
Component({
  data: {
    message: 'Welcome to use Share CRM'
  }
})
components/welcome-banner/index.json
{
    "component": true
}
components/welcome-banner/index.wxml
<view class="welcome-banner">
  <text class="welcome-text">
    {{message}}
  </text>
</view>
components/welcome-banner/index.wxss
.welcome-banner {
  padding: 32rpx;
  text-align: center;
}

.welcome-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}
app.json
{
    "pages": [],
    "sitemapLocation": "sitemap.json"
}
config.json
{
    "components": {
      "root": "components/welcome-banner/index"
    },
    "main": ""
}
project.config.json
{
    "miniprogramAvaId": "fsdemo-lego",
    "avaFrameVer": "770.0.4",
    "description": "项目配置文件",
    "packOptions": {
      "ignore": []
    },
    "setting": {
      "urlCheck": true,
      "scopeDataCheck": false,
      "coverView": true,
      "es6": true,
      "postcss": true,
      "compileHotReLoad": false,
      "preloadBackgroundData": false,
      "minified": true,
      "autoAudits": false,
      "newFeature": false,
      "uglifyFileName": false,
      "uploadWithSourceMap": true,
      "useIsolateContext": true,
      "nodeModules": false,
      "enhance": false,
      "useCompilerModule": true,
      "userConfirmedUseCompilerModuleSwitch": false,
      "useMultiFrameRuntime": true,
      "useApiHook": true,
      "useApiHostProcess": true,
      "showShadowRootInWxmlPanel": true,
      "packNpmManually": false,
      "packNpmRelationList": [],
      "minifyWXSS": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.15.0",
    "appid": "wxb7ca92fe07ce5c66",
    "projectname": "legodemo",
    "debugOptions": {
      "hidedInDevtools": []
    },
    "scripts": {
      "beforeCompile": ""
    },
    "isGameTourist": false,
    "condition": {
      "search": {
        "list": []
      },
      "conversation": {
        "list": []
      },
      "game": {
        "list": []
      },
      "plugin": {
        "list": []
      },
      "gamePlugin": {
        "list": []
      },
      "miniprogram": {
        "list": []
      }
    }
}
sitemap.json
{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [
      {
        "action": "allow",
        "page": "*"
      }
    ]
}

Web 端

组件示例

Main.vue

Main.vue
<template>
    <div class="welcome-banner">
        <span class="welcome-text">
            {{ message }}
        </span>
    </div>
</template>

<script>
export default {
    name: 'WelcomeBanner',
    data() {
        return {
            message: 'Welcome to use Share CRM'
        }
    }
}
</script>

<style scoped>
.welcome-banner {
    padding: 16px;
    text-align: center;
}

.welcome-text {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
</style>

如果只是做静态展示增强，可以先从这种无属性、无事件的最小组件开始；确认展示位置和样式后，再逐步增加属性传值、点击事件或接口数据。

发布并配置到页面

开发完成后，将组件发布，并在目标页面设计器或场景配置中挂载到对应区域。

场景	配置路径
应用首页	「界面定制管理」->「CRM首页」「应用列表」-> 应用的「设置」->「Web应用视图」「应用列表」-> 应用的「设置」->「移动应用视图」
自定义页面	「界面定制管理」->「Web自定义页面」「界面定制管理」->「App自定义页面」
互联自定义页面	「渠道门户」->「Web自定义页面」「渠道门户」->「App自定义页面」
互联应用首页	「互联管理」->「互联应用」-> 互联应用的「设置」->「Web应用视图」「互联管理」->「互联应用」-> 互联应用的「设置」->「移动应用视图」
互联站点	「站点管理」->「站点门户」