HarmonyOS 鸿蒙Next中【快应用】小程序转快应用的原生广告

HarmonyOS 鸿蒙Next中【快应用】小程序转快应用的原生广告 【现象描述】

由于之前小程序转快应用是没有广告服务的，导致很多开发者小程序转快应用没有广告，只能重新开发原生快应用，增加了工作量。

这次新增了ad-button组件。

【使用方式】

小程序转快应用的原生广告的使用逻辑和快应用的原生广告的使用逻辑是一样的。

参考链接：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-access-ads-kit-0000001126445969#section1679918495119

示例代码：

Page.qxml：

<view class="container">
  <view>
    <button class="btn" type="default" bindtap="changeValueType">点我修改valueType</button>
    <button class="btn" type="default" bindtap="showNativeAd">加载并展示原生广告</button>
    <ad-button style="font-size: 18px;" bindtap="startButton" valuetype="{{valuetype}}" adunitid="{{native.adUnitId}}" adid="{{native.adData.adId}}">
    </ad-button>
    <view qa:if="{{native.isShow}}">
      <view class="container">
        <image qa:if="{{native.isShowImg}}" src="{{native.adImgSrc}}" bindtap="reportNativeClick"></image>
        <video id="video" qa:if="{{native.isShowVideo}}" src="{{native.adVideoSrc}}" autoplay bindtap="reportNativeClick" class="ad-video"></video>
      </view>
      <view qa:if="{{native.isShowData}}">{{native.adData}}</view>
      <view qa:if="{{native.errStr}}">{{native.errStr}}</view>
    </view>
  </view>
</view>

Page.js：

let nativeAdPage = ({
  data: {
    logs: [],
    native: {
      adUnitId: 'testy63txaom86',
      isShow: false,
      adData: {},
      isShowImg: false,
      isShowVideo: false,
      isShowData: false,
      errStr: '',
      adImgSrc: 'https://cs02-pps-drcn.dbankcdn.com/cc/creative/upload/20191226/b750592e-04be-4132-9971-52494b1e5b43.jpg',
      adVideoSrc: ''
    },
    valuetype: 0
  },
  onLoad: function () {},
  showNativeAd () {
    nativeAd = qa.createNativeAd({ adUnitId: this.data.native.adUnitId })
    nativeAd.onLoad(data => {
      console.info('ad data loaded: ' + JSON.stringify(data))
      this.setData({
        ['native.adData']: data.adList[0]
      })
      if (this.data.native.adData) {
        if (this.data.native.adData.imgUrlList) {
          this.setData({
            ['native.adImgSrc']: this.data.native.adData.imgUrlList[0],
            ['native.isShowImg']: true
          })
        } else {
          this.setData({
            ['native.isShowImg']: false,
            ['native.adImgSrc']: ''
          })
        }
        let showVideoFlag = false
        if (this.data.native.adData.videoUrlList && this.data.native.adData.videoUrlList[0]) {
          showVideoFlag = true
          this.setData({
            ['native.adVideoSrc']: this.data.native.adData.videoUrlList[0]
          })
        } else {
          this.setData({
            ['native.isShowVideo']: false,
            ['native.adVideoSrc']: ''
          })
        }
        if (this.data.native.isShowImg && showVideoFlag) {
          setTimeout(() => {
            console.log('show video')
            this.setData({
              ['native.isShowVideo']: true,
              ['native.isShowImg']: false
            })
          }, 1000)
        }
      }
      this.setData({
        ['native.isShow']: true,
        ['native.errStr']: ''
      })
    })
    const errEvent = e => {
      console.error('load ad error:' + JSON.stringify(e))
      this.setData({
        ['native.isShowImg']: false,
        ['native.isShowVideo']: false,
        ['native.errStr']: JSON.stringify(e),
      })
    }
    nativeAd.onError(errEvent)
    nativeAd.load()
  },
  startButton (e) {
    console.log('startButton e.resultCode = ' + e.resultCode)
  },
  reportNativeClick () {
    console.log('reportNativeClick')
  },
  changeValueType: function (e) {
    this.setData({
      valuetype: 1
    })
  }
})