uni-app对接抖音激励视频

文章开始之前先附上两个链接,对接前一定要看官方文档!
uni-app对接激励视频
抖音对接激励视频文档
在对接之前只要认真阅读文档,相信没有太大问题。这个对接相应来说还是比较简单的。首先分享两个在对接时遇到的尴尬问题。
1:在开发者工具上是无法显示激励视频的,在调用uni-app激励视频API时是undefind报错等,在真机测试是没有问题的。
2:在对接完毕之后千万不要玩了调用.show()去显示视频,因为视频在引入后默认是隐藏的。(刚开始不知情的我还以为是代码写的有问题,大家在开发的时候一定要注意)
下面废话不多说直接上代码
1:首先可以在data中定义一个数据然后将API赋值给他方便下边的操作。例如我在data中定义的数据字段名为rewardedVideoAd
在onLoad()中我就将其赋值

this.rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: '你的对接ID' })

2:随后在需要触发的函数内直接进行调用就可以了。

this.rewardedVideoAd.show()
				.catch(() => {
				    this.rewardedVideoAd.load()
				    .then(() => this.rewardedVideoAd.show())
				    .catch(err => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '视频拉取失败,请稍后再试!'
						});
						return
				    })
				})
				this.rewardedVideoAd.onLoad(() => {
					console.log('onLoad event')
					// 当激励视频被关闭时,默认预载下一条数据,加载完成时仍然触发 `onLoad` 事件
				})	
				this.rewardedVideoAd.onError((err) => {
					console.log('onError event', err)
				})
				this.rewardedVideoAd.onClose((res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
					    // 正常播放结束
						
					} else {
					    // 播放中途退出
						
					}
				})
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一、后端安装步骤】 1、如果你是服务器的话,建议安装宝塔面板做为环境 2、创建网站,PHP建议5.6到7.2版本都是可以的,配置好ssl证书,就是让你的网站可以通过https来访问,小程序都必须配置这个 3、把后端源码文件夹里面的文件全部上传到你创建的网站的根目录里面 4、设置网站的运行目录为public,设置一下伪静态,选择thinkphp,根目录下的runtime目录权限设置为777,/public目录下的upload目录权限设置为777 5、进入phpmyadmin管理界面,导入数据库的备份文件shujuku.sql文件 6、修改数据库连接文件:/application/database.php 替换里面的数据库连接参数 7、修改文件:/application/extra/dou.php文件,里面有说明哪些要改,哪些不用改 8、修改文件:/application/extra/setting.php,把里面的域名改成你自己的就可以 9、修改文件:/application/api/service/Pay.php文件,把 https://x.xiaocenxu.com 改成你的域名即可 10、默认安装好后,后台登录地址是:https://你的域名/admin/ 帐号:admin 密码:admin1314 本程序修改后台登录密码需要在数据库里面的这个表:psy_admin 里进行修改 字段username为用户名,字段password为密码,可以在这个网站:https://md5jiami.51240.com 把自己要改的密码加密转换成32位小写,把32位小写后面的复制一下,粘贴到password那一列里面,这样密码就改掉了。 11、现在系统自带的这些数据都是有用的,可以正常直接拿来使用
要实现仿抖音视频滑动效果,你可以使用uni-app框架中的swiper组件结合相关的动画效果来实现。下面是一种可能的实现方式: 1. 在你的uni-app项目中,使用swiper组件创建一个滑动容器,设置为横向滑动。 ```html <swiper class="swiper" :autoplay="false" :indicator-dots="false" :circular="true"> <swiper-item v-for="(item, index) in videoList" :key="index"> <video :src="item.url" autoplay muted loop></video> </swiper-item> </swiper> ``` 2. 使用css样式来设置容器的布局和样式。 ```css .swiper { width: 100%; height: 100%; overflow: hidden; } .swiper-item { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: cover; } ``` 3. 使用JavaScript或者Vue的生命周期钩子函数来监听滑动事件,并根据滑动的距离和方向来实现动画效果。 ```javascript export default { data() { return { videoList: [...], // 视频列表数据 startX: 0, // 触摸起始点的X坐标 startY: 0, // 触摸起始点的Y坐标 moveX: 0, // 触摸移动中的X坐标 moveY: 0, // 触摸移动中的Y坐标 direction: '', // 滑动方向 currentIndex: 0 // 当前显示的视频索引 }; }, methods: { onTouchStart(e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, onTouchMove(e) { this.moveX = e.changedTouches[0].pageX; this.moveY = e.changedTouches[0].pageY; const offsetX = this.moveX - this.startX; const offsetY = this.moveY - this.startY; if (Math.abs(offsetY) < Math.abs(offsetX)) { // 水平滑动 if (offsetX > 0) { this.direction = 'right'; } else { this.direction = 'left'; } } else { // 垂直滑动 if (offsetY > 0) { this.direction = 'down'; } else { this.direction = 'up'; } } }, onTouchEnd() { if (this.direction === 'left') { // 向左滑动,切换到下一个视频 this.currentIndex++; if (this.currentIndex >= this.videoList.length) { this.currentIndex = 0; } } else if (this.direction === 'right') { // 向右滑动,切换到上一个视频 this.currentIndex--; if (this.currentIndex < 0) { this.currentIndex = this.videoList.length - 1; } } // 根据currentIndex更新swiper组件的activeIndex属性,实现视图切换 this.$refs.swiper.swiperRef.setActiveItem(this.currentIndex); } } }; ``` 上述代码中,通过监听触摸事件,根据滑动方向切换到对应的视频,并将视图更新到当前的视频。 这是一种简单的实现方式,你可以根据自己的需求进行扩展和优化。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值