使用jsonp获取腾讯天气

2024-03-08 22:42:22

1、使用express框架搭建服务器（使用命令下载npm install express）

const express = require('express');

2、路径处理

const path = require('path');

3、创建静态资源访问

app.use(express.static(path.join(__dirname, 'public')));

4、端口监听

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

5、引入bootsstrap框架使页面更美观
6、引入模板引擎template-web.js
使用模板引擎提供的模板语法，可以将数据和html拼接起来

封装jsonp文件

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);
    }
}

书写代码案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用jsonp获取腾讯天气信息</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box">

        </table>
    </div>
    <script src="/js/jsonp.js"></script>
    <!-- 模板引擎 -->
    <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>
    <script>
        // 获取table标签
        var box = document.getElementById('box');

        // 时间格式拼接
        function dateFormat(date) {
            // console.log(date);
            // return 12;
            var year = date.substr(0, 4);
            var month = date.substr(4, 2);
            var data = 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 + '月' + data + '日' + hour + '时' + minute + '分' + seconds + '秒';
        }



        // 向模板中开放外部变量
        // 向模板中script开放外部变量（dateFormat 第一个追加属性自定义，第二个调用函数名字）
        template.defaults.imports.dateFormat = dateFormat;
        // 向服务器端获取天气
        jsonp({
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h',
                province: '黑龙江省',
                city: '哈尔滨市'
            },
            success: function(data) {
                var html = template('tpl', {
                    info: data.data.forecast_1h
                });
                // console.log(html);
                box.innerHTML = html;
            }
        })
    </script>
</body>

</html>

码农公寓

相关文章