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的用法, 不要直接上手就去写,很浪费时间,而且用法不对,还会一直报错!多看文档多看文档!!!!

相关推荐
千逐681 天前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
万物得其道者成1 天前
uni-app App 热更新实现指南:从接口检查到下载安装重启(附带AI提示词)
uni-app
anyup1 天前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
千逐682 天前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
天丁o3 天前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统
这是个栗子3 天前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app
小徐_23336 天前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
宸翰7 天前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
时光足迹8 天前
uni-app 视频通话实战:康复师与患者视频问诊的 6 个致命 Bug 与解决方案
android·ios·uni-app
时光足迹8 天前
腾讯云 TRTC UniApp SDK 从入门到上线
前端·vue.js·uni-app