目录
- 步骤1 注册账号并添加产品
- 步骤2 生成插件代码
- 步骤3 使用插件代码
- 其他的天气插件
想在网页中加入一个天气预报，所以最近在尝试各种天气插件，心知天气，如风天气等都可以实现。我在网页中使用的是心知天气，具体的步骤如下：
步骤1 注册账号并添加产品
首先，在心知天气的官网（https://www.seniverse.com/）注册心知天气账号，成为心知天气用户。登录之后，进入【控制台】页面在侧边栏【产品管理】中点击【添加新产品】。
步骤2 生成插件代码
心知天气 V3 插件，会根据用户自己拥有的 API 产品权限的不同，提供不同的功能。权限越大则功能越丰富。因此，需要用户自行选择插件想要绑定的 API 产品。插件数据更新频率取决于 API 数据更新频率。登录之后，进入【控制台】页面，点击侧边栏【新版插件】。
点击【新版插件】。
在【配置密钥】一栏中选择产品，并选择一个与之对应的产品公钥
在【配置插件】一栏中，会根据【配置密钥】中所选产品的不同权限，生成相应的插件配置项，您可以根据需求组合不同的插件配置。
点击【生成代码】获取插件代码。
步骤3 使用插件代码
新建一个 index.html 页面，并添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 将生成的代码复制到此处↓↓↓ -->
</body>
</html>
提示：在生成的插件代码中，默认 DOM 的插入位置为：<div id="tp-weather-widget"></div>，【浮动气泡】插件不受该 DOM 位置的影响，【固定极简】插件会插入到此 DOM 所在位置。
将上一步【获取插件代码】中生成的代码复制到 <!-- 将生成的代码复制到此处↓↓↓ -->下方，并保存。
在控制台输入:
npx http-server -p 3000
启动一个简单的 http 服务器，并打开 http://localhost:3000 查看插件效果。
【注意】：只有在服务器环境下才能查看到效果！！！
具体的文档参见官方文档。https://docs.seniverse.com/widget/start/get.html。
其他的天气插件
- 心知天气
文档：https://docs.seniverse.com/api/start/start.html - 和风天气
文档：https://dev.heweather.com/docs/getting-started/ - 天气网
实例：http://www.tianqi.com/dingzhi/ - 天气API
文档：https://www.tianqiapi.com/?action=v1
