ad-template（1113+）

<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 class="abc">
      <ad-template class="adtemplate" adid="{{adId1}}" onerror = "showErr()" onfeedback="feedback()" onrender="render()" ondownloadstatus="downloadstatus()" onclick="click()"></ad-template>
    </div>
    <input type="button" class="btn" value="click" onclick="touchClick()" />
    <input type="button" class="btn" value="reportAdShow" onclick="reportAdShow11()" />
    <input type="button" class="btn" value="destroy" onclick="showdestroy()" />
    <input type="button" class="btn" value="showAppDetailPage" onclick="showAppDetail()" />
  </div>
</div>
</template>
<style>
.container {
  flex: 1;
  flex-direction: column;
}
.abc {
  width: 750px;
  height: 690px;
}
.adbutton {
  height: 50px;
  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;
  border-radius: 50;
}
.item-container {
  margin-top: 50px;
  flex-direction: column;
}
.adtemplate {
  background-color:#dd6522;
}
  .adtemplate1 {
}
</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: {
    adId1: "",
    hcztransparent: "transparent",
    native: {
      adUnitId:'e04osddcd4',
      channel: 'this is channel',
      errStr: '',
      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);
  },
  feedback(Object) {
    console.log("feedback: " + JSON.stringify(Object));
    console.log("feedback111: " + Object);
  },
  render() {
    console.log("render succ");
  },
  showErr() {
    console.log("render err");
  },
  click(){
    console.log("click");
  },
  downloadstatus(Object) {
    console.log("downloadstatus: " + JSON.stringify(Object));
  },
  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)
      },
    });
    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
      }
      this.adId1 = data.adList[0].adId
    })
    nativeAd.onError((e) => {
      console.error('load ad error:' + JSON.stringify(e))
    })
    nativeAd.load({
      supportTemplate: true
    })
  },
  touchClick() {
    console.error('load click:' + this.adId1)
    nativeAd.reportAdClick({
      adId: this.adId1,
      clickInfo: {
        clickX: 10,
        clickY: 10,
        creativeSize: "1080*600",
        density: "",
        upX: 0,
        upY: 0,
        sld: 0,
    }})
  },
    reportAdShow11() {
      nativeAd.reportAdShow({adId: this.adId1})
    },
    showdestroy() {
      nativeAd.destroy()
    },
    showAppDetail() {
      nativeAd.showAppDetailPage({adId: this.adId1})
    },
}
</script>