中国天气小工具风格制作指南.docx
《中国天气小工具风格制作指南.docx》由会员分享，可在线阅读，更多相关《中国天气小工具风格制作指南.docx（23页珍藏版）》请在冰点文库上搜索。
中国天气小工具风格制作指南
【注意，有些参数已失效或改变，但还没有在这里写上去，等有空了写】
首先小工具版本必须是1.5.1.0以上，低于这个版本是不支持这个功能的。
“中国天气”下载请移步：
Win7小工具“中国天气”
其次，先来普及一下基础知识：
JSON：
教条式的定义就不说了，这里只告诉大家如何最简单的写出符合规则的JSON数据（小工具的风格定义以JSON为基础）。
“[]”表示一个数组，里面的内容以逗号分隔，比如“["aa","bb","cc"]”就是一个标准的数组。
“{}”表示一个对象，里面的内容以键值对的形式出现，例如下面一段：
viewsourceprint?
1
{
2
name:
"zjfeiye",
3
age:
29,
4
email:
"zjfeiye@",
5
website:
""
6
}
可以看出，实际上每个键值对的键和值由冒号分隔，而键值对则由逗号分隔，请注意，最后一行，不需要以逗号结尾，同时要注意不要把标点写成中文标点
两者是可以相互嵌套的，例如下面这段：
viewsourceprint?
1
{
2
a:
"a",
3
b:
["1","2","3"],
4
c:
{
5
d:
"d"
6
}
7
}
8
9
[{a:
"a"},{b:
"b"},{c:
"c"}]
基础到此为止。
下面开始制作：
首先找到风格文件夹，一般位于：
C:
\Users\[YourName]\AppData\Local\Microsoft\WindowsSidebar\Gadgets\XCNWeather.Gadget\styles
要制作风格，首先要有一套图标，按照命名规则命名好每一个图标，要注意图标最好是一样尺寸的，每个图标代表的含义见此：
天气图例
同时如果你希望有背景，那么还需要制作一张背景图片。
第一步：
给自己的风格起一个独一无二的代号，尽量不要跟别人重名，例如：
“myStyle”，在“styles”下建立一个以代号为文件名的JS文件，这里是：
“myStyle.style.js”，注意必须以“.style.js”结尾，这是一个约定。
第二步：
在“styles”下建立一个文件夹，例如：
“myStyle”，将你准备好的图标放进去。
第三步：
使用记事本或其他纯文本编辑工具编辑“myStyle.style.js”，首先架构起一个大概的轮廓：
viewsourceprint?
01
//addStyle表示添加一个风格
02
addStyle（{
03
name:
"myStyle",//表示风格代号,必须跟文件名相同
04
version:
"1.0.1.0",//表示风格版本号
05
displayName:
"默认风格",//风格显示名称，显示在配置面板中
06
author:
"阿干",//风格作者
07
email:
"zjfeiye@",//作者邮件（可不写，整行去掉）
08
website:
"",//作者主页（可不写，整行去掉）
09
folder:
"default",//风格使用的图片的存放目录，就是第二步所建立的文件夹名
10
bg:
"bg",//所使用的背景图片的文件名，必须为PNG格式，不用带扩展名
11
width:
270,//整个小工具尺寸的宽度，一般就是背景图的高宽
12
height:
220,//整个小工具尺寸的高度
13
items:
[]//用来定义所要显示的元素
14
}）。
这样，一个最基本的结构就定义好了，这时候，如果重启小工具你就已经能在配置面板中看到这个风格了，当然，如果你现在选中他的话，不会显示任何东西，因为刚才的最后一条“需要显示的元素”还没有定义。
下面我们尝试定义2个元素，也是2种不同类型的元素，图片和文本：
viewsourceprint?
001
//addStyle表示添加一个风格
002
//“//”表示它后面的代码不起作用，即注释，你如果希望那个定义不要气作用，在他前面加上“//”或者删除该行即可，但是一定要注意检查逗号，不要少了或者多了！
003
addStyle（{
004
name:
"myStyle",//表示风格代号,必须跟文件名相同
005
version:
"1.0.1.0",//表示风格版本号
006
displayName:
"默认风格",//风格显示名称，显示在配置面板中
007
author:
"阿干",//风格作者
008
email:
"zjfeiye@",//作者邮件（可不写，整行去掉）
009
website:
"",//作者主页（可不写，整行去掉）
010
folder:
"default",//风格使用的图片的存放目录，就是第二步所建立的文件夹名
011
bg:
"bg",//所使用的背景图片的文件名，必须为PNG格式，不用带扩展名
012
width:
270,//整个小工具尺寸的宽度
013
height:
220,//整个小工具尺寸的高度
014
items:
[
015
{//一对{}之间是一个元素，多个元素用逗号分隔，这个元素以地名为例
016
type:
"text",//表示这个元素是文本
017
options:
{//options表示元素属性，是一个嵌套的对象
018
font:
"微软雅黑",//表示所使用的字体
019
fontsize:
36,//表示字体大小
020
color:
"White",//表示文字颜色
021
colorN:
"Black",//表示夜晚字体颜色，以上4条为文本类型独有属性
022
023
left:
265,//距离小工具左侧距离，即坐标X
024
top:
20,//距离小工具顶部距离，即坐标Y
025
align:
"right",//对齐方式，“left”，“right”,“center”，
026
//为“left”时：
上面left的定义为从小工具最左侧到文本最左侧
027
//为“right”时：
left的定义从小工具最左侧到文本最右侧
028
//为“center”时：
left的定义从小工具最左侧到文本中心
029
//blur:
0,//模糊值0-100
030
//brightness:
0,//亮度，这个参数我自己也整不大明白：
（
031
//opacity:
100,//不透明度0-100
032
//rotation:
0,//角度
033
shadow:
{//定义阴影效果
034
color:
"Black",//阴影颜色
035
colorN:
"White",//表示夜晚阴影颜色
036
radius:
3,//阴影大小
037
alpha:
25,//阴影不透明度
038
deltaX:
3,//阴影X偏移
039
deltaY:
3//阴影Y偏移
040
},
041
glow:
{//定义光晕效果
042
color:
"Black",//光晕颜色
043
colorN:
"White",//表示夜晚光晕颜色
044
radius:
3,//光晕大小
045
alpha:
10//光晕不透明度
046
}
047
},//以上各项从align（包括）起到最后，每一个定义都可以删除，包括嵌套的对象，例如下一个元素就是个最简定义
048
formater:
function（wInfo）{//定义格式器，你可以理解为，该元素所要显示的数据从这里取得
049
returnwInfo.location。
//返回地名这里可做自定义操作，例如：
returnwInfo.location+",中国"。
能取得哪些数据参见天气数据结构
050
},
051
tip:
function（wInfo）{//提示信息，支持两种定义方式，另一种是直接指定文本，例如：
tip:
"今日天气"
052
returnwInfo.location。
053
},
054
link:
true//外链，支持3种定义方式，true/false:
使用默认的外链，即中国天气主页；字符串，例如:
link:
""。
回调函数，类似tip，可以自己根据变量拼接外联路径
055
}//一个元素定义结束
056
{//今日天气，这是一个最简化的定义
057
type:
"text",
058
options:
{
059
font:
"微软雅黑",
060
fontsize:
14,
061
color:
"White",
062
063
left:
245,
064
top:
74
065
},
066
formater:
function（wInfo）{
067
returnwInfo.today.weather+","+wInfo.today.fl。
068
}
069
},{//今日图标，这是一个图片类型的元素
070
type:
"image",//这一行制定这个元素是一个图片类型
071
options:
{
072
//width:
//图片宽度
073
//height:
//图片高度，这两条是图片类型的元素的独有定义，以下各条请参见文本类型
074
075
left:
-10,
076
top:
0
077
//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
//deltaY:
3
089
//},
090
//glow:
{
091
//color:
"Black",
092
//colorN:
"White",//表示夜晚光晕颜色
093
//radius:
3,
094
//alpha:
25
095
//}
096
},
097
formater:
function（wInfo）{
098
returnwInfo.today.weatherImg。
099
}
100
}
101
]
102
}）。
下面我们来看看天气数据的数据结构：
viewsourceprint?
01
{
02
"provider":
"中国天气",//提供商，用wInfo.provider获取
03
"fchh":
"SunJan1718:
00:
00UTC+08002010",//发布时间，用wInfo.fchh获取，一般情况下用不上此数据，如果要用的话建议使用newDate（wInfo.fchh），获取一个时间对象，相应的newDate（wInfo.fchh）.getHours（）就能获取到小时数。
04
"location":
"宁波",//当前城市，用wInfo.location获取
05
"code":
"101210401",//当前城市代码，用wInfo.code获取
06
"postcode":
"315000",//邮政编码，用wInfo.postcode获取
07
"sunup":
"06:
50",//日出时间，用wInfo.sunup获取
08
"sunset":
"17:
15",//日落时间，用wInfo.sunset获取
09
"today":
{//今日天气
10
"tempH":
"",//白天温度，用wInfo.today.tempH获取
11
"tempL":
2,//夜间温度，用wInfo.today.tempL获取
12
"tempR":
"2℃",//温度范围，用wInfo.today.tempR获取
13
"imgD":
"",//白天图标，用wInfo.today.imgD获取
14
"imgN":
"n00",//夜间图标，用wInfo.today.imgN获取
15
"weatherD":
"",//白天天气，用wInfo.today.imgDT获取
16
"weatherN":
"晴",//夜间天气，用wInfo.today.imgNT获取
17
"weather":
"晴转多云",//天气情况，用wInfo.today.weather获取
18
"weatherImg":
"n0",//天气图标，用wInfo.today.weatherImg获取
19
"flD":
"",//白天风力，用wInfo.today.flD获取
20
"flN":
"微风",//夜间风力，用wInfo.today.flN获取
21
"fxD":
"",//白天风向，用wInfo.today.fxD获取
22
"fxN":
"无持续风向",//夜间风向，用wInfo.today.fxN获取
23
"week":
"星期四",//星期，用wInfo.today.week获取
24
"fl":
"微风",//今日风力，用wInfo.today.fl获取
25
"fx":
"无持续风向"//今日风向，用wInfo.today.fx获取
26
},
27
"next1":
{//明天天气，获取同上只需要将today改成next1即可，例如：
wInfo.next1.tempH
28
"tempH":
12,
29
"tempL":
5,
30
"tempR":
"12℃~5℃",
31
"imgD":
"01",
32
"imgN":
"n02",
33
"weatherD":
"多云",
34
"weatherN":
"阴",
35
"weather":
"多云转阴",
36
"weatherImg":
"1",
37
"flD":
"微风",
38
"flN":
"微风",
39
"fxD":
"无持续风向",
40
"fxN":
"无持续风向",
41
"week":
"星期五",
42
"fl":
"微风",
43
"fx":
"无持续风向"
44
},
45
"next2":
{//后天天天气，获取同上只需要将today改成next2即可，例如：
wInfo.next2.tempH
46
"tempH":
10,
47
"tempL":
3,
48
"tempR":
"10℃~3℃",
49
"imgD":
"01",
50
"imgN":
"n01",
51
"weatherD":
"多云",
52
"weatherN":
"多云",
53
"weather":
"多云",
54
"weatherImg":
"1",
55
"flD":
"微风",
56
"flN":
"微风",
57
"fxD":
"无持续风向",
58
"fxN":
"无持续风向",
59
"week":
"星期六",
60
"fl":
"微风",
61
"fx":
"无持续风向"
62
},
63
"next3":
{//大后天天天气，获取同上只需要将today改成next3即可，例如：
wInfo.next3.tempH
64
"tempH":
13,
65
"tempL":
5,
66
"tempR":
"13℃~5℃",
67
"imgD":
"01",
68
"imgN":
"n01",
69
"weatherD":
"多云",
70
"weatherN":
"多云",
71
"weather":
"多云",
72
"weatherImg":
"1",
73
"flD":
"微风",
74
"flN":
"微风",
75
"fxD":
"无持续风向",
76
"fxN":
"无持续风向",
77
"week":
"星期日",
78
"fl":
"微风",
79
"fx":
"无持续风向"
80
},"next4":
{},"next5":
{}
81
"now":
{//实时天气，获取同上只需要将today改成now即可，例如：
wInfo.now.temp
82
"time":
"16:
10",//发布时间
83
"temp":
14,//当前温度
84
"wd":
"东南风",//风向
85
"ws":
"小于3级",//风力
86
"wse":
"<3",//风力另一种表达方式
87
"sd":
"54%",//湿度
88
"ap":
"1025.1hPa"//气压
89
}
90
}
基本上就差不多了，剩下的就是不断的调试了，祝大家做出自己满意的风格来，同时也可以把你的独一无二的风格打包出来供大家使用：
）
==图片命名规则==
1.必须为png格式
2.必须按照天气图列对照表进行命名
天气图列对照表：
==如何重用图标==
有时候我们并不需要为白天黑夜单独定义图标，也就是说不管白天还是黑夜，天气图标是完全可以通用的，可以用一个图标解决，这样可以显著减小风格包的体积。
例如“默认风格”就是采用了这种方式，如果你打开“C:
\Users\[YourName]\AppData\Local\Microsoft\WindowsSidebar\Gadgets\XCNWeather.Gadget\styles\default”你就会发现只有少量的图标有黑夜状态的图标
那么这是怎么实现的呢，我们打开该目录下的“default.style.js”，找到第75行，我们发现这么一段：
viewsourceprint?
01
formater:
function（wInfo）{
02
varc=wInfo.today.weatherImg。
03
//c="n00"。
04
varexcept="n00,n01,n03,n04,n05,n13,n18,n29,n30,n31".split（","）。
05
if（!
except.contains（c））{
06
c=c.replace（"n",""）。
07
}
08
if（c=="00"||c=="n00"）{
09
c+="b"。
10
}
11
returnc。
12
}
formater的含义，基础篇已经讲过，这是一个数据格式化器，他的作用是获取数据并对数据进行一定的处理，使之符合本风格的要求。
其中我们需要关注的是：
viewsourceprint?
1
varexcept="n00,n01,n03,n04,n05,n13,n18,n29,n30,n31".split（","）。
2
if（!
except.contains（c））{
3
c=c.replace（"n",""）。
4
}
这一段的含义是，n00,n01,n03,n04,n05,n13,n18,n29,n30,n31这几个图标是有白天黑夜的状态区别的，而其他的没有，你不需要理解代码，只需要知道，如果你的风格中有哪几个图标是有白天黑夜状态区别的，那么就把它加到这里来（注意以逗号分隔），你只要简单的复制这段代码即可。
viewsourceprint?
1
if（c=="00"||c=="n00"）{
2
c+="b"。
3
}
这一段实际上并不需要理会他，不过既然你已经打开了这个文件，那么必然会看到这一段，这里简单解释下
这一段的作用就是对“00”和“n00”两个图标进行单独处理，你会发现这两个图片分别是代表白天和晚上的晴朗，如果直接用到界面上去，你会发现，位置并不是很好，类似这样：
所以我重新制作了这连个图标并分别命名为“00b.png”和“n00b.png”
所以这段代码的作用就是，当天气图标的代码是“00”或者“n00”时，我们分别将他们转化为“00b”和“n00b”，经过处理后，看起来的效果就是这样的：
这样看起来是不是顺眼很多呢：
）
类似的，所有元素的formater都可以进行类似的配置。
==如何让白天黑夜的文字颜色不同==
现在风格定义中新增了colorN，用以定义夜间预报文字，阴影，光晕的颜色，具体请看基础篇的更新版本。
升级会员 