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

【注意，有些参数已失效或改变，但还没有在这里写上去，等有空了写】首先小工具版本必须是1.5.1.0以上，低于这个版本是不支持这个功能的。

“中国天气”下载请移步：Win7小工具“中国天气”其次，先来普及一下基础知识：JSON：教条式的定义就不说了，这里只告诉大家如何最简单的写出符合规则的JSON数据（小工具的风格定义以JSON为基础）。

“[]”表示一个数组，里面的内容以逗号分隔，比如“["aa","bb","cc"]”就是一个标准的数组。

“{}”表示一个对象，里面的内容以键值对的形式出现，例如下面一段：2name: "zjfeiye",3age: 29,4email: "zjfeiye@",5website: ""6}可以看出，实际上每个键值对的键和值由冒号分隔，而键值对则由逗号分隔，请注意，最后一行，不需要以逗号结尾，同时要注意不要把标点写成中文标点两者是可以相互嵌套的，例如下面这段：1{2a: "a",3b: ["1","2","3"],4c: {5d: "d"6}7}89[{a:"a"},{b:"b"},{c:"c"}]基础到此为止。

下面开始制作：首先找到风格文件夹，一般位于：C:\Users\[YourName]\AppData\Local\Microsoft\ Windows Sidebar\Gadgets\XCN Weather.Gadget\styles要制作风格，首先要有一套图标，按照命名规则命名好每一个图标，要注意图标最好是一样尺寸的，每个图标代表的含义见此：天气图例同时如果你希望有背景，那么还需要制作一张背景图片。

第一步：给自己的风格起一个独一无二的代号，尽量不要跟别人重名，例如：“myStyl e”，在“styles”下建立一个以代号为文件名的JS文件，这里是：“myStyle.style.js”，注意必须以“.style.js”结尾，这是一个约定。

第二步：在“styles”下建立一个文件夹，例如：“myStyle”，将你准备好的图标放进去。

第三步：使用记事本或其他纯文本编辑工具编辑“myStyle.style.js”，首先架构起一个大概的轮廓：01//addStyle表示添加一个风格02addStyle({03name: "myStyle", //表示风格代号,必须跟文件名相同04version: "1.0.1.0",// 表示风格版本号05displayName: "默认风格", //风格显示名称，显示在配置面板中06author: "阿干", //风格作者07email: "zjfeiye@", //作者邮件（可不写，整行去掉）08website: "", //作者主页（可不写，整行去掉）09folder: "default", //风格使用的图片的存放目录，就是第二步所建立的文件夹名10bg: "bg", //所使用的背景图片的文件名，必须为PNG格式，不用带扩展名11width: 270, //整个小工具尺寸的宽度，一般就是背景图的高宽12height: 220, //整个小工具尺寸的高度13items: []//用来定义所要显示的元素14})。

这样，一个最基本的结构就定义好了，这时候，如果重启小工具你就已经能在配置面板中看到这个风格了，当然，如果你现在选中他的话，不会显示任何东西，因为刚才的最后一条“需要显示的元素”还没有定义。

下面我们尝试定义2个元素，也是2种不同类型的元素，图片和文本：001//addStyle表示添加一个风格002// “//”表示它后面的代码不起作用，即注释，你如果希望那个定义不要气作用，在他前面加上“//”或者删除该行即可，但是一定要注意检查逗号，不要少了或者多了！003addStyle({004name: "myStyle", //表示风格代号,必须跟文件名相同005version: "1.0.1.0",//表示风格版本号006displayName: "默认风格", //风格显示名称，显示在配置面板中007author: "阿干", //风格作者008email: "zjfeiye@", //作者邮件（可不写，整行去掉）009website: "", //作者主页（可不写，整行去掉）010folder: "default", //风格使用的图片的存放目录，就是第二步所建立的文件夹名011bg: "bg", //所使用的背景图片的文件名，必须为PNG格式，不用带扩展名012width: 270, //整个小工具尺寸的宽度013height: 220, //整个小工具尺寸的高度014items: [015{ // 一对{}之间是一个元素，多个元素用逗号分隔，这个元素以地名为例016type: "text", //表示这个元素是文本017options: {//options表示元素属性，是一个嵌套的对象018font: "微软雅黑", //表示所使用的字体019fontsize: 36, //表示字体大小020color: "White", //表示文字颜色021colorN: "Black", //表示夜晚字体颜色，以上4条为文本类型独有属性022023left: 265, //距离小工具左侧距离，即坐标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: {//定义阴影效果034color: "Black", //阴影颜色035colorN: "White", //表示夜晚阴影颜色036radius: 3, //阴影大小037alpha: 25, //阴影不透明度038deltaX: 3, //阴影X偏移039deltaY: 3//阴影Y偏移040},041glow: {//定义光晕效果042color: "Black", //光晕颜色043colorN: "White", //表示夜晚光晕颜色044radius: 3, //光晕大小045alpha: 10//光晕不透明度046}047}, //以上各项从align（包括）起到最后，每一个定义都可以删除，包括嵌套的对象，例如下一个元素就是个最简定义048formater: function(wInfo) {//定义格式器，你可以理解为，该元素所要显示的数据从这里取得049returnwInfo.location。

//返回地名这里可做自定义操作，例如：return wInfo.location+",中国"。

能取得哪些数据参见天气数据结构050},051tip: function(wInfo) {//提示信息，支持两种定义方式，另一种是直接指定文本，例如：tip: "今日天气"052returnwInfo.location。

053},054link: true//外链，支持3种定义方式，true/false:使用默认的外链，即中国天气主页；字符串，例如: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。

068}069}, {// 今日图标，这是一个图片类型的元素070type: "image", //这一行制定这个元素是一个图片类型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// deltaY: 3089//},090//glow: {091// color: "Black",092// colorN: "White", //表示夜晚光晕颜色093// radius: 3,094// alpha: 25095//}096},097formater: function(wInfo) {098returnwInfo.today.weatherImg。