egret跨域解决方案

1.简述

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

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

3.操作步骤
a.在egret项目中引入CrossdomainLib.ts和AssetAdapter.ts2个库文件（见后面示例附件）
b.修改index.html文件如下：

<script>
        //是否开启跨域支持，只建议在release版本中开启
        var needCross = false;
        var resourcePath = 'http://www.nofastfat.com/h5/test/crossdomainSource/';//读CDN等跨域资源 
        // var resourcePath = '';//读本地资源
             
        egret.runEgret({renderMode:"webgl"});
    </script>

c.修改Main.ts文件如下，根据各个项目不同，可能略有差异，重点就是使用AssetAdapter管理素材，和使用 startCross(this.stage, true, window['resourcePath']); 开启跨域支持

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();
    }

d.发布你的项目

e.安装脚本工具（见附件，安装一次即可）：修改installScript.cmd中INSTALL为你的egret安装目录，然后双击该文件，即可安装成功

扫描二维码关注公众号，回复： 198724 查看本文章

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丰富）

当项目中有fnt位图字体时，会有BUG，需要做如下处理
1.*.fnt文件中， {"file":"/fnt.png",中的斜杠（/）一定要去掉，一定要去掉，位图字体工具的坑
2.不要在default.res.json中手动加载fnt.png文件，因为*.fnt文件自己就会加载对应的fnt.png文件

egret跨域解决方案

猜你喜欢