一、业务背景：广告展示要覆盖所有平台
在广告投放平台中，我们需支持广告内容在以下端完整、统一呈现：
- 广告主后台（PC Web）
- 投放页（H5）
- 微信小程序预览页
- App 内嵌 Webview 页
挑战在于：
- 同一套广告素材需支持跨端解析和渲染
- 数据追踪、曝光上报需统一格式
- 用户行为交互需兼容不同平台能力（如小程序跳转、Web 落地页、App 内弹窗）
二、跨端设计核心原则
- 数据标准统一（使用 JSON Schema 定义广告配置）
- 渲染逻辑可插拔（模板渲染分离样式 + 数据）
- 上报系统一套（通用打点 SDK）
- 支持能力降级（如 H5 无法唤起小程序时降级跳转）
三、广告数据结构统一
我们约定一套广告素材结构：
{
"title": "限时优惠",
"image": "https://cdn.com/ad.png",
"jump": {
"type": "mini-program",
"appId": "wx123",
"path": "/pages/detail?id=123"
},
"track": {
"impression": "https://track.com/imp",
"click": "https://track.com/click"
}
}
不同端只需解析该 JSON 即可展示。
四、Web 渲染模板封装
抽象一个通用广告展示组件：
<template>
<div class="ad-card" @click="handleClick">
<img :src="ad.image" />
<h3>{{ ad.title }}</h3>
</div>
</template>
<script setup>
const props = defineProps({ ad: Object })
const handleClick = () => {
sendTrack(ad.track.click)
if (ad.jump.type === 'mini-program') {
// 小程序降级
location.href = `https://wx.tenpay.com/f2f?appid=${ad.jump.appId}`
} else if (ad.jump.type === 'url') {
window.open(ad.jump.url)
}
}
</script>
五、小程序内展示
通过 uniapp 实现小程序广告页：
<template>
<view class="ad-container" @tap="handleClick">
<image :src="ad.image" mode="aspectFill" />
<text>{{ ad.title }}</text>
</view>
</template>
<script setup>
const ad = ref(uni.getStorageSync('adPreview'))
const handleClick = () => {
sendTrack(ad.value.track.click)
if (ad.value.jump.type === 'url') {
uni.navigateTo({ url: ad.value.jump.url })
}
}
</script>
六、打点系统统一封装
打点抽象为 SDK：
export const sendTrack = (url: string) => {
const img = new Image()
img.src = url + `?ts=${Date.now()}`
}
支持 Web、App、小程序（分别使用 image, uni.request, nativeBridge 实现）
七、能力检测与降级策略
const isMiniProgram = /miniProgram/i.test(navigator.userAgent)
if (!isMiniProgram && ad.jump.type === 'mini-program') {
// H5 页面点击跳转失败，fallback 到公众号落地页
location.href = `https://mp.weixin.qq.com/some-fallback`
}
八、测试与灰度
- H5 页面使用 query 参数加载指定广告素材
- 小程序通过 storage 注入调试数据
- CDN + gray rules 控制不同广告主投放样式版本
九、总结：统一数据协议是跨端核心
本质不是“多个前端实现”，而是：
- 统一的数据结构（决定了渲染结构）
- 可插拔的模板系统（决定了展示方式）
- 统一的行为接口（决定了埋点与跳转）
这是我在广告平台中负责落地的重要一环，也让我有信心在网易这类多端场景丰富的平台，承担复杂系统的跨端架构设计任务。
