SDK接入说明

// vivo、oppo、小米、荣耀 等
npm install @topon/quick-app-sdk -S

// 仅支持华为
npm install @topon/quick-app-sdk-hw -S

// 路径和页面配置
"router": {
    "pages": {
        "UnionAd/AdPage": {    // 开屏广告页面
            "component": "index"
        },
        "UnionAd/AdLanding": {   // 广告落地页
            "component": "index"
        },
        "UnionAd/AdReward": {    // 激励视频广告
            "component": "index"
        },
        "TopOn/AdLanding": { // TopOn Adx 广告落地页
            "component": "index"
        },
        "TopOn/AdReward": { // TopOn Adx 激励视频广告
            "component": "index"
        },
    }
},
"display": {
    "pages": {
        "UnionAd/AdPage": {
            "fullScreen": true,
            "titleBar": false,
            "statusBarImmersive": true,
            "menu": false,
            "menuBarData": {
                "menuBar": false
            }
        },
        "UnionAd/AdReward": {
            "fullScreen": true,
            "titleBar": false,
            "statusBarImmersive": true,
            "menu": false,
            "menuBarData": {
                "menuBar": false
            }
        },
        "UnionAd/AdLanding": {
            "fullScreen": true,
            "titleBar": false,
            "statusBarImmersive": true,
            "menu": false,
            "menuBarData": {
                "menuBar": false
            }
        },
        "TopOn/AdLanding": {
            "fullScreen": true,
            "titleBar": false,
            "statusBarImmersive": true,
            "menuBarData": {
                "menuBar": false
            }
        },
        "TopOn/AdReward": {
          "fullScreen": true,
          "titleBar": false,
          "statusBarImmersive": true,
          "menuBarData": {
            "menuBar": false
          }
        }
    }
}

// 权限配置
"features": [
    {"name": "system.prompt"},
    {"name": "system.network"},
    {"name": "system.router"},
    {"name": "system.fetch"},
    {"name": "system.webview"},
    {"name": "system.request"},
    {"name": "system.device"},
    {"name": "system.package"},
    {"name": "system.storage"},
    {"name": "service.account"},
    {"name": "system.file"},
    {"name": "system.animate"}
]

<script>
import TOPON_AD_SDK from '@topon/quick-app-sdk/app.js'

export default {
    onCreate() {
        this.instance = null
        try {
            this.instance = new TOPON_AD_SDK({
                app: this, // 必传
                appId: 'xxx', // 必传
                appKey: 'yyy', // 必传
                channelId: 'zzz', // 可选
                subChannelId: 'kkkk' // 可选
            });
        } catch (error) {
            console.log('error', error);
        }
    },
    onShow() {
        this.instance.onShow()
    },
    onHide() {
        this.instance.onHide()
    },
    onDestroy() {
        this.instance.onDestroy()
    }
}
</script>

<import name='topon-ad' src="@topon/quick-app-sdk/placement"></import>
<template>
  <div>
    <topon-ad
      id="topon-ad-{{placementId}}"
      placement-id="{{placementId}}"
      @ad-load="handleAdLoad"
      @ad-show="handleAdShow"
      @ad-close="handleAdClose"
      @ad-click="handleAdClick"
      @ad-error="handleAdError"
    >
    </topon-ad>

    <input
      class="btn"
      type="button"
      value="加载/刷新广告"
      onclick="handleLoadAd"
    />

    <input
      class="btn"
      type="button"
      value="isReady"
      onclick="handleCheckAdReady"
    />

    <input
      class="btn"
      type="button"
      value="获取广告"
      onclick="handleGetAd"
    />

    <input
      class="btn"
      type="button"
      value="展示广告"
      onclick="handleDisplayAd"
    />
  </div>
</template>

<script>

