中国天气小工具风格制作指南.docx

1、中国天气小工具风格制作指南【注意，有些参数已失效或改变，但还没有在这里写上去，等有空了写】首先小工具版本必须是1.5.1.0以上，低于这个版本是不支持这个功能的。“中国天气”下载请移步：Win7小工具“中国天气”其次，先来普及一下基础知识：JSON：教条式的定义就不说了，这里只告诉大家如何最简单的写出符合规则的JSON数据（小工具的风格定义以JSON为基础）。“”表示一个数组，里面的内容以逗号分隔，比如“aa,bb,cc”就是一个标准的数组。“”表示一个对象，里面的内容以键值对的形式出现，例如下面一段：view sourceprint?12name: zjfeiye,3age: 29,4ema

2、il: zjfeiye,5website: 6可以看出，实际上每个键值对的键和值由冒号分隔，而键值对则由逗号分隔，请注意，最后一行，不需要以逗号结尾，同时要注意不要把标点写成中文标点两者是可以相互嵌套的，例如下面这段：view sourceprint?12a: a,3b: 1,2,3,4c: 5d: d6789a:a,b:b,c:c基础到此为止。下面开始制作：首先找到风格文件夹，一般位于：C:UsersYourNameAppDataLocalMicrosoftWindows SidebarGadgetsXCN Weather.Gadgetstyles要制作风格，首先要有一套图标，按照命名规则命

3、名好每一个图标，要注意图标最好是一样尺寸的，每个图标代表的含义见此：天气图例同时如果你希望有背景，那么还需要制作一张背景图片。第一步：给自己的风格起一个独一无二的代号，尽量不要跟别人重名，例如：“myStyle”，在“styles”下建立一个以代号为文件名的JS文件，这里是：“myStyle.style.js”，注意必须以“.style.js”结尾，这是一个约定。第二步：在“styles”下建立一个文件夹，例如：“myStyle”，将你准备好的图标放进去。第三步：使用记事本或其他纯文本编辑工具编辑“myStyle.style.js”，首先架构起一个大概的轮廓：view sourceprint?

4、01/addStyle表示添加一个风格02addStyle(03name: myStyle, /表示风格代号,必须跟文件名相同04version: 1.0.1.0,/ 表示风格版本号05displayName: 默认风格, /风格显示名称，显示在配置面板中06author: 阿干, /风格作者07email: zjfeiye, /作者邮件（可不写，整行去掉）08website: , /作者主页（可不写，整行去掉）09folder: default, /风格使用的图片的存放目录，就是第二步所建立的文件夹名10bg: bg, /所使用的背景图片的文件名，必须为PNG格式，不用带扩展名11width

5、: 270, /整个小工具尺寸的宽度，一般就是背景图的高宽12height: 220, /整个小工具尺寸的高度13items: /用来定义所要显示的元素14)。这样，一个最基本的结构就定义好了，这时候，如果重启小工具你就已经能在配置面板中看到这个风格了，当然，如果你现在选中他的话，不会显示任何东西，因为刚才的最后一条“需要显示的元素”还没有定义。下面我们尝试定义2个元素，也是2种不同类型的元素，图片和文本：view sourceprint?001/addStyle表示添加一个风格002/ “/”表示它后面的代码不起作用，即注释，你如果希望那个定义不要气作用，在他前面加上“/”或者删除该行即可，

