uniapp 小程序加载显示插屏广告

uniapp插屏广告文档uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/api/a-d/interstitial微信官网插屏广告文档插屏广告 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/interstitialAd-ad.html

插屏广告位id：需要在小程序公众平台=》推广=》流量主=》广告管理去创建

插屏广告加载显示方法：

第一种：封装全局插屏广告方法

第二种：直接在当前页面写方法

第一种：封装全局插屏广告方法

封装插屏广告代码，在根目录创建common => Utils.js

Utils.js代码

// 插屏广告
var interstitialAd = null;
let interstitial = {//id就是传入的广告位idload(id) {if (uni.createInterstitialAd) {interstitialAd = uni.createInterstitialAd({adUnitId: id})interstitialAd.onLoad(() => {console.log('插屏 广告加载成功')})interstitialAd.onError((err) => {console.log('插屏 广告加载失败', err)})interstitialAd.onClose((res) => {console.log('插屏 广告关闭', res)})}},show() {if (interstitialAd) {interstitialAd.show().catch((err) => {console.error(err)})}}
}
module.exports = {interstitial
};

在需要调用插屏广告的页面中，调用Utils.js

import Utils from '../../common/Utils.js'

在onLoad()方法中进行加载插屏广告

//加载插屏广告
Utils.interstitial.load('插屏广告位id');

在methods写点击事件showAd()，例如点击某个按钮，触发点击事件，显示插屏广告

showAd(){            //显示插屏广告Utils.interstitial.show();;
}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第二种：直接在当前页面写方法

有个问题，如果切换页面需要销毁插屏广告，如果调用公共方法我不知道怎么调销毁的方法，所以还是靠老办法吧；

下面是正常在页面中写加载插屏广告；

在script中最外层定义

// 插屏广告
let interstitialAd = null;

进入小程序就调用插屏广告，插屏广告会提示一定时间内不能显示，这个问题在线上不会存在，在开发者工具和真机调试也是偶尔会出现，可以设置第一次进入就显示插屏广告，那么times设置0，小程序有可能会提示一定时间不显示，不管它，如果报了这个错，就一直显示，直到能显示成功；如果想15s显示可以不用做这个操作；

在onLoad中加载插屏广告，在需要显示的地方写显示插屏广告方法：

onLoad(){this.interstitialLoad();//加载插屏广告
},
onShow(){this.interstitialShow(0);//显示插屏广告
},
methods:{destroyAd() { //卸载插屏广告if (interstitialAd) {interstitialAd.destroy();}},interstitialLoad() { //加载插屏广告var that = this;var id = "插屏广告id";if (uni.createInterstitialAd) {interstitialAd = uni.createInterstitialAd({adUnitId: id})interstitialAd.onLoad(() => { //监听插屏广告加载事件console.log('插屏 广告加载成功')})interstitialAd.onError((err) => { //监听插屏错误事件console.log('插屏 广告加载失败', err)})interstitialAd.onClose((e) => { //监听插屏广告关闭事件console.log('插屏 广告关闭', e)//这里可以做关闭广告后想做的操作})}},interstitialShow(times) { //显示插屏广告var that = this;setTimeout(() => {if (interstitialAd) {console.log('插屏广告正在显示....');interstitialAd.show().catch((err) => {console.error("插屏广告显示失败：", err);switch (err.errCode) {case 2001://打开小程序一定时间内不允许展示that.interstitialShow(1000);break;case 2002://距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告that.interstitialShow(1000);break;default:break;}})}}, times)},
}

关于一个页面如果设定了每隔多少秒显示插屏，那么离开当前页面后就必须要做销毁实例，不然会提示下图：

在页面隐藏或者卸载页面处销毁实例

interstitialAd.destroy();

onHide() {console.log("onHide监听页面隐藏")if (interstitialAd) {interstitialAd.destroy();}
},
onUnload() {console.log("onUnload监听页面卸载")if (interstitialAd) {interstitialAd.destroy();}
},