华为H5快游戏如何接入广告服务

华为开发者论坛

于 2020-12-28 19:37:33 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签：快游戏

本文链接：https://blog.csdn.net/weixin_44708240/article/details/111873249

本文介绍了在H5快游戏中接入广告服务的解决方案，由于H5快游戏未开放广告API，可通过快应用ux页面的web组件与H5双向通信，利用快应用的广告API获取广告信息，并在ux页面的onMessage函数中处理。建议将广告逻辑封装在独立函数中，避免在onInit等生命周期函数中处理。详细步骤和示例代码可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

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