Uni-app 小程序 APP 的广告变现之路：沉浸式视频流广告

沉浸式视频流广告

随着羊了个羊的爆火，网络上很快开始流传出羊了个羊后台视频广告收益图以及开发者全款买两套房的图片。尽管大多数人无法想象，但是羊了个羊一天就有月400万的视频广告收益一定让大家对于视频广告更加感兴趣了。而让羊了个羊开发者赚翻的广告形式就是今天的沉浸式视频流广告。

视频流广告也可以叫做 Draw 视频信息流广告。视频流广告一般来说为了适配现在的移动端形式，以竖屏的视频广告为主，比较适合在全屏的手机屏幕进行展现。同时支持 app-nvue 页面进行实用。

示例：

 

适用场景

类似某音和某手的的竖版视频流广告，来电秀、直播间等全屏观看的视频。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√（3.0.0+）	x	x	x	x	x	x	x	x	x	x

属性说明

属性名	类型	默认值	说明	平台差异
data	Object	可选	广告数据，通过 plus.ad.getDrawAds (参考示例代码)，设置后adpid将无效	App
adpid	String		uni-AD App广告位id，在官网申请广告位	App
@load	EventHandle		广告加载成功的回调
@error	EventHandle		广告加载失败的回调，event.detail = {errCode: }

注意

• HBuilderX2.8+ 版本Android平台更新穿山甲（头条系）广告SDK后不再支持x86类型CPU，无法运行到x86类型cpu的模拟器。
• HBuilderX标准基座真机运行测试draw信息流广告位标识（adpid）为：1507000690

项目实例

示例1:

<template>
  <!-- 仅nvue页面支持 -->
  <!-- 必须指定ad-draw的宽度和高度，否则大小全屏 -->
  <view class="container">
    <ad-draw class="ad-draw" adpid="1507000690"></ad-draw>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>

<style>
  .container {
    flex: 1;
  }

  .ad-draw {
    flex: 1;
    width: 750rpx;
  }
</style>

示例2:

<template>
  <!-- 仅nvue页面支持 -->
  <view class="content">
    <view class="ad-draw">
      <ad-draw :data="adData" @load="onload" @error="onerror"></ad-draw>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'ad-draw',
        adData: {}
      }
    },
    onReady: function (e) {
      this.getAdData()
    },
    methods: {
      getAdData: function (e) {
        // 仅APP平台支持
        plus.ad.getDrawAds({
            adpid: '1507000690',  // 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
            count: 1,   // 广告数量，默认 1-3
            width: 300,  // 根据宽度获取合适的广告(单位px)
            height: 300  // 根据高度获取合适的广告(单位px)
          },
          (res) => {
            this.adData = res.ads[0];
            console.log(this.adData);
          },
          (err) => {
            console.log(err);
          }
        )
      },
      onload(e) {
        console.log("onload",e);
      },
      onerror(e) {
        console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
      }
    }
  }
</script>