更新记录
1.0.0(2025-04-07)
新增
- 初始发布RewardedVideoAd激励视频广告组件
- 支持广告加载、展示、关闭等基本功能
- 提供多种广告展示模式配置
- 支持服务器回调参数设置
- 实现广告加载失败自动重试机制
优化
- 完善错误处理逻辑
- 增加广告状态管理
- 改进Promise回调处理
修复
- 修复广告实例销毁时的事件解绑问题
- 修复广告加载失败时的重试逻辑
- 修复广告展示时的状态更新问题
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | √ | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
广告组件文档
RewardedVideoAd 激励视频广告
基本使用
const videoAd = new RewardedVideoAd({
// 必填参数
adUnitId: 'your-ad-unit-id',
// 服务器回调参数(可选)
urlCallback: {
userId: 'user123',
extra: 'some-extra-data'
},
// 最大重试次数(可选,默认3次)
maxRetries: 3,
// 广告展示模式(可选,默认0)
mode: 0, // 0: 默认模式, 1: 询问是否继续, 2: 强制看完广告, 3: 强制弹窗倒计时
// 事件回调(可选)
onLoad: () => {
console.log('广告加载成功');
},
onError: (err) => {
console.log('广告加载失败', err);
},
onClose: (res) => {
console.log('广告关闭', res);
},
onAdClicked: () => {
console.log('广告被点击');
}
});
API 文档
构造函数
new RewardedVideoAd(options)
参数: | 参数 | 说明 | 类型 | 默认值 |
---|---|---|---|---|
adUnitId | 广告位ID | String | - | |
urlCallback | 服务器回调参数 | Object | - | |
maxRetries | 最大重试次数 | Number | 3 | |
mode | 广告展示模式 | Number | 0 | |
countdownTime | 倒计时时间(秒),仅mode=3时有效 | Number | 30 | |
popupTitle | 弹窗标题,仅mode=3时有效 | String | - | |
popupContent | 弹窗内容,仅mode=3时有效 | String | - | |
onLoad | 广告加载成功回调 | Function | - | |
onError | 广告加载失败回调 | Function | - | |
onClose | 广告关闭回调 | Function | - | |
onAdClicked | 广告被点击回调 | Function | - |
mode可选值:
- 0: 默认模式
- 1: 询问是否继续
- 2: 强制看完广告
- 3: 强制弹窗倒计时
方法
show()
显示广告
返回值: Promise对象,resolve时返回广告关闭的回调值
load()
手动加载广告
返回值: Promise对象
destroy()
销毁广告实例
使用示例
// 在需要显示广告的地方调用
async function showRewardAd() {
try {
const result = await videoAd.show();
if (result.success) {
if (result.isEnded) {
// 用户完整观看了广告
await giveReward();
} else {
// 用户中途退出
showTip('需要完整观看广告才能获得奖励');
}
} else {
// 广告展示失败
showTip('广告加载失败,请稍后重试');
}
} catch (err) {
console.error('广告异常', err);
showTip('广告展示异常,请稍后重试');
}
}
// 在组件销毁时调用
onUnmounted(() => {
videoAd.destroy();
});
最佳实践
- 建议在页面加载时就初始化广告实例
- 在适当的时候调用
load()
预加载广告 - 确保在组件销毁时调用
destroy()
方法 - 处理所有可能的错误情况
- 根据业务需求合理设置重试次数
ScoryAd Vue组件
基本使用
<scory-ad
adUnitId="your-ad-unit-id"
mode="2"
countdownTime="30"
popupTitle="广告"
popupContent="广告内容"
autoShow="false"
autoShowDelay="0"
@success="handleSuccess"
@fail="handleFail"
@close="handleClose"
@load="handleLoad"
@complete="handleComplete"
@error="handleError"
/>
属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
adUnitId | 广告单元ID | String | - |
mode | 广告模式 | Number | 2 |
countdownTime | 倒计时时间(秒) | Number | 30 |
popupTitle | 弹窗标题 | String | "广告" |
popupContent | 弹窗内容 | String | "广告内容" |
autoShow | 是否自动显示广告 | Boolean | false |
autoShowDelay | 自动显示的延迟时间(毫秒) | Number | 0 |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
success | 广告成功回调 | result |
fail | 广告失败回调 | error |
close | 广告关闭回调 | result |
load | 广告加载完成回调 | - |
complete | 广告展示完成回调 | result |
error | 广告错误回调 | error |
方法
方法名 | 说明 |
---|---|
showAd() | 显示广告 |
destroyAd() | 销毁广告实例 |
注意事项
- 确保广告位ID正确
- 测试环境下请使用测试广告位ID
- 正式环境请替换为正式广告位ID
- 广告加载可能需要一定时间,建议提前预加载
- 用户网络环境可能影响广告加载