egret GUI 和 egret Wing 是我看到h5 最渣的设计
一个抄袭FlexLite抄的连自己思想都没有,别人精髓都不懂的垃圾框架。也不学学MornUI,好歹有点自己想法。
先来个最小可用集合吧:
1. egret create legogame --type gui。生成一个带gui的项目。
2. 用webstorm打开这个傻逼项目。
3. 修改theme.thm:
{ "skins": { "egret.gui.Button":"skins.simple.ButtonSkin" } }
4. 修改resource.json
{ "groups":[ { "keys":"button_disabled_png,button_down_png,button_normal_png,bgImage", "name":"preload" }], "resources":[ { "name":"button_disabled_png", "scale9grid":"3,4,14,13", "type":"image", "url":"assets/simple/NormalButton/button_disabled.png" }, { "name":"button_down_png", "scale9grid":"4,3,13,14", "type":"image", "url":"assets/simple/NormalButton/button_down.png" }, { "name":"button_normal_png", "scale9grid":"4,3,13,15", "type":"image", "url":"assets/simple/NormalButton/button_normal.png" }, { "name":"bgImage", "type":"image", "url":"assets/bg.jpg" } ] }
5. 进入resource/assets/simple目录,保留NormalButton,其他删掉。进入src/skins/simple/ 除了buttonskin.exml,其他删掉。
6. 进入ShowcaseSkin.exml, 删除List,得到:
<?xml version='1.0' encoding='utf-8'?> <e:Skin width="480" height="800" xmlns:e="http://ns.egret-labs.org/egret" xmlns:w="http://ns.egret-labs.org/wing"> <w:HostComponent name="egret.gui.SkinnableComponent"/> <w:Declarations/> <e:states> <e:State name="normal"/> <e:State name="disabled"/>a </e:states> <e:Button id="btnShowMessage" label="click" y="50" horizontalCenter="0"/> </e:Skin>
7. 进入Showcase.ts,除了button,其他都删除:
class Showcase extends egret.gui.SkinnableComponent { public constructor() { super(); this.skinName = "skins.scene.ShowcaseSkin"; } public btnShowMessage:egret.gui.Button; public partAdded(partName:string, instance:any):void { super.partAdded(partName, instance); } }
8. 在legogame目录下面,运行egret build, egret startserver。得到只有一个button的结果。
这个就是最小可用集:Mininum available set。
继续研究resource.json和theme.thm是不是多余的。还有那个buttonskin.exml 文件