聚优甲广告组件库

微信小程序广告组件库。

安装

方式一：npm 安装（推荐）

npm install jyj-components

在小程序 app.json 中配置：

{
  "usingComponents": {
    "ad-banner": "jyj-components/ad-banner/index",
    "ad-interstitial": "jyj-components/ad-interstitial/index",
    "ad-rewarded-video": "jyj-components/ad-rewarded-video/index",
    "ad-splash": "jyj-components/ad-splash/index"
  }
}

方式二：本地引入

将 miniprogram_dist 目录复制到项目中，然后在 app.json 中配置相对路径。

添加合法域名

1. 小程序账号登录微信公众平台
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 downloadFile合法域名 中增加如下配置

https://wxgo.cdn.adwke.com

4. 在request合法域名中增加

https://wxgo.adwke.com/

组件使用

1. 横幅广告 (ad-banner)

<ad-banner
  slotId="your-slot-id"
  bind:adLoad="onAdLoad"
  bind:adError="onAdError"
/>

属性：

• slotId (String, 必填)：广告位 ID

事件：

• adLoad：广告加载成功
• adError：广告加载失败
• adOpenMiniProgram：跳转小程序（自定义广告）

2. 插屏广告 (ad-interstitial)

<ad-interstitial
  slotId="your-slot-id"
  isShow="{{showAd}}"
  isDestroy="{{destroyAd}}"
  bind:adLoad="onAdLoad"
  bind:adError="onAdError"
  bind:adClose="onAdClose"
/>

属性：

• slotId (String, 必填)：广告位 ID
• isShow (Boolean)：控制广告显示
• isDestroy (Boolean)：控制广告销毁 默认false 每个广告实例只能修改一次

事件：

• adLoad：广告加载成功
• adError：广告加载失败
• adClose：广告关闭

使用示例：

Page({
  data: {
    showAd: false,
    destroyAd: false
  },

  showInterstitialAd() {
    this.setData({ showAd: true });
  },

  onAdClose() {
    this.setData({
      showAd: false,
      destroyAd: true
    });
  }
});

3. 激励视频广告 (ad-rewarded-video)

<ad-rewarded-video
  slotId="your-slot-id"
  isShow="{{showVideo}}"
  isDestroy="{{destroyVideo}}"
  bind:adLoad="onAdLoad"
  bind:adError="onAdError"
  bind:adClose="onAdClose"
  bind:adFinished="onAdFinished"
/>

属性：

• slotId (String, 必填)：广告位 ID
• isShow (Boolean)：控制视频播放
• isDestroy (Boolean)：控制广告销毁 默认false 每个广告实例只能修改一次

事件：

• adLoad：广告加载成功
• adError：广告加载失败
• adClose：广告关闭
• adFinished：视频播放完成（用户获得奖励）

使用示例：

Page({
  data: {
    showVideo: false
  },

  watchVideoForReward() {
    this.setData({ showVideo: true });
  },

  onAdFinished(e) {
    if (e.detail.isEnded) {
      // 用户看完视频，发放奖励
      this.giveReward();
    }
  }
});

4. 开屏广告 (ad-splash)

<ad-splash
  slotId="your-slot-id"
  bind:adLoad="onAdLoad"
  bind:adError="onAdError"
  bind:adFinished="onAdFinished"
/>

属性：

• slotId (String, 必填)：广告位 ID

事件：

• adLoad：广告加载成功
• adError：广告加载失败
• adFinished：广告结束（倒计时结束或用户跳过）

使用示例：

// app.js 或首页
Page({
  onLoad() {
    // 开屏广告会自动展示
  },

  onAdFinished() {
    // 广告结束，进入主页面
    console.log('开屏广告结束');
  }
});

注意事项

1. 向运营人员获取授权链接 通过授权链接授权权限
2. 广告位 ID：需要向运营人员申请有效的 slotId

常见问题

Q: 广告不显示？

A: 检查 slotId 是否正确，网络请求是否成功，广告数据格式是否正确。

Q: 如何控制广告展示时机？

A: 使用 isShow 属性控制插屏和激励视频的展示时机。

Q: 如何销毁广告实例？

A: 设置 isDestroy 为 true 即可销毁广告实例，释放内存。