这个小插件实现的是通过IP地址检索到所在城市，然后获取到城市的天气信息，再在页面显示。
首先要找一个可用的天气API，经过搜索，用了是心知天气API，这个API文档详细，免费用户提供了当日和未来两天的天气预报，还有基本的生活指数和精美的天气图片，基本满足要求。查看心知天气API文档
天气信息
一、请求方式
其实半年前学习前端的时候就写好了，当时用的是ajax方式请求，不清楚各种请求的机制，也忘了环境是怎么搭建的，反正就是能调试出来。结果这两天再打开就不行了，于是等于又重新写了一遍。
- 使用新浪的ip查询API来获取城市
新浪提供的是这样的网址
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
返回的是类似这样的数据：
var remote_ip_info = {"ret":1,"start":-1,"end":-1,"country":"中国","province":"海南","city":"海口","district":"","isp":"","type":"","desc":""};
不知道怎么回事用ajax方式访问总是不成功，后来折腾了好久发现直接在html文件里用scrip的src直接就能取到数据，在当前环境使用remote_ip_info，这样看起是jsonp的方式吧，可是当想用动态生成script标签的方式来访问时又获取不到了，一头雾水，搞不清楚原因，只能先直接引用着。
-
使用jsonp方式获取天气数据
得到城市地址后，可以从心知天气获取天气信息了。
惯例先用ajax，这次是在本地搭建了个apache服务器，出错显示无法跨域，于是查看文档，文档说可以使用jsonp方式，这个好办，直接copy文档的例子进行使用，结果还是遇到几个小坑，首先就是签名认证。
二、签名认证
心知天气使用jsonp必须要签名认证，按照文档要求在网上下载了CryptoJS库进行加密，因为不了解这个库，折腾了一会儿，使用到了这俩函数
CryptoJS.HmacSHA1(str, key)
CryptoJS.enc.Base64
认证成功了，一访问还是出错，又继续看文档，原来还要域名绑定，我又没有买域名绑定啥啊，想想把在本机apache上定义的虚拟域名填上去，不知道是不是这个原因，终于能访问了。
接下来就是对取得的数据进行格式化输出。
三、页面样式布局
这一步也花了不少时间，先在天气网站找了个好看的素材套用，然后对每个组件进行细调。
- 让某个div元素在页面中水平居中
.div{
width:300px;
height:300px;
border:1px solid #dfdfdf
margin: 0 auto;
}
进阶学习：关于在页面垂直居中的方法
- 雪碧图的使用
进阶学习：利用CSS定位背景图片
四、其它小问题
- 浏览器不刷新问题
调试需要每次对页面的小改变都能体现在浏览器上，但是用chrome每次刷新都不能即时反映改变，有时是页面内容不变，有时是脚本内容不变，其实也知道是浏览器缓存问题，但是按照网上的方法把缓存选项去掉了还是没用，使用在网址后面加上一个变化的参数来进行刷新也没有显著效果，导致每次想看改动效果都要在页面某处输入一些随机文字来让页面刷新，有时候这样也不顶用，只能关掉浏览器再重开。
网友评论