The road to monetization of advertising in Uni-app Mini Program App: full-screen video advertising

Full-screen video ad is a native component with a higher level than ordinary components. Every time a full-screen video ad is created, a new instance will be returned, which is hidden by default and needs to be displayed by calling FullScreenVideoAd.show().

App	H5	WeChat applet	Alipay applet	Baidu applet	ByteDance applet	QQ applet	quick app	360 applet	Kuaishou applet	Jingdong applet
√（3.4.8+）	x	√（3.4.8+）	x	x	x	x	x	x	x	x

• The advertising sources on the app side are provided by advertising alliances such as Tencent Youlianghui, Toutiao Pangolin, and Kuaishou, and DCloud is responsible for aggregation
• Ads on the Mini Program side are provided by the Mini Program platform

grammar

<ad-fullscreen-video adpid=""></ad-fullscreen-video>

property description

attribute name	type	Defaults	illustrate	platform differences
adpid	String|Number|Array		Advertising slot id, if the input is an array, it will start from index 0 and continue to the next one after the request fails, which is applicable to the logic of the configured reserve price
preload	Boolean	true	Load ad data when page is ready
loadnext	Boolean	false	Automatically load the next ad data
v-slot:default="{loading, error}"			The scope slot can get the component internal advertisement loading status and loading error information
@load	EventHandle	load event
@close	EventHandle	close event
@error	EventHandle	error event

Method Description

method name	illustrate
load	load ad data
show	show ads

simple example

<template>
  <view>
    <ad-fullscreen-video adpid="1507000611" :loadnext="true" v-slot:default="{loading, error}">
      <button :disabled="loading" :loading="loading">显示广告</button>
      <view v-if="error">{
   
   {error}}</view>
    </ad-fullscreen-video>
  </view>
</template>

complete example

<template>
  <view class="content">
    <ad-fullscreen-video adpid="1507000611" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <button :disabled="loading" :loading="loading">显示广告</button>
      <view v-if="error">{
   
   {error}}</view>
    </ad-fullscreen-video>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onadload(e) {
      console.log('广告数据加载成功');
    },
    onadclose(e) {
		 console.log("onadclose",e);
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onerror: ", e.detail);
    }
  }
}
</script>