6、但是一定要注意检查逗号，不要少了或者多了！003addStyle(004name: myStyle, /表示风格代号,必须跟文件名相同005version: 1.0.1.0,/表示风格版本号006displayName: 默认风格, /风格显示名称，显示在配置面板中007author: 阿干, /风格作者008email: zjfeiye, /作者邮件（可不写，整行去掉）009website: , /作者主页（可不写，整行去掉）010folder: default, /风格使用的图片的存放目录，就是第二步所建立的文件夹名011bg: bg, /所使用的背景图片的文件名，必须为PNG格式，不用带

7、扩展名012width: 270, /整个小工具尺寸的宽度013height: 220, /整个小工具尺寸的高度014items: 015 / 一对之间是一个元素，多个元素用逗号分隔，这个元素以地名为例016type: text, /表示这个元素是文本017options: /options表示元素属性，是一个嵌套的对象018font: 微软雅黑, /表示所使用的字体019fontsize: 36, /表示字体大小020color: White, /表示文字颜色021colorN: Black, /表示夜晚字体颜色，以上4条为文本类型独有属性022023left: 265, /距离小工具左侧距

8、离，即坐标X024top: 20, /距离小工具顶部距离，即坐标Y025align: right, /对齐方式，“left”，“right”,“center”，026/为“left”时：上面left的定义为从小工具最左侧到文本最左侧027/为“right”时：left的定义从小工具最左侧到文本最右侧028/为“center”时：left的定义从小工具最左侧到文本中心029/blur: 0, /模糊值0-100030/brightness: 0,/亮度，这个参数我自己也整不大明白：（031/opacity: 100,/不透明度0-100032/rotation: 0,/角度033shadow:

9、/定义阴影效果034color: Black, /阴影颜色035colorN: White, /表示夜晚阴影颜色036radius: 3, /阴影大小037alpha: 25, /阴影不透明度038deltaX: 3, /阴影X偏移039deltaY: 3/阴影Y偏移040,041glow: /定义光晕效果042color: Black, /光晕颜色043colorN: White, /表示夜晚光晕颜色044radius: 3, /光晕大小045alpha: 10/光晕不透明度046047, /以上各项从align（包括）起到最后，每一个定义都可以删除，包括嵌套的对象，例如下一个元素就是个最简

10、定义048formater: function(wInfo) /定义格式器，你可以理解为，该元素所要显示的数据从这里取得049returnwInfo.location。 /返回地名这里可做自定义操作，例如：return wInfo.location+,中国。能取得哪些数据参见天气数据结构050, 051tip: function(wInfo) /提示信息，支持两种定义方式，另一种是直接指定文本，例如：tip: 今日天气052returnwInfo.location。 053, 054link: true/外链，支持3种定义方式，true/false:使用默认的外链，即中国天气主页；字符串，例如

11、:link:。回调函数，类似tip，可以自己根据变量拼接外联路径055/一个元素定义结束056, / 今日天气，这是一个最简化的定义057type: text,058options: 059font: 微软雅黑,060fontsize: 14,061color: White,062063left: 245,064top: 74065,066formater: function(wInfo) 067returnwInfo.today.weather + ,+ wInfo.today.fl。068069, / 今日图标，这是一个图片类型的元素070type: image, /这一行制定这个元素是一

12、个图片类型071options: 072/width: ,/图片宽度073/height: ,/图片高度，这两条是图片类型的元素的独有定义，以下各条请参见文本类型074075left: -10,076top: 0077/align: right, 078/blur: 0,079/brightness: 0,080/opacity: 100,081/rotation: 0,082/shadow: 083/ color: Black,084/ colorN: White, /表示夜晚阴影颜色085/ radius: 3,086/ alpha: 75,087/ deltaX: 3,088/ delt

13、aY: 3089/,090/glow: 091/ color: Black,092/ colorN: White, /表示夜晚光晕颜色093/ radius: 3,094/ alpha: 25095/096,097formater: function(wInfo) 098returnwInfo.today.weatherImg。099100101102)。下面我们来看看天气数据的数据结构：view sourceprint?0102provider: 中国天气, /提供商，用wInfo.provider获取03fchh: Sun Jan 17 18:00:00 UTC+0800 2010, /发

14、布时间，用wInfo.fchh获取，一般情况下用不上此数据，如果要用的话建议使用new Date(wInfo.fchh)，获取一个时间对象，相应的new Date(wInfo.fchh).getHours()就能获取到小时数。04location: 宁波, /当前城市，用wInfo.location获取05code: 101210401, /当前城市代码，用wInfo.code获取06postcode: 315000, /邮政编码，用wInfo.postcode获取07sunup: 06:50, /日出时间，用wInfo.sunup获取08sunset: 17:15, /日落时间，用wInfo

15、.sunset获取09today: /今日天气10tempH: , /白天温度，用wInfo.today.tempH获取11tempL: 2, /夜间温度，用wInfo.today.tempL获取12tempR: 2, /温度范围，用wInfo.today.tempR获取13imgD: , /白天图标，用wInfo.today.imgD获取14imgN: n00, /夜间图标，用wInfo.today.imgN获取15weatherD: , /白天天气，用wInfo.today.imgDT获取16weatherN: 晴, /夜间天气，用wInfo.today.imgNT获取17weather:

16、 晴转多云, /天气情况，用wInfo.today.weather获取18weatherImg: n0, /天气图标，用wInfo.today.weatherImg获取19flD: , /白天风力，用wInfo.today.flD获取20flN: 微风, /夜间风力，用wInfo.today.flN获取21fxD: , /白天风向，用wInfo.today.fxD获取22fxN: 无持续风向, /夜间风向，用wInfo.today.fxN获取23week: 星期四, /星期，用wInfo.today.week获取24fl: 微风, /今日风力，用wInfo.today.fl获取25fx: 无持

