@firstshow/ad-popup

弹框广告组件

使用前准备

一. 添加域名

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

https://advertising.adcomeon.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com

使用方法

一. npm 安装, 参考 小程序 npm 支持

npm install @firstshow/ad-popup --save

二. 构建

1. 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
2. 小程序开发者工具 -> 工具 -> 构建 npm
3. 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹

三. 使用

分两种场景： 场景一. 先预加载组件，一段时间后再进行展示。

1. 页面的 json 文件中做如下配置

{
  "usingComponents": {
    "ad-popup": "@firstshow/ad-popup"
  }
}

2. 页面的 wxml文件

<ad-popup
  wx:if="{{toLoadAd}}"
  show="{{showAd}}"
  flowMasterId="{{flowMasterId}}"
  openId="{{openId}}"
/>

• openId若为异步获取的，保证获取到openId后再将toLoadAd设置为true，否则会提示缺少必传参数。
• toLodaAd初始值设置为false，页面onLoad时将其设置为true，这时候只是加载组件，组件为隐藏状态，这时有足够的时间去获取广告数据。待要展示广告时，将showAd设为true，组件变为显示状态。

3. 页面的 js文件

Page({
  data: {
    openId: 'o2BFN5Y5RDqAaJwNilSNtpA49Jlf', // 用户openId
    flowMasterId: 'fshows', // 流量主标识，联系运营人员提供
    toLoadAd: false, // 加载广告组件（通过切换这个标识，来重新获取广告数据）
    showAd: false // 是否显示广告
  },
  onLoad () {
    // 加载组件
    this.setData({
      toLoadAd: true
    })
  },
  /**
   * @function 显示广告
   */
  showAd () {
    this.setData({
      showAd: true
    })
  }
})

场景二. 进入页面立即展示。

1. 页面的 json 文件中做如下配置

{
  "usingComponents": {
    "ad-popup": "@firstshow/ad-popup"
  }
}

1. 页面的 wxml文件

<view class="popup-ad-box" hidden="{{!showAd}}">
  <ad-popup
    wx:if="{{openId}}"
    openId="{{openId}}"
    flowMasterId="xxx"
    show="{{showAd}}"
    bind:onAdInfoReady="onAdInfoReady"
    ></ad-popup>
</view>

3. 页面的 js文件

Page({
  data: {
    openId: '', // 用户openId
    flowMasterId: 'fshows', // 流量主标识，联系运营人员提供
    showAd: false // 是否显示广告
  },
  onLoad () {
    // 模拟异步获取openId
    setTimeout(() => {
      this.setData({
        openId: 'o2BFN5Y5RDqAaJwNilSNtpA49Jlg'
      })
    }, 100)
  },
  /**
   * @function 显示广告
   */
  showAd () {
    this.setData({
      showAd: true
    })
  },
  /**
   * @function 广告数据加载完后显示广告
   */
  onAdInfoReady () {
    this.showAd()
  }
})

注意事项

• 如果必传参数openId是异步获取的，请通过wx:if，确保在获取openId参数后再进行组件的加载，以防提示缺少必传参数；
• 进入页面直接展示广告的场景下，需要调用onAdInfoReady，onAdInfoReady是成功获取广告数据的回调，在回调中展示广告。否则曝光会有问题。

四. 组件参数说明

| 变量 | 类型 | 必填 | 说明 | |:----|:----:|:----:|:----| | show | String | 是 | 控制广告的显示 | | openId | String | 是 | 用户openId | | flowMasterId | String | 是 | 流量主id，联系运营人员提供 | | orderId | String | 否 | 订单id，有则提供，没有可以不提供 |

五. 组件事件说明

| 事件名称 | 回调参数 | 说明 | |:----|:----:|:----| | onAdInfoReady | e | 广告数据获取成功后触发 |

e.detail中包含了获取到的广告数据。