uniapp开发小程序如何接入微信小程序广告

在uniapp开发小程序时，如何正确接入微信小程序广告？具体步骤和配置有哪些需要注意的地方？比如广告位ID的获取、代码实现方式、审核要求等。有没有成功接入的案例可以分享？

2 回复

在uniapp项目中，通过引入微信小程序广告插件，在页面中配置广告组件，如banner或激励视频，然后调用API加载广告即可。注意配置广告位ID和审核规则。


在 UniApp 中接入微信小程序广告，主要通过配置广告位和调用组件实现。以下是详细步骤和示例代码：

步骤 1：申请广告位

  • 登录微信小程序后台，进入「流量主」模块。
  • 创建广告位，获取广告单元 ID（如 banner 广告、插屏广告、激励视频广告等）。

步骤 2：在 UniApp 中配置

  • 在 pages.json 中声明广告组件（仅针对需要使用的页面）：
    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "enablePullDownRefresh": true
      }
    }
  ],
  "usingComponents": {
    "ad-rewarded-video": "wxad",
    "ad-banner": "wxad"
  }
}

步骤 3：在页面中使用广告组件

Banner 广告示例：

在页面模板（Vue 文件）中添加：

<template>
  <view>
    <ad unit-id="你的banner广告单元ID" ad-type="banner" ad-theme="white"></ad>
  </view>
</template>

激励视频广告示例：

  1. 在模板中添加按钮触发广告：

    <template>
  <view>
    <button @tap="showRewardedVideo">观看激励视频</button>
  </view>
</template>

  2. 在脚本中处理广告逻辑：

    export default {
  methods: {
    showRewardedVideo() {
      // 创建激励视频广告组件
      const videoAd = uni.createRewardedVideoAd({
        adUnitId: '你的激励视频广告单元ID'
      });

      // 监听加载事件
      videoAd.onLoad(() => {
        console.log('激励视频加载成功');
      });

      // 监听错误事件
      videoAd.onError((err) => {
        console.error('激励视频错误:', err);
      });

      // 显示广告
      videoAd.show().catch(() => {
        // 如果失败，重新加载
        videoAd.load().then(() => videoAd.show());
      });

      // 监听用户关闭广告
      videoAd.onClose((res) => {
        if (res && res.isEnded) {
          // 正常播放结束，发放奖励
          console.log('激励视频完整播放，发放奖励');
        } else {
          // 播放中途退出
          console.log('激励视频未播放完毕');
        }
      });
    }
  }
};

步骤 4：插屏广告示例

// 在需要时调用
const interstitialAd = uni.createInterstitialAd({
  adUnitId: '你的插屏广告单元ID'
});

interstitialAd.show().catch(err => {
  console.error('插屏广告显示失败:', err);
});

注意事项：

  • 测试：使用微信开发者工具进行测试，确保广告单元 ID 正确。
  • 审核：广告内容需符合平台规范，避免审核失败。
  • 错误处理：添加加载失败或显示失败的备用逻辑，提升用户体验。
  • 性能：避免频繁加载广告，影响小程序流畅度。

按照以上步骤，即可在 UniApp 中成功集成微信小程序广告。如有问题，参考微信官方文档调整参数。

回到顶部