17、续风向/今日风向，用wInfo.today.fx获取26,27next1: / 明天天气，获取同上只需要将today改成next1即可，例如：wInfo.next1.tempH28tempH: 12,29tempL: 5,30tempR: 125,31imgD: 01,32imgN: n02,33weatherD: 多云,34weatherN: 阴,35weather: 多云转阴,36weatherImg: 1,37flD: 微风,38flN: 微风,39fxD: 无持续风向,40fxN: 无持续风向,41week: 星期五,42fl: 微风,43fx: 无持续风向44,45next2: /

18、后天天天气，获取同上只需要将today改成next2即可，例如：wInfo.next2.tempH46tempH: 10,47tempL: 3,48tempR: 103,49imgD: 01,50imgN: n01,51weatherD: 多云,52weatherN: 多云,53weather: 多云,54weatherImg: 1,55flD: 微风,56flN: 微风,57fxD: 无持续风向,58fxN: 无持续风向,59week: 星期六,60fl: 微风,61fx: 无持续风向62,63next3: / 大后天天天气，获取同上只需要将today改成next3即可，例如：wInfo.n

19、ext3.tempH64tempH: 13,65tempL: 5,66tempR: 135,67imgD: 01,68imgN: n01,69weatherD: 多云,70weatherN: 多云,71weather: 多云,72weatherImg: 1,73flD: 微风,74flN: 微风,75fxD: 无持续风向,76fxN: 无持续风向,77week: 星期日,78fl: 微风,79fx: 无持续风向80,next4:,next5:81now: / 实时天气，获取同上只需要将today改成now即可，例如：wInfo.now.temp82time:16:10, / 发布时间83tem

20、p:14, / 当前温度84wd:东南风,/ 风向85ws:小于3级,/ 风力86wse:3,/ 风力另一种表达方式87sd:54%,/湿度88ap:1025.1hPa/ 气压8990基本上就差不多了，剩下的就是不断的调试了，祝大家做出自己满意的风格来，同时也可以把你的独一无二的风格打包出来供大家使用：）= 图片命名规则 =1. 必须为png格式2. 必须按照天气图列对照表进行命名天气图列对照表：= 如何重用图标 =有时候我们并不需要为白天黑夜单独定义图标，也就是说不管白天还是黑夜，天气图标是完全可以通用的，可以用一个图标解决，这样可以显著减小风格包的体积。例如“默认风格”就是采用了这种方式，

21、如果你打开“C:UsersYourNameAppDataLocalMicrosoftWindows SidebarGadgetsXCN Weather.Gadgetstylesdefault”你就会发现只有少量的图标有黑夜状态的图标那么这是怎么实现的呢，我们打开该目录下的“default.style.js”，找到第75行，我们发现这么一段：view sourceprint?01formater: function(wInfo) 02varc = wInfo.today.weatherImg。03/c = n00。04varexcept = n00,n01,n03,n04,n05,n13,n18

22、,n29,n30,n31.split(,)。05if(!except.contains(c) 06c = c.replace(n, )。0708if(c = 00| c = n00) 09c += b。1011returnc。12formater的含义，基础篇已经讲过，这是一个数据格式化器，他的作用是获取数据并对数据进行一定的处理，使之符合本风格的要求。其中我们需要关注的是：view sourceprint?1varexcept = n00,n01,n03,n04,n05,n13,n18,n29,n30,n31.split(,)。2if(!except.contains(c) 3c = c.r

23、eplace(n, )。4这一段的含义是，n00,n01,n03,n04,n05,n13,n18,n29,n30,n31这几个图标是有白天黑夜的状态区别的，而其他的没有，你不需要理解代码，只需要知道，如果你的风格中有哪几个图标是有白天黑夜状态区别的，那么就把它加到这里来（注意以逗号分隔），你只要简单的复制这段代码即可。view sourceprint?1if(c = 00| c = n00) 2c += b。3这一段实际上并不需要理会他，不过既然你已经打开了这个文件，那么必然会看到这一段，这里简单解释下这一段的作用就是对“00”和“n00”两个图标进行单独处理，你会发现这两个图片分别是代表白天和晚上的晴朗，如果直接用到界面上去，你会发现，位置并不是很好，类似这样：所以我重新制作了这连个图标并分别命名为“00b.png”和“n00b.png”所以这段代码的作用就是，当天气图标的代码是“00”或者“n00”时，我们分别将他们转化为“00b”和“n00b”，经过处理后，看起来的效果就是这样的：这样看起来是不是顺眼很多呢：）类似的，所有元素的formater都可以进行类似的配置。= 如何让白天黑夜的文字颜色不同 =现在风格定义中新增了colorN，用以定义夜间预报文字，阴影，光晕的颜色，具体请看基础篇的更新版本。