案例:腾讯天气
Posted zcy9838
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了案例:腾讯天气相关的知识,希望对你有一定的参考价值。
腾讯天气接口:
- 请求地址
- https://wis.qq.com/weather/common
- 请求方式
- get支持jsonp
- 参数
参数名 | 必选 | 类型 | 说明 |
source | 是 | string | pc、xw |
weather_type | 是 | string |
forecast_1h 未来48小时 forecast_24h 未来7天 |
province | 是 | string | 省份 |
city | 是 | string | 城市 |
- 返回值
{ "data": { // 逐时天气(48小时) "forecast_1h":{ ‘0‘: { "degree": "7", // 温度 "update_time": "202006070000", // 时间 "weather": "晴", //天气名称 "weather_code": "00", // 天气码 "weather_short": "晴", // 天气简要名称 "wind_direction": "南风", // 风向 "wind_power": "3" // 风力级别 } } }, "message": "OK", "status": 200 }
具体实现代码如下:
<title>使用jsonp获取腾讯天气信息</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"> <style type="text/css"> .container { padding-top: 60px; } </style>
<div class="container"> <table class="table table-striped table-hover" align="center" id="box"></table> </div> <!-- 引入自己封装好的jsonp文件 --> <script src="/js/jsonp.js"></script> <!-- 引入下载好的模板引擎文件, 下载网址:https://aui.github.io/art-template/zh-cn/index.html --> <script src="/js/template-web.js"></script> <!-- 模板 --> <script type="text/html" id="tpl"> <tr> <th>时间</th> <th>温度</th> <th>天气</th> <th>风向</th> <th>风力</th> </tr> {{each info}} <tr> <td>{{dateFormat($value.update_time)}}</td> <td>{{$value.degree}}</td> <td>{{$value.weather}}</td> <td>{{$value.wind_direction}}</td> <td>{{$value.wind_power}}</td> </tr> {{/each}} </script>
自己封装好的jsonp.js文件:
function jsonp (options) { // 动态创建script标签 var script = document.createElement(‘script‘); // 拼接字符串的变量 var params = ‘‘; for (var attr in options.data) { params += ‘&‘ + attr + ‘=‘ + options.data[attr]; } // myJsonp0124741 var fnName = ‘myJsonp‘ + Math.random().toString().replace(‘.‘, ‘‘); // 它已经不是一个全局函数了 // 我们要想办法将它变成全局函数 window[fnName] = options.success; // 为script标签添加src属性 script.src = options.url + ‘?callback=‘ + fnName + params; // 将script标签追加到页面中 document.body.appendChild(script); // 为script标签添加onload事件 script.onload = function () { document.body.removeChild(script); } }
<script> // 获取table标签 var box = document.getElementById(‘box‘); function dateFormat(date) { var year = date.substr(0, 4); var month = date.substr(4, 2); var day = date.substr(6, 2); var hour = date.substr(8, 2); var minute = date.substr(10, 2); var seconds = date.substr(12, 2); return year + ‘年‘ + month + ‘月‘ + day + ‘日‘ + hour + ‘时‘ + minute + ‘分‘ + seconds + ‘秒‘; } // 向模板中开放外部变量 template.defaults.imports.dateFormat = dateFormat; // 向服务器端获取天气信息 jsonp({ url: ‘https://wis.qq.com/weather/common‘, data: { source: ‘pc‘, weather_type: ‘forecast_1h‘, // weather_type: ‘forecast_1h|forecast_24h‘, province: ‘黑龙江省‘, city: ‘哈尔滨市‘ }, success: function (data) { var html = template(‘tpl‘, {info: data.data.forecast_1h}); box.innerHTML = html; } }) </script>
获取到的日期格式如上,并不是我们想要的,因此需要修改日期的格式。注意,需要将处理函数开放到模板中,前面的template.defaults.imports是固定写法,后面要追加的属性是自定义的,等号后面才是真正的函数名字。
以上是关于案例:腾讯天气的主要内容,如果未能解决你的问题,请参考以下文章