三 .白鹭egretH5微信小游戏接入广告

1.打开egret引擎建立一个空的项目;

2.运行看一下;默认egret帮你创建了一个基本的点击按钮界面;

3.将默认主界面的按钮事件改为打开广告事件;【操作如下:】

(1.)在egret项目目录下建一个文件夹名字叫Script。

(2.)再在Script文件夹新建俩脚本wx.ts和wxtool.ts

三 .白鹭egretH5微信小游戏接入广告_第1张图片

打开wx.ts加入如下内容:

三 .白鹭egretH5微信小游戏接入广告_第2张图片

为什么申明wx类,并且加这俩个名称的方法[参考博主之前博客的解释]。

其根本原因是微信规定的统一接口名称罢了;【参考如下微信开发文档】

https://developers.weixin.qq.com/minigame/dev/tutorial/ad/banner-ad.html

然后再wxtool.ts里面加入如下内容【代码意义博主都已经做了注释】:

class wxtool {
	public constructor() {
	}
	private static instance: wxtool;//单例模式
	public static get Instance(): wxtool {
		if (wxtool.instance == null) {
			wxtool.instance = new wxtool();
		}
		return wxtool.instance;
	}
	//打开banner广告
	public OpenBanner(id) {
		//创建banner广告
		const bannerAd = wx.createBannerAd({
			adUnitId: id,//banner id
			style: {
				left: 10,
				top: 76,
				width: 320
			}
		});
		//加载banner
		bannerAd.onLoad(() => {
			console.log('banner 广告加载成功')
			bannerAd.style.width = 400;//随时设置banner宽
			bannerAd.show();//调用打开banner
		})
		bannerAd.onError(err => {
			console.log('banner 广告加载失败' + err)
		});
	}
	//打开激励广告
	public OpenAD(id) {
		//创建激励广告
		const video = wx.createRewardedVideoAd(
			{ adUnitId: id }//传入广告id
		);
		//方式:1
		//加载广告
		// video.onLoad(() => {
		// 	console.error('激励视频 广告加载成功');
		// 	console.error('执行广告打开');
		// 	video.show();//注意要先load结束,才能调用.show打开广告
		// });

		//方式:2
		video.load().then(() => {
			video.show();//load结束调用打开广告
		}).catch(err => console.log(err.errMsg))

		video.onError(err => {
			console.error("打开广告失败" + err);
		});

		video.onClose(res => {
			// 用户点击了【关闭广告】按钮
			// 小于 2.1.0 的基础库版本,res 是一个 undefined
			if (res && res.isEnded || res === undefined) {
				// 正常播放结束,可以下发游戏奖励
				console.error("正常关闭广告了");
	            video.offClose();//注意取消这个视频的监听close
			} else {
				// 播放中途退出,不下发游戏奖励
				console.error("播放中途关闭广告了");
                video.offClose();//注意取消这个视频的监听close
			}
		});
	}
}

最后打开Main.ts脚本,将204行的onButtonClick函数内容改下面这样:

三 .白鹭egretH5微信小游戏接入广告_第3张图片

广告id自己到微信公众平台申请开通【注意:】

三 .白鹭egretH5微信小游戏接入广告_第4张图片

三 .白鹭egretH5微信小游戏接入广告_第5张图片

已经搞定的童鞋就可以填自己app对应的广告id就行了;

这样点击按钮的时候,就会执行打开广告的函数了;

接下来 发布到微信开发者工具上面测试一下[点击click]:

三 .白鹭egretH5微信小游戏接入广告_第6张图片

广告成功出来了 ~ o(* ̄▽ ̄*)o~

白鹭egret微信游戏广告篇end;

 

你可能感兴趣的:(小程序,广告,白鹭egret,微信,IT)