# banner分析（.createBannerAd）

## 一、概述 <a href="#gai-shu" id="gai-shu"></a>

开发者可以调用 `.createBannerAd` 创建banner广告组件，banner广告组件在创建后会自动拉取广告数据并进行渲染，开发者只需要控制 Banner 广告组件的位置和显示/隐藏即可。

使用方式与官方[`qg.createBannerAd`](https://open.oppomobile.com/wiki/doc#id=10536) 完全一致。

## **二、初始化banner对象** <a href="#chu-shi-hua-banner-dui-xiang" id="chu-shi-hua-banner-dui-xiang"></a>

{% hint style="danger" %}
VIVO平台需要调用SDK接口**banner**广告组件，即以下调用方式
{% endhint %}

```javascript
//创建banner广告
const bannerAd = qg.tmSDK.createBannerAd({
    adUnitId: 'xxxx',
    style: {
        left: 10,
        top: 76,
        width: 320
    }
})
bannerAd.show()
```

## **三、显示banner** <a href="#xian-shi-banner" id="xian-shi-banner"></a>

```
bannerAd.show()
```

## **四、隐藏banner** <a href="#yin-cang-banner" id="yin-cang-banner"></a>

```
bannerAd.hide()
```

## **五、销毁banner** <a href="#xiao-hui-banner" id="xiao-hui-banner"></a>

需要用新的banner时，销毁旧的节约资源。

```javascript
oldBannerAd.destroy()
const newBannerAd = qg.tmSDK.createBannerAd({
  // ...
})
newBannerAd.show()
```

## **六、onResize** <a href="#onresize" id="onresize"></a>

开发者在创建banner广告时需设置宽高，也可以在创建后重新设置。

```javascript
bannerAd.onResize(res => {
    bannerAd.style.width = 400;
})
```
