quick_快应用_广告接入

接入厂商广告

广告接口

[1] 接口声明
```
{"name":"service.ad"}
```

[2] 导入模块

import ad from '@service.ad' 或 const ad = require('@service.ad')

[3] 获取服务提供商

由于各厂商的尺寸不同，开发的时候需要进行区分，所以先获取厂商
```
ad.getProvider() // OPPO vivo ....
```

tips: 根据规范，快应用一个页面中只能添加最多2个广告。

oppo广商接入广告

广告接入流程
在这里插入图片描述

banner广告

信息流广告

信息流广告
信息流广告相较banner广告的优势是 => 广告使用组件的方式进行展示，开发者可以自定义广告内容的排版与样式。

[1] 组件封装

直接使用“使用实例”进行组件封装。

<template><div><text class="btn" onclick="reload">重新加载广告</text><adif="{{ showAd }}"adunitid="{{ adunitid }}"class="ad-native"onload="adLoad(evt)"onerror="adError(err, evt)"onadclick="adClick"onadshow="adShow"type="native"><ad-clickable-area class="ad-content"><slot><!-- 广告可以按照UI样式进行编写 --></slot></ad-clickable-area><div class="ad-close" onclick="onclose"><text>关闭</text></div></ad></div>
</template>
<script>
import prompt from '@system.prompt'
// JS部分请尽量按照广告示例demo编写
export default {data: {showAd: true,adunitid: '', // 等待快应用上线之后创建广告位的idadData: { // 此处广告的初始值需严格按照文档来imgUrlList: [],title: '',desc: '',clickBtnTxt: ''},},// 信息流广告展示成功adLoad(evt) {if (evt && evt.adData) {const adData = JSON.parse(evt.adData)this.adData = adData}},// 广告展示回调事件成功触发adShow(evt){},// 广告点击回调事件成功触发adClick(evt) {},// 信息流广告展示失败adError(err, evt) {if(err) {console.log('adError 信息流广告加载出错：', err)} else if(evt) {prompt.showToast({message: '信息流广告展示失败:' + evt.errCode + ', errMsg=' + evt.errMsg})}},// 信息流广告重新加载reload() {// 可通过 if 先销毁原广告组件，再重新创建广告组件，达到重新加载的效果this.showAd = falsesetTimeout(() => {this.adData = {imgUrlList: [],title: '',desc: '',clickBtnTxt: ''}this.showAd = true}, 500)},// 关闭广告onclose() {this.showAd = false}
}
</script>
<style lang="less">
.btn {height: 86px;border: 1px solid #333;padding: 20px;
}.ad-native {background-color: lightgray;width: 100%;height: 100%;position: relative;.ad-content {width: 100%;height: 100%;}.ad-close {width: 50px;height: 30px;background-color: gray;opacity: 0.5;position: absolute;margin-left: 700px;text {font-size: 20px;padding: 5px;color: #ffffff;}}
}
</style>

[2] 渲染数据

在信息流加载(adLoad方法中)时返回的adData对象中的数据格式如下，
开发者可以根据返回值进行排版与样式编写。
在这里插入图片描述

[3] 测试

模拟器不支持广告，在模拟器中是看不到真实广告返回值以及数据渲染的。

需要在真机上进行测试。我在真机上进行测试报错：

java.lang.IllegalArgumentException: Unsupported element: ad-clickable-area

🤔难道ad组件不能用？还是版本太低不合适? (我是在1070版本上进行测试的)

事实是因为oppo的包名是com.nearme.instant.platform，因此在测试之前需要将快应用预览版切换为oppo快应用。

需使用oppo引擎进行调试，使用联盟预览版是无法调试oppo广告的

在这里插入图片描述

[4] 样式调整

ad组件必须设置宽高，否则可能会导致布局异常。
在这里插入图片描述

[5] 加载失败

广告存在加载失败的情况，失败状态码如下：
在这里插入图片描述

[6] 预加载

1、由于ad组件显示时才会去请求广告素材，因此当页面渲染完成后需要一定的时间才会显示广告，若希望即时显示广告，可以使用广告预加载接口(文档后面有相关描述)，提前请求广告素材。

tips: 使用预加载加载广告成功的概率高些!

import ad from '@service.ad'
export default{onInit() {this.adPreloaded()},// 广告预加载，5.2以后就不需要提前使用了adPreloaded() {ad.preloadAd({adUnitId: this.adunitid,type: 'native',success: (data) => {console.log(data, '预加载成功')},fail: function (err, code) {console.log(err, code, '预加载失败')}})}
}

[7] 应用要素信息

发现在请求的广告中某些广告存在下图所示的应用要素信息
在这里插入图片描述
而且开发无法修改文本和按钮的内容以及样式。

此时可以联系oppo快应用的技术，他可以去掉这些信息的展示。

若是想展示这些信息(同时可以修改这些信息的样式)，可以使用应用要素信息组件
在这里插入图片描述

<div class="ad-content-footer" if="{{ adData.hasPrivacy }}"><text class="ad-content-footer-version">{{adData.appInfo.appVersion}}</text><div class="ad-content-footer-line"></div><text class="ad-content-footer-company">{{adData.appInfo.developer}}</text><div class="ad-content-footer-line"></div><ad-clickable-areaclass="ad-content-footer-private"type="privacy"font-size="11dp"color="rgb(245, 34, 34)"></ad-clickable-area>
</div>