# 原生模板广告
小程序广告流量主操作指引:文档地址
原生模板广告组件是由客户端原生的图片、文本、视频控件组成的原生组件,层级最高,会覆盖在上屏 Canvas 上。
开发者可以调用 wx.createCustomAd 创建原生模板广告组件。原生模板广告组件在创建后会自动拉取广告数据并进行渲染,开发者只需要控制原生模板广告组件的位置、宽度和显示即可。
const customAd = wx.createCustomAd({
adUnitId: "adUnit-xxxx",
style: {
left: 10,
top: 76,
width: 375, // 用于设置组件宽度,只有部分模板才支持,如矩阵格子模板
fixed: true // fixed 只适用于小程序环境
}
});
customAd.show();
# 显示/隐藏
原生模板广告组件默认是隐藏的,需要调用 CustomAd.show() 进行显示。
customAd.show();
当切换到没有原生模板广告组件的场景或页面时,调用 CustomAd.hide() 隐藏原生模板广告组件。
customAd.hide();
# 广告拉取成功与失败
CustomAd 在创建后会拉取广告。如果拉取失败,通过 CustomAd.onError() 注册的回调函数会执行,回调函数的参数是一个包含错误信息的对象。常见异常错误参考文档
customAd.onError(err => console.log(err));
CustomAd.show() 返回的 Promise 也会是一个 rejected Promise。
customAd.show().catch(err => console.log(err));
反之,如果拉取成功。CustomAd.onLoad() 会执行,CustomAd.show() 返回的 Promise 也会是一个 resolved Promise。两者的回调函数中都没有参数传递。
customAd.onLoad(() => console.log("原生模板广告加载成功"));
customAd.show().then(() => console.log("原生模板广告显示"));
# 监听用户关闭广告
如果广告被用户关闭,通过 CustomAd.onClose() 注册的回调函数会被执行,回调函数没有参数传递。
customAd.onClose(() => console.log("原生模板广告关闭"));
# 监听广告隐藏
- 矩阵格子广告触发型特殊说明: 用户在点击右上角关闭按钮时,广告将自动隐藏,开发者可通过 CustomAd.onHide() 接口监听隐藏事件,在必要时机通过 CustomAd.show() 使广告重新展示。(开发者主动调用 hide 也会触发隐藏事件)
const handleHide = () => console.log("原生模板广告隐藏");
customAd.onHide(handleHide);
# 销毁广告
在不需要使用广告组件或销毁页面时,可以调用 CustomAd.destroy() 来销毁原生模板广告
如果不对废弃的 CustomAd 进行销毁,则会导致其上的事件监听器无法释放。
customAd.destroy();
另外,也可以使用 off 系列 API 来手动解绑事件,支持方法有 CustomAd.offLoad(), CustomAd.offError(), [CustomAd.offClose()]((CustomAd.offClose()), CustomAd.offHide())
const handleLoad = () => console.log("原生模板广告加载成功");
customAd.onLoad(handleLoad);
customAd.offLoad(handleLoad);