Win 7小工具“中国天气”，风格制作指南（基础）
== 系列文章目录 ==
【注意，有些参数已失效或改变，但还没有在这里写上去，等有空了写】
首先小工具版本必须是1.5.1.0以上，低于这个版本是不支持这个功能的。
“中国天气”下载请移步：Win7小工具“中国天气”
其次，先来普及一下基础知识：
JSON：教条式的定义就不说了，这里只告诉大家如何最简单的写出符合规则的JSON数据（小工具的风格定义以JSON为基础）。
“[]”表示一个数组，里面的内容以逗号分隔，比如“["aa","bb","cc"]”就是一个标准的数组。
“{}”表示一个对象，里面的内容以键值对的形式出现，例如下面一段：
{
name: "zjfeiye",
age: 29,
email: "zjfeiye@hotmail.com",
website: "http://zjfeiye.cnblogs.com"
}
可以看出，实际上每个键值对的键和值由冒号分隔，而键值对则由逗号分隔，请注意，最后一行，不需要以逗号结尾，同时要注意不要把标点写成中文标点
两者是可以相互嵌套的，例如下面这段：
{
a: "a",
b: ["1","2","3"],
c: {
d: "d"
}
}
[{a:"a"},{b:"b"},{c:"c"}]
基础到此为止。
下面开始制作：
首先找到风格文件夹，一般位于：C:\Users\[YourName]\AppData\Local\Microsoft\Windows Sidebar\Gadgets\XCN Weather.Gadget\styles
要制作风格，首先要有一套图标，按照命名规则命名好每一个图标，要注意图标最好是一样尺寸的，每个图标代表的含义见此：天气图例
同时如果你希望有背景，那么还需要制作一张背景图片。
第一步：给自己的风格起一个独一无二的代号，尽量不要跟别人重名，例如：“myStyle”，在“styles”下建立一个以代号为文件名的JS文件，这里是：“myStyle.style.js”，注意必须以“.style.js”结尾，这是一个约定。
第二步：在“styles”下建立一个文件夹，例如：“myStyle”，将你准备好的图标放进去。
第三步：使用记事本或其他纯文本编辑工具编辑“myStyle.style.js”，首先架构起一个大概的轮廓：
//addStyle表示添加一个风格 addStyle({ name: "myStyle", //表示风格代号,必须跟文件名相同 version: "1.0.1.0",// 表示风格版本号 displayName: "默认风格", //风格显示名称，显示在配置面板中 author: "阿干", //风格作者 email: "zjfeiye@hotmail.com", //作者邮件（可不写，整行去掉） website: "http://zjfeiye.cnblogs.com", //作者主页（可不写，整行去掉） folder: "default", //风格使用的图片的存放目录，就是第二步所建立的文件夹名 bg: "bg", //所使用的背景图片的文件名，必须为PNG格式，不用带扩展名 width: 270, //整个小工具尺寸的宽度，一般就是背景图的高宽 height: 220, //整个小工具尺寸的高度 items: []//用来定义所要显示的元素 });
这样，一个最基本的结构就定义好了，这时候，如果重启小工具你就已经能在配置面板中看到这个风格了，当然，如果你现在选中他的话，不会显示任何东西，因为刚才的最后一条“需要显示的元素”还没有定义。
下面我们尝试定义2个元素，也是2种不同类型的元素，图片和文本：
//addStyle表示添加一个风格
// “//”表示它后面的代码不起作用，即注释，你如果希望那个定义不要气作用，在他前面加上“//”或者删除该行即可，但是一定要注意检查逗号，不要少了或者多了！
addStyle({
name: "myStyle", //表示风格代号,必须跟文件名相同
version: "1.0.1.0",//表示风格版本号
displayName: "默认风格", //风格显示名称，显示在配置面板中
author: "阿干", //风格作者
email: "zjfeiye@hotmail.com", //作者邮件（可不写，整行去掉）
website: "http://zjfeiye.cnblogs.com", //作者主页（可不写，整行去掉）
folder: "default", //风格使用的图片的存放目录，就是第二步所建立的文件夹名
bg: "bg", //所使用的背景图片的文件名，必须为PNG格式，不用带扩展名
width: 270, //整个小工具尺寸的宽度
height: 220, //整个小工具尺寸的高度
items: [
{ // 一对{}之间是一个元素，多个元素用逗号分隔，这个元素以地名为例
type: "text", //表示这个元素是文本
options: {//options表示元素属性，是一个嵌套的对象
font: "微软雅黑", //表示所使用的字体
fontsize: 36, //表示字体大小
color: "White", //表示文字颜色
colorN: "Black", //表示夜晚字体颜色，以上4条为文本类型独有属性
left: 265, //距离小工具左侧距离，即坐标X
top: 20, //距离小工具顶部距离，即坐标Y
align: "right", //对齐方式，“left”，“right”,“center”，
//为“left”时：上面left的定义为从小工具最左侧到文本最左侧
//为“right”时：left的定义从小工具最左侧到文本最右侧
//为“center”时：left的定义从小工具最左侧到文本中心
//blur: 0, //模糊值0-100
//brightness: 0,//亮度，这个参数我自己也整不大明白：（
//opacity: 100,//不透明度0-100
//rotation: 0,//角度
shadow: {//定义阴影效果
color: "Black", //阴影颜色
colorN: "White", //表示夜晚阴影颜色
radius: 3, //阴影大小
alpha: 25, //阴影不透明度
deltaX: 3, //阴影X偏移
deltaY: 3//阴影Y偏移
},
glow: {//定义光晕效果
color: "Black", //光晕颜色
colorN: "White", //表示夜晚光晕颜色
radius: 3, //光晕大小
alpha: 10//光晕不透明度
}
}, //以上各项从align（包括）起到最后，每一个定义都可以删除，包括嵌套的对象，例如下一个元素就是个最简定义
formater: function(wInfo) {//定义格式器，你可以理解为，该元素所要显示的数据从这里取得
return wInfo.location; //返回地名这里可做自定义操作，例如：return wInfo.location+",中国";能取得哪些数据参见天气数据结构
},
tip: function(wInfo) {//提示信息，支持两种定义方式，另一种是直接指定文本，例如：tip: "今日天气"
return wInfo.location;
},
link: true//外链，支持3种定义方式，true/false:使用默认的外链，即中国天气主页；字符串，例如:link:"http://zjfeiye.cnblogs.com";回调函数，类似tip，可以自己根据变量拼接外联路径
}//一个元素定义结束
, {// 今日天气，这是一个最简化的定义
type: "text",
options: {
font: "微软雅黑",
fontsize: 14,
color: "White",
left: 245,
top: 74
},
formater: function(wInfo) {
return wInfo.today.weather + "," + wInfo.today.fl;
}
}, {// 今日图标，这是一个图片类型的元素
type: "image", //这一行制定这个元素是一个图片类型
options: {
//width: ,//图片宽度
//height: ,//图片高度，这两条是图片类型的元素的独有定义，以下各条请参见文本类型
left: -10,
top: 0
//align: "right",
//blur: 0,
//brightness: 0,
//opacity: 100,
//rotation: 0,
//shadow: {
// color: "Black",
// colorN: "White", //表示夜晚阴影颜色
// radius: 3,
// alpha: 75,
// deltaX: 3,
// deltaY: 3
//},
//glow: {
// color: "Black",
// colorN: "White", //表示夜晚光晕颜色
// radius: 3,
// alpha: 25
//}
},
formater: function(wInfo) {
return wInfo.today.weatherImg;
}
}
]
});
下面我们来看看天气数据的数据结构：
{
"provider": "中国天气", //提供商，用wInfo.provider获取
"fchh": "Sun Jan 17 18:00:00 UTC+0800 2010", //发布时间，用wInfo.fchh获取，一般情况下用不上此数据，如果要用的话建议使用new Date(wInfo.fchh)，获取一个时间对象，相应的new Date(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获取
"weatherD": "", //白天天气，用wInfo.today.imgDT获取
"weatherN": "晴", //夜间天气，用wInfo.today.imgNT获取
"weather": "晴转多云", //天气情况，用wInfo.today.weather获取
"weatherImg": "n0", //天气图标，用wInfo.today.weatherImg获取
"flD": "", //白天风力，用wInfo.today.flD获取
"flN": "微风", //夜间风力，用wInfo.today.flN获取
"fxD": "", //白天风向，用wInfo.today.fxD获取
"fxN": "无持续风向", //夜间风向，用wInfo.today.fxN获取
"week": "星期四", //星期，用wInfo.today.week获取
"fl": "微风", //今日风力，用wInfo.today.fl获取
"fx": "无持续风向"//今日风向，用wInfo.today.fx获取
},
"next1": {// 明天天气，获取同上只需要将today改成next1即可，例如：wInfo.next1.tempH
"tempH": 12,
"tempL": 5,
"tempR": "12℃~5℃",
"imgD": "01",
"imgN": "n02",
"weatherD": "多云",
"weatherN": "阴",
"weather": "多云转阴",
"weatherImg": "1",
"flD": "微风",
"flN": "微风",
"fxD": "无持续风向",
"fxN": "无持续风向",
"week": "星期五",
"fl": "微风",
"fx": "无持续风向"
},
"next2": {// 后天天天气，获取同上只需要将today改成next2即可，例如：wInfo.next2.tempH
"tempH": 10,
"tempL": 3,
"tempR": "10℃~3℃",
"imgD": "01",
"imgN": "n01",
"weatherD": "多云",
"weatherN": "多云",
"weather": "多云",
"weatherImg": "1",
"flD": "微风",
"flN": "微风",
"fxD": "无持续风向",
"fxN": "无持续风向",
"week": "星期六",
"fl": "微风",
"fx": "无持续风向"
},
"next3": {// 大后天天天气，获取同上只需要将today改成next3即可，例如：wInfo.next3.tempH
"tempH": 13,
"tempL": 5,
"tempR": "13℃~5℃",
"imgD": "01",
"imgN": "n01",
"weatherD": "多云",
"weatherN": "多云",
"weather": "多云",
"weatherImg": "1",
"flD": "微风",
"flN": "微风",
"fxD": "无持续风向",
"fxN": "无持续风向",
"week": "星期日",
"fl": "微风",
"fx": "无持续风向"
},"next4":{},"next5":{}
"now": {// 实时天气，获取同上只需要将today改成now即可，例如：wInfo.now.temp
"time":"16:10", // 发布时间
"temp":14, // 当前温度
"wd":"东南风",// 风向
"ws":"小于3级",// 风力
"wse":"<3",// 风力另一种表达方式
"sd":"54%",//湿度
"ap":"1025.1hPa"// 气压
}
}
基本上就差不多了，剩下的就是不断的调试了，祝大家做出自己满意的风格来，同时也可以把你的独一无二的风格打包出来供大家使用：）
浙公网安备 33010602011771号