码迷,mamicode.com
首页 > 其他好文 > 详细

案例:腾讯天气

时间:2020-06-07 21:25:04      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:src   外部   方式   call   body   好的   zh-cn   黑龙江   default   

腾讯天气接口:

  • 请求地址
    • 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是固定写法,后面要追加的属性是自定义的,等号后面才是真正的函数名字。

案例:腾讯天气

标签:src   外部   方式   call   body   好的   zh-cn   黑龙江   default   

原文地址:https://www.cnblogs.com/zcy9838/p/13061305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!