ad-content-page.md

## 短视频内容联盟组件

### 简介

⼀个视频内容频道，支持上下滑动切换视频内容

![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/9146fb82-0d0e-4210-804c-93e292f4273e.png)

**平台差异说明**

|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快应用|360小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|Android(hx 3.1.17+)、iOS(hx 3.4.2+)|x|x|x|x|x|x|x|x|x|x|


**仅nvue支持**


**开通配置广告**

开通广告步骤：
1. 开通广告
需在广告平台后台操作：
    * App平台：[https://uniad.dcloud.net.cn/](https://uniad.dcloud.net.cn/)
2. 申请广告位id
在各位后台申请广告位id
3. 在页面合适位置编写代码，放置`ad-content-page`组件，配上广告位adpid
4. App端打包后生效，打包时必须选择快手内容联盟。

**属性说明**

|属性名|类型|默认值|说明|平台差异|
|:-|:-|:-|:-|:-|
|adpid|String||uni-AD App广告位id，在[uni-AD官网](https://uniad.dcloud.net.cn/)申请广告位|仅nvue支持|
|@load|EventHandle||广告加载成功的回调||
|@error|EventHandle||广告加载失败的回调||
|@start|EventHandle|开始播放时触发|3.4.3+|
|@pause|EventHandle|暂停时触发|3.4.3+|
|@resume|EventHandle|恢复播放时触发|3.4.3+|
|@complete|EventHandle|播放完成时触发|3.4.3+|


**@start @pause @resume @complete回调参数说明**

|字段名|说明|
|:-|:-|
|id|唯一标识|
|type|0未知类型  1 普通信息流  2 sdk内部广告 3第三方广告 4 直播|
|duration|视频总时长|


HBuilder 基座的测试广告位 `adpid` 为 `1111111112`


**示例：**

```html
<template>
  <view class="content">
    <ad-content-page class="ad-content-page" ref="adContentPage" adpid="1111111112" @load="onadload" @error="onaderror"></ad-content-page>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'ad-content-page'
    }
  },
  onShow() {
    this.$nextTick(() => {
      // 需要在页面显示时调用广告组件的 show 方法
      this.$refs.adContentPage.show();
    })
  },
  onHide() {
    // 需要在页面隐藏时调用广告组件的 hide 方法停止广告内容的声音
    this.$refs.adContentPage.hide();
  },
  methods: {
    onadload(e) {
      console.log("onload");
    },
    onaderror(e) {
      console.log("onerror");
    }
  }
}
</script>

<style>
.content {
  flex: 1
}

.ad-content-page {
  flex: 1
}
</style>
```

**注意**
- 需要在页面隐藏时调用组件的 `hide` 方法以停止广告内容的声音