在runtime2.0中已经加入了webp,但是需要运行于runtime加速器.如果想以H5网站的显示运行.目前需要加入第三方库.
一,使用 : npm install egret-resource-manager -g 安装最新RES(第三方)库
650) this.width=650;" src="https://s1.51cto.com/oss/201710/25/4e6010b77fef93e516dbd23638df28bf.png-wh_500x0-wm_3-wmp_4-s_1221310354.png" title="01.png" alt="4e6010b77fef93e516dbd23638df28bf.png-wh_" />
二,我新建了一个NewWebPDemo的GUI项目(其实EUI也行,没啥影响的)
在NewWebPDemo项目根目录执行 : res upgrade
650) this.width=650;" src="https://s2.51cto.com/oss/201710/25/fff6daea68862a97a512255f357b28d7.png-wh_500x0-wm_3-wmp_4-s_1713334419.png" title="02.png" alt="fff6daea68862a97a512255f357b28d7.png-wh_" />
编译之后 , 项目自动出现2处的不同:
1,bin文件夹下，新增了一个resourcemanager文件夹，该文件夹存放全新RES模块代码(第三方)。
2,egretProperties.json中，原有modules节点中的res节点被删除，取而代之的是名为resourcemanager的模块配置。
三,因为全新的RES模块(第三方)依赖于ES2015标准中的Promise对象,所以需要修改tsconfig.json文件如下:
{ "compilerOptions": { "target": "es5", "experimentalDecorators":true, "lib": [ "es5","dom","es2015.promise" ] }, "exclude": [ "node_modules" ]}四,利用DOS命令 : res build 你的项目名称 来重新构建你的项目资源. 在项目的平级目录(NewWebPDemo)所在目录
650) this.width=650;" src="https://s3.51cto.com/oss/201710/25/59649e9847dd580e3ca4cea66f42a738.png-wh_500x0-wm_3-wmp_4-s_2836602449.png" title="03.png" alt="59649e9847dd580e3ca4cea66f42a738.png-wh_" />
生成了一个config.json的文件
五,测试
利用智图软件将背景图片bg.jpg打成bg.webp替换到default.res.json中
另外加一个sheet图集json( 对应的图片为webp类型的 )
650) this.width=650;" src="https://s2.51cto.com/oss/201710/25/69fd673280eea0315ff32aa66423d5a4.png-wh_500x0-wm_3-wmp_4-s_2354875225.png" title="04.png" alt="69fd673280eea0315ff32aa66423d5a4.png-wh_" />
注意
650) this.width=650;" src="https://s2.51cto.com/oss/201710/25/aa69c86719e43171a4a51989ef22aa8d.png-wh_500x0-wm_3-wmp_4-s_2020971026.png" title="08.png" alt="aa69c86719e43171a4a51989ef22aa8d.png-wh_" />
测试代码 :
650) this.width=650;" src="https://s5.51cto.com/oss/201710/25/314841d2b6ddbfcccfced2c0c4e94792.png-wh_500x0-wm_3-wmp_4-s_112020398.png" title="06.png" alt="314841d2b6ddbfcccfced2c0c4e94792.png-wh_" />
六,可完美加载与显示
650) this.width=650;" src="https://s3.51cto.com/oss/201710/25/ac53e7a1723b83363d37db5072ea50ef.png-wh_500x0-wm_3-wmp_4-s_1590013141.png" title="07.png" alt="ac53e7a1723b83363d37db5072ea50ef.png-wh_" />
本文出自 “Better_Power_Wisdom” 博客，请务必保留此出处http://aonaufly.blog.51cto.com/3554853/1975974
Egret之Webp
原文地址：http://aonaufly.blog.51cto.com/3554853/1975974