医院网站建设的计划做轻奢品的电商网站
引言
在移动应用开发中，广告变现是一种常见的盈利模式。而激励视频广告因其高转化率和用户体验友好，成为了开发者的首选。今天，我们将以 UniApp 为例，手把手教你如何在小程序中集成激励视频广告，并在用户点击按钮后弹出广告，看完广告即可获取源码链接！
一、什么是激励视频广告？
激励视频广告是一种用户主动选择观看的广告形式。用户观看完整广告后，可以获得一定的奖励（如解锁功能、获取资源等）。这种广告形式不仅提升了用户体验，还能为开发者带来可观的收益。
二、UniApp 中集成激励视频广告的步骤
1. 初始化激励视频广告
在 UniApp 中，我们可以通过微信小程序的 wx.createRewardedVideoAd API 来创建激励视频广告实例。以下是初始化广告的代码：
onLoad() {if (wx.createRewardedVideoAd) {this.videoAd = wx.createRewardedVideoAd({adUnitId: 'adunit-996b5af0d7a9213c' // 替换为你的广告单元 ID});// 监听广告加载事件this.videoAd.onLoad(() => {console.log('激励视频广告加载成功');});// 监听广告错误事件this.videoAd.onError((err) => {console.error('激励视频广告加载失败', err);});// 监听广告关闭事件this.videoAd.onClose((res) => {if (res && res.isEnded) {console.log('用户看完了广告');this.showLink = true; // 显示链接} else {console.log('用户未看完广告');uni.showToast({title: '请完整观看广告以获取链接',icon: 'none',});}});} else {console.error('当前环境不支持激励视频广告');}
}
2. 点击按钮弹出广告
当用户点击“获取源码地址”按钮时，调用 videoAd.show() 方法弹出广告。如果广告加载失败，可以尝试重新加载并显示：
handleGetSourceCode() {if (this.videoAd) {this.videoAd.show().catch(() => {// 失败重试this.videoAd.load().then(() => this.videoAd.show()).catch((err) => {console.error('激励视频广告显示失败', err);uni.showToast({title: '广告加载失败，请重试',icon: 'none',});});});} else {uni.showToast({title: '广告未初始化',icon: 'none',});}
}
3. 广告关闭后的逻辑处理
在广告关闭后，判断用户是否完整观看了广告。如果用户看完了广告，则显示源码链接；否则提示用户完整观看广告：
this.videoAd.onClose((res) => {if (res && res.isEnded) {console.log('用户看完了广告');this.showLink = true; // 显示链接} else {console.log('用户未看完广告');uni.showToast({title: '请完整观看广告以获取链接',icon: 'none',});}
});
三、完整代码示例
以下是一个完整的 UniApp 页面代码，集成了激励视频广告功能：
<template><view class="container"><!-- 下拉选择器 --><view class="picker-container"><picker @change="bindPickerChange" :value="index" :range="array" range-key="name"><view class="picker"><uni-icons type="arrowdown" size="20" color="#666" class="picker-icon"></uni-icons><text class="picker-text">{{ array[index].name }}</text></view></picker></view><!-- 获取源码地址按钮 --><button v-if="showButton" class="source-button" @click="handleGetSourceCode"><uni-icons type="download" size="20" color="#fff" class="button-icon"></uni-icons><text>获取源码地址</text></button><!-- 显示链接 --><view v-if="showLink" class="link-container"><uni-icons type="link" size="20" color="#007aff" class="link-icon"></uni-icons><text class="link-label">源码地址：</text><text class="link">{{ array[index].link }}</text></view></view>
</template><script>
export default {data() {return {array: [{ name: '请选择项目', link: '' },{ name: '选项1', link: 'https://example.com/option1' },{ name: '选项2', link: 'https://example.com/option2' },{ name: '选项3', link: 'https://example.com/option3' },{ name: '选项4', link: 'https://example.com/option4' }],index: 0,showButton: false,showLink: false,videoAd: null, // 激励视频广告实例};},onLoad() {this.initVideoAd(); // 初始化激励视频广告},methods: {// 初始化激励视频广告initVideoAd() {if (wx.createRewardedVideoAd) {this.videoAd = wx.createRewardedVideoAd({adUnitId: '**********************' // 替换为你的广告单元 ID});// 监听广告加载事件this.videoAd.onLoad(() => {console.log('激励视频广告加载成功');});// 监听广告错误事件this.videoAd.onError((err) => {console.error('激励视频广告加载失败', err);});// 监听广告关闭事件this.videoAd.onClose((res) => {if (res && res.isEnded) {console.log('用户看完了广告');this.showLink = true; // 显示链接} else {console.log('用户未看完广告');uni.showToast({title: '请完整观看广告以获取链接',icon: 'none',});}});} else {console.error('当前环境不支持激励视频广告');}},// 处理选择器变化bindPickerChange(e) {this.index = e.detail.value;this.showButton = true;this.showLink = false;},// 处理获取源码地址按钮点击handleGetSourceCode() {if (this.videoAd) {this.videoAd.show().catch(() => {// 失败重试this.videoAd.load().then(() => this.videoAd.show()).catch((err) => {console.error('激励视频广告显示失败', err);uni.showToast({title: '广告加载失败，请重试',icon: 'none',});});});} else {uni.showToast({title: '广告未初始化',icon: 'none',});}},},
};
</script><style scoped>
/* 样式部分省略，参考前文 */
</style>
四、注意事项
- 广告单元 ID：确保使用正确的广告单元 ID。
- 测试环境：在微信开发者工具中勾选“不校验合法域名”选项，以便测试广告功能。
- 真机调试：广告功能需要在真机上测试，开发者工具中可能无法预览广告。