export default {
  private: {
    loaded: false,
    placementId: 'b63213b896cf20'
  },

  public: {
    placement: null
  },

  onReady() {},


  // 广告源Load成功回调
  handleAdLoad(e) {
    this.loaded = true
  },

  // 检查广告是否ready
  handleCheckAdReady() {
    const placement = this.getSdkElement()
    return placement.isReady()
  },

  // 广告Show成功回调
  handleAdShow(e) {
    console.log('广告展示回调', e)
  },

  // 广告Close成功回调
  handleAdClose(e) {
    console.log('广告关闭回调', e)
  },

  // 广告点击回调
  handleAdClick(e) {
    console.log('广告点击回调', e)
  },

  // 广告错误回调
  handleAdError(e) {
    console.log('广告加载错误回调', e)
  },

  /**
   * 展示广告,注意自渲染广告时不支持该API
   * 注意:确保在广告组件加载完成后调用
   **/ 
  handleDisplayAd() {
    const isReady = this.handleCheckAdReady()
    // 先检查广告是否ready
    if (!isReady) return
    const currentAd = this.handleGetAd()
    const placement = this.getSdkElement()
    // 展示非自渲染的广告
    if (!currentAd.isSelfRendering) {
      placement.show()
    }
  },

  // load广告
  handleLoadAd() {
    const placement = this.getSdkElement()
    placement.load()
  },

  // 获取广告
  handleGetAd() {
    if (!this.loaded) {
      console.log('请等待加载完成后再获取数据')
      return
    }
    const placement = this.getSdkElement()
    const currentAd = placement.getAd()
    return currentAd
  },

  // 上报ad.show
  handleReportShow() {
    const placement = this.getSdkElement()
    placement.reportShow()
  },

  // 上报ad.click
  handleReportClick() {
    const placement = this.getSdkElement()
    placement.reportClick()
  },

  // 获取广告组件实例
  getSdkElement() {
    return this.$child(`topon-ad-${this.placementId}`)
  }
}
</script>

<script>
import TOPON_AD_SDK from '@topon/quick-app-sdk/app.js'

export default {
    onCreate() {
        try {
            const instance = new TOPON_AD_SDK({
                app: this, // 必传
                appId: 'xxx', // 必传
                appKey: 'yyy', // 必传
            });
            this.$def.topon_sdk_instance = instance
        } catch (error) {
            console.log('error', error);
        }
    }
}
</script>

<script>

export default {
    onInit() {
      this.handleSetChannel('1234')
      this.handleSetSubChannel('34567')
    },

    // 设置渠道ID
    handleSetChannel(value) {
      this.$app.$def.topon_sdk_instance.setChannel(value);
    },

    // 设置子渠道ID
    handleSetSubChannel(value) {
      this.$app.$def.topon_sdk_instance.setSubChannel(value);
    }
}
</script>

<script>

export default {
    onInit() {
      this.handleSetCustomParam({"name": "xxxx"})
      this.handleSetPlacementCustomParam({"key": "value"})
    },

    // 设置App维度自定义规则
    handleSetCustomParam(value) {
      this.$app.$def.topon_sdk_instance.setCustomParam(value);
    },

    // 设置Placement维度自定义规则
    handleSetPlacementCustomParam(value) {
      this.$app.$def.topon_sdk_instance.setPlacementCustomParam(value);
    }
}
</script>

<import name='topon-ad' src="@topon/quick-app-sdk/placement">
<template>
  <div>
    <topon-ad
      id="topon-ad-{{placementId}}"
      placement-id="{{placementId}}"
      config="{{config}}"
    >
    </topon-ad>
  </div>
</template>

<script>

export default {
  data: {
    loaded: false,
    placementId: 'b63213b896cf20',
    config: {
        style: {
            containerStyle: {             // 容器样式
                fontSize: '20px',
                color: 'yellow'
            },
            titleStyle: { color:'red' },  // 标题样式
            imgStyle: {                   // 图片样式
                marginRight: '20px'
            },
            buttonStyle: {                // 按钮样式
                fontSize: '25dp',
                backgroundColor: 'blue'
            },
        }
    }
  },

}
</script>