问题形容：
H5快游戏以后没有凋谢广告API接口，如何实现接入广告服务
问题剖析：
以后广告服务只反对快利用和runtime快游戏，H5快游戏临时不反对间接接入广告接口，以后提供长期计划解决此问题，能够通过快游戏ux页面中的web组件和游戏H5网页之间的双向通信机制实现。在ux页面的onMessage生命周期函数接管H5页面的音讯，而后接入快利用的广告API接口获取广告信息（仅反对原生广告和激励视频广告），最初将获取的广告信息通过this.$element(‘web’).postMessage({ message: JSON.stringify(result) });发送给H5页面。
解决办法：
倡议将广告创立和申请的过程独自写函数封装，不要放在onInit或者onMessage生命周期函数外面，这是因为onInit函数是在页面初始化时调用，加载速度快，不适宜解决简单逻辑；onMessage函数只负责接管H5网页传递的字符串音讯，加判断分支后调用对应的函数走相应的广告解决流程即可。
留神：以后快利用框架只反对在onInit函数中创立广告对象，暂不反对在onMessage等函数中创立，请放弃该块代码地位不变。
快利用ux示例代码：
<code class="java"><template>
<div class="doc-page">
<web class="web-page" src="{{webUrl}}" type="game" trustedurl="{{list}}" onpagestart="onPageStart"
useragent="default"
onmessage="onMessage"
fullscreendirection="{{fullscreenDirection}}"
jumppolicy="{{linkJumpPolicy}}"
multiwindow="{{openMultiwindow}}"
onpagefinish="onPageFinish"
ontitlereceive="onTitleReceive"
onerror="onError"
id="web"
allowthirdpartycookies="{{allowThirdPartyCookies}}">
</web>
</div>
</template>
<style>
.doc-page {
flex-direction: column;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.web-page {
width: 100%;
height: 100%;
}
</style>
<script>
import router from "@system.router"
import prompt from '@system.prompt'
import ad from "@service.ad"
let nativeAd
let rewardedVideoAd
export default {
props: ['websrc'],
data: {
native: {
adUnitId: 'testu7m3hc4gvm',
adData: {},
errStr: '',
},
rewarded: {
adUnitId: 'testx9dtjwj8hp',
isShow: 'false',
errStr: ''
},
title: "",
// TODO Replace the link to the H5 game
webUrl: "http://127.0.0.1:8088/wwz/h5_ad_demo.html",
// Attribute allowthirdpartycookies, indicates whether cookies can be delivered in cross-domain mode.
// If you need login Google Account or Other Account, Please set TRUE.
allowThirdPartyCookies: true,
//Attribute fullscreendirection,controls the direction when the webpage requests full screen.
//If you want the full screen orientation to be vertical, please set it to portrait.
//The default value is landscape
fullscreenDirection: "landscape",
//If you want the ads in the game to be opened in the browser, please set the value of openMultiwindow
// to true and the value of linkJumpPolicy to browser
linkJumpPolicy: "default",
openMultiwindow: false,
// Here the whitelist settings, when the loading page has multiple addresses, such as the successful loading of the login address and the inconsistent entry address, it needs to set the whitelist to do so.
list: ["new RegExp('https?.*')"],
},
onInit: function () {
console.info("onInit");
//以后快利用框架只反对在onInit函数中创立广告对象，暂不反对在onMessage等函数中创立，请放弃该块代码地位不变
nativeAd = ad.createNativeAd({ adUnitId: this.native.adUnitId })
rewardedVideoAd = ad.createRewardedVideoAd({ adUnitId: this.rewarded.adUnitId })
},
onPageStart(e) {
console.info('pagestart: ' + e.url)
},
// Each page switch triggers
onPageFinish(e) {
console.info('pagefinish: ' + e.url, e.canBack, e.canForward)
},
onTitleReceive(e) {
this.title = e.title;
},
onError(e) {
console.info('pageError : ' + e.errorMsg)
},
onMessage(e) {
console.info('onmessage e = ' + e.message + ", url = " + e.url);
prompt.showToast({
message: e.message + ': ' + e.url
})
var msg=e.message;
if(msg==='requestNativeAd'){
if(this.isSupportAd()){
this.requestNativeAd();
}
}else if(msg==='requestRewardAd'){
if(this.isSupportAd()){
this.requestRewardedAd();
}
}else if(msg==='reqReportNativeAdShow'){
this.reportNativeShow();
}else if(msg==='reqReportNativeAdClick'){
this.reportNativeClick();
}
},
isSupportAd:function(){
let provider = ad.getProvider();
if(provider==='huawei'){
return true;
}
return false ;
},
requestNativeAd() {
console.info("requestNativeAd");
nativeAd.onLoad((data) => {
console.info('nativeAd data loaded: ' + JSON.stringify(data));
this.native.adData = data.adList[0];
if (this.native.adData) {
let nativeAdObj={"nativeAdData":data};
let nativeAdMsg=JSON.stringify(nativeAdObj);
console.info("requestNativeAd onload nativeAdMsg= "+nativeAdMsg);
let senddata={"message":nativeAdMsg};
this.$element('web').postMessage(senddata);
}
})
nativeAd.onError((e) => {
console.error('load ad error:' + JSON.stringify(e));
let nativeAdErrorObj={"nativeAdDataError":e};
let nativeAdErrorMsg=JSON.stringify(nativeAdErrorObj);
console.info("requestNativeAd onError nativeAdErrorMsg= "+nativeAdErrorMsg);
let errordata={"message":nativeAdErrorMsg};
this.$element('web').postMessage(errordata);
})
nativeAd.load()
},
reportNativeShow() {
nativeAd.reportAdShow({ 'adId': this.native.adData.adId })
},
reportNativeClick() {
nativeAd.reportAdClick({ 'adId': this.native.adData.adId })
},
requestRewardedAd() {
console.info("requestRewardedAd");
/**设置广告加载胜利回调,而后调用广告show办法展现广告 */
rewardedVideoAd.onLoad(() => {
console.info("rewarded video ad onLoad");
rewardedVideoAd.show();
})
rewardedVideoAd.offLoad(() => {
console.info("rewarded video ad offLoad");
})
/**监听激励视频广告谬误事件。 */
rewardedVideoAd.onError((e) => {
console.error('load rewarded video ad error:' + JSON.stringify(e));
this.rewarded.errStr = JSON.stringify(e)
})
/**监听激励视频广告敞开事件 */
rewardedVideoAd.onClose(() => {
console.info("rewarded video ad onClose");
})
rewardedVideoAd.load();
},
onDestroy() {
nativeAd && nativeAd.destroy()
rewardedVideoAd && rewardedVideoAd.destroy()
},
isCanForward() {
this.$element('web').canForward({
callback: function (e) {
if (e) {
this.$element('web').forward();
}
}.bind(this)
})
},
isCanBack() {
this.$element('web').canBack({
callback: function (e) {
if (e) {
this.$element('web').back();
} else {
router.back();
}
}.bind(this)
})
},
onShow: function () {
console.info("onshow");
},
onHide: function () {
console.info("onHide");
},
onBackPress() {
this.isCanBack();
return true
}
}
</script>
更多广告接入FAQ和案例请参见：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-access-ads-kit
下附为示例HTML文件：
<code class="java"><!-- saved from url=(0060)file:///C:/Users/L00504~1/AppData/Local/Temp/h5_ad_demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ad Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.dataintable {
margin-top:10px;
border-collapse:collapse;
border:1px solid #aaa;
width:100%;
}
table.dataintable th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#d5d5d5;
border:1px solid #aaa;
text-align:left;
}
table.dataintable td {
vertical-align:text-top;
padding:6px 15px 6px 6px;
background-color:#efefef;
border:1px solid #aaa;
}
</style>
<script language="javascript">
system.onmessage = function(data) {
console.info("onmessage data="+data);
setResult(data);
var adDataObject=JSON.parse(data);
if(adDataObject.nativeAdData){
var nativeAdList=adDataObject.nativeAdData.adList[0];
if(nativeAdList){
if (nativeAdList.imgUrlList) {
var imgSrc=nativeAdList.imgUrlList[0];
document.getElementById("adImage").src= imgSrc;
console.info('ad data adImgSrc: ' +imgSrc);
}
}
}
}
function reportNativeShow() {
system.postMessage("reqReportNativeAdShow");
}
function reportNativeAdClick() {
console.info("reportNativeAdClick");
system.postMessage("reqReportNativeAdClick");
}
function getNativeAd(){
system.postMessage("requestNativeAd");
}
function getRewardAd(){
system.postMessage("requestRewardAd");
}
function setResult(str) {
document.getElementById("nativeAdDataResult").innerHTML= str
}
function setResultnew(str) {
document.getElementById("resultnew").innerHTML= str
}
function onLoadSuc(){
console.info("onLoadSuc");
reportNativeShow();
}
function openNewWeb(){
system.go("https://www.huawei.com")
}
function openNewWindow(){
window.open("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<p>
H5 ad demo
</p>
<p>
ResultNativeAd: <br> <span id="nativeAdDataResult" style="height:100px;">(unknown)</span>
</p>
<p>
ResultRewardAd: <br> <span id="resultnew" style="height:100px;">(unknown)</span>
</p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p><button onclick="getNativeAd()">Native Ad</button></p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p><button onclick="getRewardAd()">Reward Ad</button></p>
<hr style="height:3px;border:none;border-top:3px double red;">
<p>
<img src="file:///C:/i/eg_tulip.jpg" id="adImage" alt="test ad" onclick="reportNativeAdClick()" onload="onLoadSuc()">
</p><hr style="height:3px;border:none;border-top:3px double red;">
<p></p>
</body></html>
原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204404950119480220?fid=18
原作者：Mayism
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：华为H5快游戏如何接入广告服务
转载请注明原文链接：华为H5快游戏如何接入广告服务
