使用jsonp获取天气预报

最新推荐文章于 2024-08-02 18:27:48 发布

小星star

最新推荐文章于 2024-08-02 18:27:48 发布

阅读量2.2k

点赞数 1

分类专栏：前端基础文章标签： jsonp 免费天气api jsonp获取心知天心知天气秘钥加密 jsonp-天气预报

本文链接：https://blog.csdn.net/qq_40154925/article/details/78477758

版权

本文介绍了如何利用jsonp技术获取心知天气的免费实时天气预报数据。在实践中，作者遇到了心知天气API的秘钥需要通过HMAC-SHA1加密的问题，并提供了解决方法，包括从网盘下载相关JS文件的步骤。最后，给出了完成此功能的代码示例。

摘要由CSDN通过智能技术生成

学完了jsonp后，总有种想用一下的冲动，于是上网找了一下天气api的接口，找了很久，终于找到了免费的，而且数据会实时更新。

我找到的这个就是心知天气，它提供免费的天气接口，可以让我来练一下手。

在练习的过程中，也碰到了许多坑。

比如，心知提供的秘钥还得经过HMAC-SHA1加密（谁叫咱是免费使用的），这个坑我进去了好久才爬出来，大家可以去我的网盘（密码：cpu3）进行下载，下载好了先引入jQ文件，然后再按次序引入如下几个文件。

1. core.js
2. cipher-core.js
3. enc-base64.js
4. hmac.js
5. sha1.js

引入完成后便可进行自己的代码块的编写。附上完整小demo代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <title></title>
        <style type="text/css">
            *{
    margin:0;padding:0;box-sizing: border-box;}
            body{
    font-size:14px;}
            .container{
                width: 100%;
                min-width: 320px;
                max-width: 640px;
                margin: 0 auto;
            }
            .weather{
                clear: both;
                width: 100%;
                max-width: 640px;
                min-width: 320px;
                height: 300px;
                background: linear-gradient(to top, lightblue ,rgb(34, 174, 230));
                border-radius: 5px;
                padding: 10px;
                letter-spacing: 1px;
                color: #fff;
                position: relative;
            }
            .weather_now{
                text-align: center;
                /*margin: 10px 0;*/
                width: 100%;

最低0.47元/天解锁文章

小星star

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jsonp获取天气预报

学完了jsonp后，总有种想用一下的冲动，于是上网找了一下天气api的接口，找了很久，终于找到了免费的，而且数据会实时更新。我找到的这个就是心知天气，它提供免费的天气接口，可以让我来练一下手。在练习的过程中，也碰到了许多坑。比如，心知提供的秘钥还得经过HMAC-SHA1加密（谁叫咱是免费使用的），这个坑我进去了好久才爬出来，大家可以去我的网盘（密码：cpu3）进行下载，下载好了先引入jQ文件，然后再
复制链接

扫一扫

专栏目录