RPG游戏接入超强广告SDK

本文档描述,RPG 游戏如何接入超强广告SDK。

接入准备

接入步骤

RPG 游戏运行在应用内浏览器上,使用 js-html-css 编写,而 Android 上的广告 SDK 都是 java编写
为了让 js 调用 java 接口,要经过三步:

引入 Android SDK

按照文档引入即可,此处只概要提醒:

封装接口

这一步直接实际接入了广告SDK,但根据游戏需求做封装,即确定提供哪些接口、参数从哪里传递等
封装示例参考app/src/main/java/cn/m4399/rpgsample/CqAdJsApi.java,以下只以一个接口说明流程

public class CqAdJsApi {
    // 以广告 SDK 的 init 即初始化接口为例,说明怎样为 js 封装 java 接口
    // 封装后的接口可以被 js 调用,可以传参、返回、回调
    //
    // 1. 按照 Android 的机与广告 SDK 接口,声明一个新的 init 接口
    //    此接口内调用了广告SDK 的init,但按照游戏略作封装
    //    由于初始参数比较固定,在此处配置即可,但需要 js 接口传入一个 回调对象名称

    /*
     * 初始化广告 SDK
     * @param jsObject js回调对象名称
     */
    @JavascriptInterface
    public void init(String jsObject) {
        CqConfig.Builder builder = CqConfig.NewBuilder()
                .appId(AD_APP_ID) // 应用ID
                .preload(AD_PRELOAD_ENABLED) // 开启预加载,强烈建议同时设置活动页,否在将导致收益降低
                .cityBlacklist(false) // todo: 区域限制,线上环境必须开启!!!!!!! 默认开启状态
                .orientation(AD_APP_ORIENTATION); // 应用横竖屏方向, 推荐不设置或设置为0,由后台指定
        nativeLog("init: %s, %s", AD_APP_ID, AD_APP_ORIENTATION);
        CqConfig config = builder.build();
        // 2. 实际调用广告 SDK init 接口的地方
        //    其中的 CqConfig 配置对象,游戏可以按需调整参数
        CqSdk.init(activity, config, new CqInitCallback() {
            @Override
            public void onSuccess() {
                // 初始化成功回调
                nativeLog("init success");
                // 3. 将广告 SDK 的初始化成功结果回调到 js 层
                //    回调机制由 Android 提供,此处做了通用的封装
                invokeJsMethod(jsObject, "onSuccess");
            }

            @Override
            public void onFail(int code, String message) {
                // 4. 将广告 SDK 的初始化失败结果回调到 js 层
                nativeLog("init failed: %d, %s", code, message);
                invokeJsMethod(jsObject, "onFail", code, message);
            }
        });
    }
}

注入本地对象

实例化上述封装对象,按照 Android 接口注入即可,下面样板代码可直接使用 app/src/main/java/cn/m4399/rpgsample/RPGMakerActivity.java

public class RPGMakerActivity {
    private void loadGame() {
        WebView rpgWebview = mActivityMainBinding.rpgWebview;

        WebSettings webSettings = rpgWebview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setDomStorageEnabled(true);

        rpgWebview.setWebViewClient(new WebViewClient());
        // 'cqAdNativeApi' 即位注入到浏览器中的对象名称,用它间接调用 java 本地方法
        rpgWebview.addJavascriptInterface(new CqAdJsApi(this, rpgWebview), "cqAdNativeApi");
        
        // 加载本地 Html,模拟游戏
        rpgWebview.loadUrl("file:///android_asset/index.html");
    }
}

调用接口

经过封装和注入就可以调用 java 方法了,比如cqAdNativeApi.init(jsObject)
但为了调用方便仍然在 js 层进行了封装,主要参数封装和业务定制的需要,过程参考 app/src/main/assets/js/cqAdJsApi.js

之后在模拟的游戏页面 app/src/main/assets/index.html 上,调用-回调了 js 方法,以一个方法为例:

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript">
        // todo:正式的广告位需要在广告后台创建
        const AD_ID_SPLASH = "10030"; 

        // b. 定义 js 回调对象,游戏选择处理哪些回调方法
        window.cbSplashAd = {
            onError: _mockError("onError"),
            onTimeout: _mock("onTimeout"),
            onLoad: _mock("onLoad"),
            onClick: _mock("onClick"),
            onShow: _mock("onShow"),
            onClose: _mock("onClose"),
            onTimeOver: _mock("onTimeOver"),
        }

        // c. 调用 js 方法,传入广告位 id、透传参数、回调对象名称
        function _playSplashAd(ele) {
            adApi.playSplashAd(AD_ID_SPLASH, {
                k1: "v1",
                k2: "v2"
            }, "cbSplashAd");
        }
    </script>
</head>

<body>
<div class="ext-worker">
    <div style="margin-top:8px;">广告</div>
    <div>
        <!-- a 广告入口 ,点击回调调用 js 方法 -->
        <button class="ext-button" onClick="_playSplashAd()">开屏广告</button>
    </div>
</div>
</body>

</html>

其他问题

API 详情

参考原生 Android 应用中的接入

如何扩展方法

按照上述“封装-注入-调用”的流程即可