中国天气小工具风格制作指南Word文档格式.docx
- 文档编号:7079886
- 上传时间:2023-05-07
- 格式:DOCX
- 页数:23
- 大小:154.84KB
中国天气小工具风格制作指南Word文档格式.docx
《中国天气小工具风格制作指南Word文档格式.docx》由会员分享,可在线阅读,更多相关《中国天气小工具风格制作指南Word文档格式.docx(23页珍藏版)》请在冰点文库上搜索。
基础到此为止。
下面开始制作:
首先找到风格文件夹,一般位于:
C:
\Users\[YourName]\AppData\Local\Microsoft\WindowsSidebar\Gadgets\XCNWeather.Gadget\styles
要制作风格,首先要有一套图标,按照命名规则命名好每一个图标,要注意图标最好是一样尺寸的,每个图标代表的含义见此:
天气图例
同时如果你希望有背景,那么还需要制作一张背景图片。
第一步:
给自己的风格起一个独一无二的代号,尽量不要跟别人重名,例如:
“myStyle”,在“styles”下建立一个以代号为文件名的JS文件,这里是:
“myStyle.style.js”,注意必须以“.style.js”结尾,这是一个约定。
第二步:
在“styles”下建立一个文件夹,例如:
“myStyle”,将你准备好的图标放进去。
第三步:
使用记事本或其他纯文本编辑工具编辑“myStyle.style.js”,首先架构起一个大概的轮廓:
01
//addStyle表示添加一个风格
02
addStyle({
03
myStyle"
//表示风格代号,必须跟文件名相同
04
version:
1.0.1.0"
//表示风格版本号
05
displayName:
默认风格"
//风格显示名称,显示在配置面板中
06
author:
阿干"
//风格作者
07
//作者邮件(可不写,整行去掉)
08
//作者主页(可不写,整行去掉)
09
folder:
default"
//风格使用的图片的存放目录,就是第二步所建立的文件夹名
10
bg:
bg"
//所使用的背景图片的文件名,必须为PNG格式,不用带扩展名
11
width:
270,//整个小工具尺寸的宽度,一般就是背景图的高宽
12
height:
220,//整个小工具尺寸的高度
13
items:
[]//用来定义所要显示的元素
14
})。
这样,一个最基本的结构就定义好了,这时候,如果重启小工具你就已经能在配置面板中看到这个风格了,当然,如果你现在选中他的话,不会显示任何东西,因为刚才的最后一条“需要显示的元素”还没有定义。
下面我们尝试定义2个元素,也是2种不同类型的元素,图片和文本:
001
002
//“//”表示它后面的代码不起作用,即注释,你如果希望那个定义不要气作用,在他前面加上“//”或者删除该行即可,但是一定要注意检查逗号,不要少了或者多了!
003
004
005
//表示风格版本号
006
007
008
009
010
011
012
270,//整个小工具尺寸的宽度
013
014
[
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
//阴影颜色
035
//表示夜晚阴影颜色
036
radius:
3,//阴影大小
037
alpha:
25,//阴影不透明度
038
deltaX:
3,//阴影X偏移
039
deltaY:
3//阴影Y偏移
040
},
041
glow:
{//定义光晕效果
042
//光晕颜色
043
//表示夜晚光晕颜色
044
3,//光晕大小
045
10//光晕不透明度
046
047
},//以上各项从align(包括)起到最后,每一个定义都可以删除,包括嵌套的对象,例如下一个元素就是个最简定义
048
formater:
function(wInfo){//定义格式器,你可以理解为,该元素所要显示的数据从这里取得
049
returnwInfo.location。
//返回地名这里可做自定义操作,例如:
returnwInfo.location+"
中国"
。
能取得哪些数据参见天气数据结构
050
},
051
tip:
function(wInfo){//提示信息,支持两种定义方式,另一种是直接指定文本,例如:
今日天气"
052
053
054
link:
true//外链,支持3种定义方式,true/false:
使用默认的外链,即中国天气主页;
字符串,例如:
回调函数,类似tip,可以自己根据变量拼接外联路径
055
}//一个元素定义结束
056
{//今日天气,这是一个最简化的定义
057
058
059
060
14,
061
062
063
245,
064
74
065
066
function(wInfo){
067
returnwInfo.today.weather+"
+wInfo.today.fl。
068
069
},{//今日图标,这是一个图片类型的元素
070
image"
//这一行制定这个元素是一个图片类型
071
072
//width:
//图片宽度
073
//height:
//图片高度,这两条是图片类型的元素的独有定义,以下各条请参见文本类型
074
075
-10,
076
0
077
//align:
078
0,
079
080
100,
081
082
//shadow:
083
//color:
084
//colorN:
085
//radius:
3,
086
//alpha:
75,
087
//deltaX:
088
//deltaY:
3
089
//},
090
//glow:
091
092
093
094
25
095
//}
096
097
098
returnwInfo.today.weatherImg。
099
100
101
]
102
下面我们来看看天气数据的数据结构:
provider"
:
中国天气"
//提供商,用wInfo.provider获取
fchh"
SunJan1718:
00:
00UTC+08002010"
//发布时间,用wInfo.fchh获取,一般情况下用不上此数据,如果要用的话建议使用newDate(wInfo.fchh),获取一个时间对象,相应的newDate(wInfo.fchh).getHours()就能获取到小时数。
location"
宁波"
//当前城市,用wInfo.location获取
code"
101210401"
//当前城市代码,用wInfo.code获取
postcode"
315000"
//邮政编码,用wInfo.postcode获取
sunup"
06:
50"
//日出时间,用wInfo.sunup获取
sunset"
17:
15"
//日落时间,用wInfo.sunset获取
today"
{//今日天气
tempH"
//白天温度,用wInfo.today.tempH获取
tempL"
2,//夜间温度,用wInfo.today.tempL获取
tempR"
2℃"
//温度范围,用wInfo.today.tempR获取
imgD"
//白天图标,用wInfo.today.imgD获取
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
12,
29
5,
30
12℃~5℃"
31
01"
32
n02"
33
多云"
34
阴"
35
多云转阴"
36
37
38
39
40
41
星期五"
42
43
44
45
next2"
{//后天天天气,获取同上只需要将today改成next2即可,例如:
wInfo.next2.tempH
46
10,
47
48
10℃~3℃"
49
50
n01"
51
52
53
54
55
56
57
58
59
星期六"
60
61
62
63
next3"
{//大后天天天气,获取同上只需要将today改成next3即可,例如:
wInfo.next3.tempH
64
13,
65
66
13℃~5℃"
67
68
69
70
71
72
73
74
75
76
77
星期日"
78
79
80
},"
next4"
{},"
next5"
{}
81
now"
{//实时天气,获取同上只需要将today改成now即可,例如:
wInfo.now.temp
82
time"
16:
10"
//发布时间
83
temp"
14,//当前温度
84
wd"
东南风"
//风向
85
ws"
小于3级"
//风力
86
wse"
<
//风力另一种表达方式
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行,我们发现这么一段:
varc=wInfo.today.weatherImg。
//c="
varexcept="
n00,n01,n03,n04,n05,n13,n18,n29,n30,n31"
.split("
)。
if(!
except.contains(c)){
c=c.replace("
n"
"
if(c=="
00"
||c=="
){
c+="
returnc。
formater的含义,基础篇已经讲过,这是一个数据格式化器,他的作用是获取数据并对数据进行一定的处理,使之符合本风格的要求。
其中我们需要关注的是:
这一段的含义是,n00,n01,n03,n04,n05,n13,n18,n29,n30,n31这几个图标是有白天黑夜的状态区别的,而其他的没有,你不需要理解代码,只需要知道,如果你的风格中有哪几个图标是有白天黑夜状态区别的,那么就把它加到这里来(注意以逗号分隔),你只要简单的复制这段代码即可。
这一段实际上并不需要理会他,不过既然你已经打开了这个文件,那么必然会看到这一段,这里简单解释下
这一段的作用就是对“00”和“n00”两个图标进行单独处理,你会发现这两个图片分别是代表白天和晚上的晴朗,如果直接用到界面上去,你会发现,位置并不是很好,类似这样:
所以我重新制作了这连个图标并分别命名为“00b.png”和“n00b.png”
所以这段代码的作用就是,当天气图标的代码是“00”或者“n00”时,我们分别将他们转化为“00b”和“n00b”,经过处理后,看起来的效果就是这样的:
这样看起来是不是顺眼很多呢:
类似的,所有元素的formater都可以进行类似的配置。
==如何让白天黑夜的文字颜色不同==
现在风格定义中新增了colorN,用以定义夜间预报文字,阴影,光晕的颜色,具体请看基础篇的更新版本。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中国 天气 小工 风格 制作 指南