uniapp抖音小程序发布激励广告

最新推荐文章于 2025-09-22 11:27:24 发布

原创最新推荐文章于 2025-09-22 11:27:24 发布 · 2.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #前端

该代码段展示了如何在Vue组件中创建一个点击按钮触发激励视频广告的过程。当用户点击按钮时，调用showVideo方法显示广告。同时，代码包含了错误监听和视频播放完成的回调处理，确保用户体验和广告流程的顺畅。

1.点击按钮

<template>
	<view>
		<!-- 按钮 -->
		<button @click="showVideo()">点击看广告</button>
		
	</view>
</template>

2.查看广告

<script>
export default {
	data() {
		return {
			
		};
	},
	onLoad() {
		// 创建实例
		this.ad = tt.createRewardedVideoAd({
			adUnitId: '填自己的广告id'
		});
		// 监听错误
		this.ad.onError(err => {
			tt.hideLoading();
			switch (err.errCode) {
				case 1004:
					// 无合适的广告
					break;
				default:
				// 更多请参考错误码文档
			}
		});

		// 监听视频播放完成
		this.ad.onClose(data => {
			tt.hideLoading();
			if (data.isEnded) {
				console.log('观看了', data.count, '个视频');
			} else {
				console.log('未观看完视频');
			}
		});

		// 预加载资源
		this.ad.load();
	},
	methods: {
	
		// 展示激励视频
		showVideo() {
			console.log(1111)
			tt.showLoading();
			this.ad.show();
		},
		haha(e) {
			console.log(e);
		}
	}
};
</script>

<style>

</style>