html怎么连接api vue.js_无论阴晴，因你而乐晴天钟API的使用介绍

 

戳上面蓝字关注我们吧

        全文约4000字 11图。        关 于代码的坑拖了几个月了 ，终于开始填 坑了 。          晴天钟对我来说，也是最开始整的，两年前由于晴天钟官方的app挂了(服务器地址变了)，但自己希望继续用晴天钟，找到了变更后的API，然后靠着自己刚好自学了一点android开发，做了一款。用于平时举办路边天文作参考。后来小程序火起来了，自己也简单做了一版。        不过现在晴天钟不怎么准，主要在看meteoblue和EC的预报。        希望看完这篇至少能够使用晴天钟的图表API，应该简单的~     

简介

晴天钟是一系列天气预测产品的总称，它们主要提取于美国国家大气海洋局/气候环境预测局(NOAA/NCEP)的“全球预测系统”(Global Forecast System, GFS)数值模式。

「即，基于GFS的预报。」

特色

晴天钟与大多数天气网站最大的不同之处在于它提供覆盖全球(不仅仅是主要城市)的气象数据，其水平分辨率高达20公里。换句话说，它每6小时「即一天更新四次」就会提供一次全球150万个地点的预报数据！此外，它提供了易用的应用程序接口(API)，「无需API密钥即可直接使用。」

API为本文需着重介绍的。

使用条款及声明

完全免费且几乎不附带任何条款——「只要不将其用于商业用途」，您可以在不告知本人的情况下自由使用及再发行它们。不过使用时请注意，天气预报不可能100%准确，因此请牢记“责任自负”的原则。

文档说明链接

http://www.7timer.info/doc.php?lang=zh-CN

API

API(Application Programming Interface，应用程序接口)是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

对于很多非IT人士而言，API ≈ 听不懂。其实日常生活中，我们有很多类似API的场景，比如：电脑需要调用手机里面的信息，这时候你会拿一根数据线将电脑手机连接起来，电脑和手机上连接数据线的接口就是传说中的API接口。

「不需要理解API内部的细节，怎么实现该功能的，我们只需要关注怎么使用API。」

如果还是不理解，那跳过这部分。

晴天钟API

提供了两种API：图表API、程序API。

其实图表API可理解为API的一种默认方式，少了output的参数。

天文用途图表及API返回值

不作介绍，可看如下表解释：

1.图表API

调用图表API将会返回类似晴天钟网站所见的预报图表。图表API的地址类似于：

http://www.7timer.info/bin/astro.php?lon=113.17&lat=23.09&ac=0&lang=zh-CN&unit=metric&tzshift=0

返回的图表为PNG格式，所以您可以使用标签来在您的网站中包含它。

如果直接复制上面的链接访问，打开是返回一张图片形式的，东经113.2°，北纬23.1°，高度为0m，下面的时间取决于什么时候更新发布的。

2.程序API

调用程序API将会返回一系列数据，使用XML或JSON格式封装，因此可以直接被程序调用。调用地址类似于：

http://www.7timer.info/bin/astro.php?lon=113.17&lat=23.09&ac=0&lang=en&unit=metric&output=internal&tzshift=0

成功调用程序API需要设置好四个参数：lon、lat对应预报地点的地理坐标，product为所选产品(应为"astro", "civil", "civillight", "meteo" 或"two"其中之一)，以及格式(xml或json)。

• 本文只介绍天文用途的，不对其它产品(民用、民用简化版、气象用图、两周展望)作介绍。

如果直接复制上面的链接访问，打开是返回一张图片形式的。

最直观感受到的是变成了英文界面，其它没有变化。对比两个API差异，在“？”前的网址是一样的，变化的是后面访问的参数。

在区别之前，我们先来看下提供的参数解释。

变量

调用API时，可以根据需求对一些变量进行设置。

lon, lat – 指定地点的经纬度，必须是浮点数，比如+23.090或-23.090，精确到0.001度即可。
ac – 高度改正，只对天文用途产品有效。可取0(默认)、2或7。不适用于程序API。
lang – 语言。对气象用途产品及程序API无效。
unit – 公制或英制。对程序API无效
output – 可设定为internal(图表API)、xml或json(程序API)。
tzshift – 时区微调，可取0、1或-1。对程序API无效。

对比、使用参数

看了上面的解释可能还没有感觉，下面来区别文档提供的两条实例API，我把http://www.7timer.info/bin/astro.php?省略了，只比较参数。

1.lon=113.17&lat=23.09&ac=0&lang=zh-CN&unit=metric&tzshift=0
2.lon=113.17&lat=23.09&ac=0&lang=en&unit=metric&output=internal&tzshift=0

