egret跨域解决方案

本题已加入「常见问题汇总」 » 「多媒体 & 资源最佳实践」，更多「多媒体 & 资源最佳实践」相关的话题欢迎关注讨论

1.简述   
  本方案很久之前发过一个初版，当时不支持图片跨域，最近有时间，已解决，重新开帖。

   受限于同源策略。egret在加载跨域素材时，极大的受限。如，canvas下无法二次draw跨域图片，webgl下，无法显示跨域图片，想把资源放到cdn上，但是又没有同域cdn，等等一系列问题。
   哦，对了，还有，release出来的文件，无法直接双击运行（需要http服务器才能运行）。

   本工具用以解决上诉问题（请首先确保你能完全控制该跨域素材，并对跨域服务器拥有管理权限，如果你是要盗用别人服务器的素材，请绕道服务器找解决方案）。
   下载附件体验：
    示例-本地双击运行.rar (2.02 MB, 下载次数: 617, 售价: 1 银子)

2017-1-17 15:18 上传

点击文件名下载附件
    示例-跨域加载资源.rar (2.02 MB, 下载次数: 247, 售价: 1 银子)

2017-1-17 15:18 上传

点击文件名下载附件

    你会发现，无论是双击加载本地资源，还是放到任意http服务器下访问http://www.nofastfat.com/h5/test/crossdomainSource/的跨域素材（F12去吧），均没有问题

2.实现原理
   原理是js文件不受同源策略限制。利用jsonp我们就可以把所有非js/css的资源，转成js文件（图片转base64），由egret加载并解析。
   本方案提供转js脚本工具，用于将所有素材转换为js文件。
   同时提供针对egret的解析库，通过Analyzer注入。完全不影响现有的工作流。

3.操作步骤
   a.在egret项目中引入CrossdomainLib.ts和AssetAdapter.ts2个库文件（见后面示例附件）
   b.修改index.html文件如下：
      [mw_shl_code=applescript,true]
<script>
            //是否开启跨域支持，只建议在release版本中开启
            var needCross = false;
        var resourcePath = 'http://www.nofastfat.com/h5/test/crossdomainSource/';//读CDN等跨域资源
        // var resourcePath = '';//读本地资源
            
        egret.runEgret({renderMode:"webgl"});
    </script>[/mw_shl_code]
    c.修改Main.ts文件如下，根据各个项目不同，可能略有差异，重点就是使用AssetAdapter管理素材，和使用 startCross(this.stage, true, window['resourcePath']); 开启跨域支持
   [mw_shl_code=applescript,true]
public constructor() {
        super();
        this.once( egret.Event.ADDED_TO_STAGE, this.__addedHandler, this );
    }

    private __addedHandler( e: egret.Event ): void {
        if ( !egret.Capabilities.isMobile ) {
            this.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;
            this.stage.orientation = egret.OrientationMode.AUTO;
        }

        this.stage.registerImplementation( "eui.IAssetAdapter", new AssetAdapter() );
        var vc: RES.VersionController = new RES.VersionController();

        vc.getVirtualUrl = function ( url: string ): string {
            return url + '?v=' + '0.0.1';
        }
        
        RES.registerVersionController( vc );
        
        //绕开egret同域策略的关键代码，只建议在release后，设置needCross = true，以便跨域生效
        if(window && window['needCross']){
            startCross(this.stage, true, window['resourcePath']);
        }
         
        this.startLoadSource();
    }
[/mw_shl_code]
    d.发布你的项目
    e.安装脚本工具（见附件，安装一次即可）：修改installScript.cmd中INSTALL为你的egret安装目录，然后双击该文件，即可安装成功

     f.在发布的release项目目录下打开cmd命令行工具，并输入 egret crossdomain(如提示找不到该命名，请返回上一步骤重新安装)。此时所有需要的跨域资源已经自动生成。



    e.修改release目下index.html中的设置，needCross为true，并根据需要设置跨域素材的位置，如果是加载本地资源，则设置为空。
如果需要放置资源到CDN上，则复制完整的resource目录到cdn，如下图（下图为测试用http服务器的目录结构，对应：http://www.nofastfat.com/h5/test/crossdomainSource/），并设置resourcePath为对应的URL地址。


    f.操作结束，你会发现，修改处理后的html文件不仅可以直接双击访问，还可以访问跨域CDN上的资源。


4.写在最后
   a.由于使用base64转图片，性能会有一定损耗，因此不建议在中大型游戏上使用。
    b.该工具并没有经历上线项目检验。 （2017-4.17 更新:经过多位朋友QQ反馈，本工具已经历不同的上线项目，基本稳定）  

    c.引擎版本最高支持到3.2.6。4.0由于Analyzer兼容行问题，暂不支持（2017-4.17 更新:经过实测，由于4.0.3版本对RES的保留，依旧可用，目前版本可支持到4.0.3）  
    d.使用本工具可以衍生出很多玩法，比如使用apicloud等工具可以在线打包出ipa和apk文件（而不用去到native上各种悲催）。使用C#打壳在windows桌面上跑（electron打包有100M+），等等玩法。（2017-4.17 更新:经过本人实际使用，建议使用HBuilder+htmlplus框架打包app，稳定高效，本地api丰富）  
2017-3-20更新
当项目中有fnt位图字体时，会有BUG，需要做如下处理
1.*.fnt文件中， {"file":"/fnt.png",中的斜杠（/）一定要去掉，一定要去掉，位图字体工具的坑
2.不要在default.res.json中手动加载fnt.png文件，因为*.fnt文件自己就会加载对应的fnt.png文件
如果觉得本贴对您有帮助，希望回复以让更多的人看到，同时，回帖也是一种美德.

脚本工具.rar (3.28 KB, 下载次数: 170, 售价: 1 银子)

2017-1-17 15:49 上传

点击文件名下载附件 示例项目.rar (1.69 MB, 下载次数: 194, 售价: 1 银子)

2017-1-17 15:49 上传

点击文件名下载附件

先顶后看，好习惯

先顶后看，好习惯

4.0.0 虽然修改了 Analyzer ，但是您可以使用老的 RES 库，仍然可以使用的

牛逼的贴

又见高手

resource里有音频文件怎么办，也是base64吗还有 我运行egret crossdomain的时候提示未知的编译参数crossdomain
重新安装了也不行啊

lxl199 发表于 2017-3-10 11:17
resource里有音频文件怎么办，也是base64吗还有 我运行egret crossdomain的时候提示未知的编译参数crossdom ...

音频我记得是不受跨域的限制。所以不需要处理

如果重新安装失败的话，检查“\Egret\EgretEngine\win\egret\tools\commands\”目录下是否有crossdomain.js这个文件，没有的话，可以手动复制过去

nofastfat 发表于 2017-3-10 11:22
音频我记得是不受跨域的限制。所以不需要处理

如果重新安装失败的话，检查“\Egret\EgretEngine\win\egr ...

可以了，多谢~~