uniapp中对接开发激励广告视频

官网地址:激励视频广告 | uni-app官网

我开发的app激励视频广告使用的是api的方式生成激励视频

核心语法

官方示例代码

复制代码
rewardedVideoAd.onLoad(() => {
  console.log('激励视频 广告加载成功')
})

rewardedVideoAd.show()
.then(() => console.log('激励视频 广告显示'))

app要传的是adpid,在hbulider广告联盟后台创建自己的adpid,

微信小程序要传的是adUnitId,在微信小程序的广告主后台获取这个值

复制代码
	showCustomAd(redPacket) {
				if (this.isVideoPlaying || !this.isPageAlive) {
					this.showToast("视频播放中,请稍候");
					return;
				}
				const that = this;
				const {
					adpid
				} = this.base.groupConfig;

				that.resetAdData();
				that.isVideoPlaying = true;

				uni.showLoading({
					title: "加载中...",
					mask: true
				});

				const orderNo = that.generateOrderNo();

				let adInstance = null;

              //生成app的激励视频
				//#ifdef APP-PLUS
				adInstance = uni.createRewardedVideoAd({
					adpid: adpid,
					urlCallback: {
						userId: uni.getStorageSync('userInfo').uid || '',
						extra: JSON.stringify({
							type: 2,
							no: orderNo,
							box: redPacket.source === "treasureChest" ? 1 : ''
						})
					}
				});
				//#endif


                //生成微信小程序的激励视频
				//#ifdef MP-WEIXIN
				adInstance = uni.createRewardedVideoAd({
					adUnitId: adpid,
				});
				//#endif

				that.ad.instance = adInstance;
				that.ad.currentRedPacket = redPacket; //红包
				that.ad.orderNo = orderNo; //提交订单号去后台

				adInstance.onLoad(() => {
					uni.hideLoading();
					setTimeout(() => {
						adInstance.show()
					}, 200)

				});

				adInstance.onError((err) => {
					uni.hideLoading();
					that.isVideoPlaying = false;
					that.cleanupAdInstance();
				});

				adInstance.onClose((res) => {
					uni.hideLoading();
					that.isVideoPlaying = false;
					if (res && res.isEnded) {
						that.handleVideoFinish(that.ad.currentRedPacket, that.ad.orderNo);
					} else {
						that.showToast("中途退出,领取失败");
					}

					//#ifdef APP-PLUS
					// 清理广告实例
					that.cleanupAdInstance();
					//#endif
				});

				//#ifdef MP-WEIXIN
				adInstance.show().catch(err => {
					adInstance.load().then(() => {
						return adInstance.show();
					}).catch(err2 => {
						uni.hideLoading();
						that.isVideoPlaying = false;
					});
				});
				//#endif
			},

提示:在正式开始之前,一定要多去看看官方文档,看看他们的写法和api的用法, 不要直接上手就去写,很浪费时间,而且用法不对,还会一直报错!多看文档多看文档!!!!

相关推荐
小时前端39 分钟前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
Mr_li18 小时前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup20 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Mintopia2 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia2 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲3 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
HashTang4 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ4 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
郑州光合科技余经理5 天前
代码展示:PHP搭建海外版外卖系统源码解析
java·开发语言·前端·后端·系统架构·uni-app·php
TT_Close5 天前
“啪啪啪”三下键盘,极速拉起你的 uni-app 项目!
vue.js·uni-app·前端工程化