問題描述：

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示例代碼：

<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 nativeAdlet rewardedVideoAdexport default {props: ['websrc'],data: {native: {adUnitId: 'testu7m3hc4gvm',adData: {},errStr: '', },rewarded: {adUnitId: 'testx9dtjwj8hp',isShow: 'false',errStr: ''},title: "",// TODO Replace the link to the H5 gamewebUrl: "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 landscapefullscreenDirection: "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 browserlinkJumpPolicy: "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 triggersonPageFinish(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文件：

<!-- 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

總結

以上是生活随笔為你收集整理的华为H5快游戏如何接入广告服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。