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就是传入的广告位id
	load(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();
	}
},