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"// 气压
    }
}

基本上就差不多了,剩下的就是不断的调试了,祝大家做出自己满意的风格来,同时也可以把你的独一无二的风格打包出来供大家使用:)

posted @ 2010-01-14 21:21  阿干@NET  阅读(20225)  评论(18编辑  收藏  举报