1. 创建广告位

首先，你需要在QQ广告和微信广告平台上创建一个插页广告位。在QQ广告平台中，你需要创建一个QQ插页广告位，而在微信广告平台中，你需要创建一个小程序插屏广告位。这将为你提供一个唯一的广告单元ID，以便在小程序中使用。

2. 引入广告组件

在你的小程序代码中，你需要引入广告组件。以下是一个示例代码，演示了如何引入QQ和微信小程序的插页广告组件：

// QQ小程序
onLoad: function () {
this.creatInterstitialAd();
},
onUnload: function () {
if (this.InterstitialAd) {
this.InterstitialAd.destroy();
}
},
creatInterstitialAd() {
// 创建插页广告
this.InterstitialAd = qq.createInterstitialAd({
adUnitId: 'your_ad_unit_id'
});
this.InterstitialAd.onLoad(() => {
console.log('插页广告加载完成');
});
this.InterstitialAd.onError((err) => {
console.error('插页广告加载失败', err);
});
},
showInterstitialAd: function () {
if (this.InterstitialAd) {
this.InterstitialAd.show()
.then(() => {
console.log('插页广告展示成功');
})
.catch((err) => {
console.error('插页广告展示失败', err);
});
} else {
console.error('插页广告未初始化');
}
}

// 微信小程序
onLoad: function () {
this.creatInterstitialAd();
},
onUnload: function () {
if (this.InterstitialAd) {
this.InterstitialAd.destroy();
}
},
creatInterstitialAd() {
// 创建插屏广告
this.InterstitialAd = wx.createInterstitialAd({
adUnitId: 'your_ad_unit_id'
});
this.InterstitialAd.onLoad(() => {
console.log('插屏广告加载完成');
});
this.InterstitialAd.onError((err) => {
console.error('插屏广告加载失败', err);
});
},
showInterstitialAd: function () {
if (this.InterstitialAd) {
this.InterstitialAd.show()
.then(() => {
console.log('插屏广告展示成功');
})
.catch((err) => {
console.error('插屏广告展示失败', err);
});
} else {
console.error('插屏广告未初始化');
}
}

3. 展示插页广告

一旦引入了广告组件，你可以使用 showInterstitialAd 方法来展示插页广告。这个方法会触发广告的加载和展示，当广告加载完成后，它将在你的小程序中显示。

4. 处理广告事件

在上述示例中，我们还定义了处理广告事件的回调函数，例如 onLoad 和 onError。这些事件可以帮助你监测广告的加载情况，以及在出现错误时进行适当的处理。

5. 释放资源

最后，不要忘记在小程序页面卸载时使用 onUnload 方法释放广告组件的资源，以免产生不必要的内存消耗。