ad-native-view（1111+）

概述

用来展示广告内容的组件

子组件

支持

子组件限制

1. 一级子组件必须至少要有一个使用广告素材的image或video组件，广告素材必须加载成功，且不可以被遮挡、隐藏。否则ad-native-view组件展示的广告内容无法曝光、点击。
2. 如果需要下载功能，需要添加ad-button作为ad-native-view的子组件。
3. ad-button在ad-native-view内部使用，必须绑定相同的adid。
4. ad-native-view所有子组件不支持百分比格式宽高。
5. ad-native-view的一级子组件image/video组件设置position:fixed无效。
6. ad-native-view的一级子组件image/video组件设置transform:scale/scaleX/scaleY，范围限制为0.8~1.2。

属性

除了支持 通用属性以外，还支持如下属性。

样式

有限制地支持 通用样式 （不支持background和background-image，不支持padding,padding-left,padding-right,padding-top,padding-bottom，不支持opacity样式），受限制的通用样式如下：

事件

支持 通用事件

示例代码

<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
  <div class="item-container">
    <input type="button" class="btn" value="加载并展示原生广告" onclick="showNativeAd()" />
  </div>
  <div class="parent">
    <ad-native-view class="clickable" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}">
      <image adindex="0" class="ad-view-image1"></image>
      <ad-button if="native.isShow" class="adbutton" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}"></ad-button>
    </ad-native-view>
  </div>
</div>
</template>

<style>
.container {
  flex: 1;
  flex-direction: column;
}
.adbutton {
  height: 80px;
  width: 600px;
  text-align: center;
  margin-top: 300px;
  margin-right: 60px;
  margin-left: 60px;
  margin-bottom: 50px;
  color: #dd6522;
  font-size: 30px;
  border-radius: 50;
}

.btn {
  height: 80px;
  width: 600px;
  text-align: center;
  margin-top: 20px;
  margin-right: 60px;
  margin-left: 60px;
  margin-bottom: 50px;
  color: #dd6522;
  font-size: 30px;
  background-color: #0faeff;
  border-radius: 50;
}

.item-container {
  margin-top: 50px;
  flex-direction: column;
}
.ad-view-image1 {
  height: 200px;
  width: 450px;
  opacity: 0.5;
  margin-left: 150px;
  margin-top: 70px;
}
.clickable {
  height: 600px;
  width: 750px;
  padding-left: 200px;
}
</style>

<script>
import ad from '@service.ad'
import device from '@system.device'
import router from '@system.router'
let nativeAd
export default {
  componentName: 'ad',
  provider: '',
  data: {
    hcztransparent: "transparent",
    native: {
      adUnitId: 'testy63txaom86',
      channel: 'this is channel',
      isShow: false,
      adData: {},
      isShowImg: false,
      isShowVideo: false,
      isShowData: false,
      isShowDesc: false,
      errStr: '',
      adImgSrc: '',
      adImgSrc1: '',
      adImgSrc2: '',
      adVideoSrc: '',
      adIcon: '',

    },
  },
  onInit: function () {
    this.$page.setStatusBar({ immersive: true, textStyle: 'dark', backgroundColor: '#FFFFFF', backgroundOpacity: 0, visible: true });
    var queryString = JSON.stringify(this.$page.query)
    console.log("query result: " + queryString);
  },
  hideAll() {
    this.native.isShow = false
    this.native.isShowImg = false
    this.native.isShowVideo = false
    this.native.isShowDesc = false
  },
  showNativeAd() {
    let that = this;
    device.host({
      success: function (ret) {
        console.log("handling success: " + JSON.stringify(ret));
      },
      fail: function (erromsg, errocode) {
        console.log("handling success: " + errocode + ': ' + erromsg)
      },
    });
    this.native.isShowImg = false
    nativeAd = ad.createNativeAd({
      adUnitId: this.native.adUnitId,
      channel: this.native.channel
    })
    nativeAd.onLoad((data) => {
      console.info('ad data loaded: ' + JSON.stringify(data))
      this.native.adData = data.adList[0]
      if (this.adidList === '') {
        this.adidList = this.native.adData.adId
      }
      if (this.native.adData) {
        if (this.native.adData.imgUrlList) {
          this.native.adImgSrc = this.native.adData.imgUrlList[0]
          this.native.isShowImg = true
        } else if (this.native.adData.adIcon) {
          this.native.isShowImg = true
          this.native.adImgSrc = this.native.adData.adIcon[0]
        } else {
          this.native.isShowImg = false
          this.showNativeAd.adImgSrc = ''
        }

        if (this.native.adData.desc) {
          this.native.desc = this.native.adData.desc
          this.native.isShowDesc = true
        }

        let showVideoFlag = false
        if (this.native.adData.videoUrlList && this.native.adData.videoUrlList[0]) {
          this.native.adVideoSrc = this.native.adData.videoUrlList[0]
          showVideoFlag = true
        } else {
          this.native.isShowVideo = false
          this.native.adVideoSrc = ''
        }

        if (this.native.isShowImg && showVideoFlag) {
          setTimeout(() => {
            this.native.isShowVideo = true
            this.native.isShowImg = false
          }, 1000)
        }
      }
      this.native.isShow = true
      this.native.errStr = ''
    })
    nativeAd.onError((e) => {
      console.error('load ad error:' + JSON.stringify(e))
      this.native.isShowImg = false
      this.native.isShowVideo = false
    })
    nativeAd.load()
  }
}
</script>

版本更新说明