Egret-Android微端App启动页显示游戏资源加载进度

前言

Egret微端打包Android App，照抄>>>官方启动页示例<<<,修改背景图作为我们自己的游戏启动页，如果程序中设置启动页自动关闭，则在正式显示游戏页面之前，会有一段时间的黑屏，这段时间时在加载项目中的js文件等，如果改为手动关闭，一直显示引导页，有时加载速度缓慢的话，用户体验极其不好，所以一直考虑在启动页显示资源加载进度，>>>Egret社区<<<一直需求解决方法无果.

所以想，既然官方自己可以在启动页显示App运行情况（如显示下载Runtime进度），我是不是也可以，然后自己实现了App和启动页js的交互，结果Egret提示”ExternalInterface调用了js没有注册的方法”，启动页没反应

那么，一段时间后，既然自己定义的js方法不行，我就调用官方的js方法,源码里找到官方app和js交互的方法，然后在egretMiniAppLoadingProgress方法中加入自己的分类。

开始

1.启动页(可参照官方启动页示例，然后进行局部修改)

window.egretMiniAppLoadingProgress = function (msg, val) {
            var bar = document.getElementById('bar');
            bar.style.width = val + "%";
            var infoMsg = 'StartEngine [' + val + '%]';
            switch (msg) {
                case "requestingRuntime"://请求 runtime 信息
                    infoMsg = "请求 runtime 信息";
                    break;
                case "loadingRuntime"://下载 runtime
                    infoMsg = "下载 runtime";
                    break;
                case "loadingGame":
                    infoMsg = "加载游戏资源";
                    break;
                case "gameStarted":
                    infoMsg = "启动游戏";
                    break;
                case "loadRuntimeFailed":
                    infoMsg = "下载runtime出错";
                    break;
                //***以下是自定义的,可灵活修改***
                case "readyResource":
                    infoMsg = "准备游戏资源";
                    break;
                case "loadingResource":
                    infoMsg = "加载游戏资源";
                    break;
                case "loadingConfig":
                    infoMsg = "加载配置文件";
                    break;
                case "startGame":
                    infoMsg = "启动游戏";
                    break;
            }
            document.getElementById('info').innerHTML = infoMsg;
        }

2.Egret项目index.html与App交互，发送资源加载信息（简单举例）

var loadJson = function (url) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.addEventListener("load", function () {
            // 与Native的交互
            sendProcess2App("loadingConfig", 100);
            var data = JSON.parse(xhr.response);
            runGame(data);
        });
        xhr.send(null);
    }

var sendProcess2App = function (method, percent) {
        // if (egret && egret.ExternalInterface) {
        //     egret.ExternalInterface.call("callNative", method + ":" + percent);
        //     return;
        // }
        if (window['ExternalInterface']) {
            window['ExternalInterface']['call']("callNative", method + ":" + percent);
        }

3.App端进行响应&与启动页进行交互

// 游戏资源加载进度
launcher.setExternalInterface("callNative", new INativePlayer.INativeInterface() {
            @Override
            public void callback(String s) {
                String[] param = s.split(":");
                //***关键代码***
                launcher.a(param[0],Integer.parseInt(param[1]));
            }
        });

结束

这样基本就是实现了本文所需，但是并不是官方正式方法，也因为强行使用 launcher.a(),导致我们的交互显的那么的无法理解，哈哈哈