案例：腾讯天气

Posted 2020-12-09 zcy9838

腾讯天气接口：

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