首页 > 代码库 > Theme皮肤文件(json解析、多文件管理)

Theme皮肤文件(json解析、多文件管理)

一  官方教程

http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html

 

二 thm主题文件解析

default.thm.json皮肤主题文件范例:

{
  "skins": {
    "eui.Button": "resource/eui_skins/ButtonSkin.exml"
  },
  "autoGenerateExmlsList": false,
  "exmls": [
    "src/HomeSceneSkin.exml"
  ]
}

 skins:

 将exml和ts绑定。

如果绑定,则在新建eui.component不需要设置skinName了。

如果没有绑定,则需要在eui.component的contruct中设置this.skinName = ""。

 

autoGenerateExmlsList
true:发布时将exmls下皮肤自动合并到default.thm.json文件中
false:不会将exmls下的皮肤自动合并到default.thm.json文件中

exmls:
在Main.ts加载主题文件时,预加载exmls列表中的皮肤
let theme = new eui.Theme("resource/default.thm.json", this.stage);

三 exml的几种使用方式:

1 直接引用

public constructor() {
    super();
    this.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
    this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    this.skinName = "src/HomeSceneSkin.exml";
}

执行顺序。在exml未预先加载的情况下,实时加载。

chilrenCreated 

addToStage

exml加载完成

onComplete

 

2 其他方式不怎么用。。具体看官方教程

 

 

四  皮肤多文件管理

多个json皮肤文件,分类加载不同皮肤,减轻一次性加载大量皮肤解析压力。

需要自己管理exml的加载顺序,因为exml之间可能有依赖关系。

let theme = new eui.Theme("resource/default.thm.json", this.stage);
let theme2 = new eui.Theme("resource/default2.thm.json",this.stage);
theme2.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

 

default.thm.json
{
  "skins": {
  },
  "autoGenerateExmlsList": false,
  "exmls": [
     "src/SimpleButtonSkin.exml"
  ]
}

default2.thm.json


{
  "skins": {
    
  },
  "autoGenerateExmlsList": false,
  "exmls": [
      "resource/eui_skins/ButtonSkin.exml",
     "src/HomeSceneSkin.exml"
  ]
}

技术分享

 

另外一说,wing2.5和3都会强行自动修改thm的json文件。。。


Theme皮肤文件(json解析、多文件管理)