能看到，第二条程序API把lang=zh-CN改为了lang=en，这使得变为了英文界面。另外多了一个参数output=internal。(提一嘴，每个参数之间需要加个&)

下面具体介绍各个参数

lon,lat 经度，纬度

longitude，latitude的前三个字母，返回看lon,lat参数的解释

lon, lat – 指定地点的经纬度，必须是浮点数，比如+23.090或-23.090，精确到0.001度即可。

lon,lat后面的数值，默认正值分别代表为东经度、北纬度，可加可不加+。

如果想查询西经度，南纬度，需要加上-。

最小的度数精确到0.001，即只保留到三位小数，再往后多输入几位小数，最后只显示到三位小数。

lang 语言

lang – 语言。对气象用途产品无效。

如果不加lang参数是英文还中文，默认显示英文。

如果想显示为中文，需要加一句lang=zh-CN，或者把lang=en改为lang=zh-CN。

output 输出形式

这部分可能难理解，进阶可选择json或xml,入门只需使用internal即可。

返回看output参数的解释

output – 可设定为internal(图表API)、xml或json(程序API)。

即，提供了三种输出形式，图表、xml、json。而第一个例子没有加这个输出格式，也返回了图表，我们可以知道如果没有加入output=internal的情况下，默认以图表输出。

如果把internal换成另外两个xml和json格式的，分别是什么样的呢？

output=xml

XML 指可扩展标记语言(eXtensible Markup Language)。XML 被设计用来传输和存储数据。

output=json

JSON 英文全称 JavaScript Object Notation。JSON 为存储和交换文本信息的语法。类似 XML，但JSON 比 XML 更小、更快，更易解析。

如果要用除图表输出之外的，相比XML，更推荐使用JSON。

「为什么有些程序显示的晴天钟不是API图表输出的样子？」

因为他们使用的是JSON或XML输出格式的API，然后根据得到的数值，自己配不同的图标，最后呈现为图的形式。

• 下面的几个参数可以不用管，默认就行。

tzshift  时区微调

tzshift – 时区微调，可取0、1或-1。对程序API无效。

默认为0，时区对应东8时区。如果想查询西2时区，需改为tzshift=-10。

ac 高度改正

ac – 高度改正，只对天文用途产品有效。可取0(默认)、2或7。

可不用管，默认为0，也可取2、7，后面单位为km。输入其它(如3)应该还是显示0km的。如果海拔较高可选择2或7。

unit

unit – 公制或英制。

可加可不加，默认metric

「总结」

我们一定需要的参数为经纬度(lon,lat),若想显示为中文带上lang=zh-CN，其它可不输入，会判别为默认的参数。此外，每个参数的顺序随意。可放前放后，但一定是在?后的。

更改时区加上tzshift，更改输出形式加output，海拔2km+加ac。

http://www.7timer.info/bin/astro.php?lon=113.17&lat=23.09
&lang=zh-CN

利用API开发程序

我使用的API都是图表API，有点懒得搞程序API，UI搞不好，审美不佳。

下面简单罗列自己使用图表API应用在哪些地方。

网页

嵌入到网页中,只需加个img标签,src赋值为图表API的链接。

缺点是固定死了经纬度等参数数值。

稍微进阶些把经纬度作为变量，需要使用Script来实现。本文不作介绍，可能考虑下一次简单介绍。

html>


  "UTF-8">
  7timer


  "http://www.7timer.info/bin/astro.php?lon=113.17&lat=23.09&ac=0&lang=zh-CN&unit=metric&tzshift=0">
  

新建txt文本，把上面的代码复制进去，然后保存，重命名后缀为.html,如命名为7timer.html，双击打开文件以网页的方式呈现，结果为如下图作参考。比较简陋。

Android

2年前正值晴天钟官方app不能用，因为当时晴天钟的服务器地址换了，导致不能使用了。

自己又刚好学了android开发一点点知识，弄这个相对来说不复杂，所以尝试自己开发一个，自己平常打开即能看，方便快捷，主要用于平时举办路边天文的参考。

相对比网页麻烦一些，不能直接加个img标签，另外加上了两种方式，定位、手动输入经纬度。界面比较丑。

小程序

之后小程序火起来了，自己去学了点，然后也做了一版，界面比较丑，还加了clearoutside的图表API，实现原理一样。

如果想访问，可以点击跳转过去。7timer

「最后的最后」

希望看了此文，能看懂及更改图表API的参数。

可能会有下一期。

参考：

• http://www.7timer.info/doc.php?lang=zh-CN
• https://www.zhihu.com/question/38594466
• https://baike.baidu.com/item/api/10154