前端免费高效的接入天气组件（天气网），控制组件的样式

CV艺术家2026-06-12 17:32

在天气网的官网中提供了对应的组件样式，样式多种支持。

有两种配置方式：

1.自定义城市天气：

在前端嵌入对应的iframe

XML 复制代码

<iframe width="400" height="100" src="https://i.tianqi.com/?c=code&a=getcode&id=35&py=shanghai&site=34&icon=1" frameborder="0"></iframe>

这里的py对应的参数就是城市，这个可以从后端获取。

2.自动通过ip获取当前所在城市的天气：

XML 复制代码

<iframe width="400" height="100" src="https://i.tianqi.com/?c=code&a=getcode&id=35&site=34&icon=1" frameborder="0"></iframe>

其他参数说明：

id: 官网组件中的对应具体组件样式的id

site：显示的字体大小

color：显示的文本颜色（%23FFFFFF），这个的颜色#要用%23代替，不然可能不生效。

border:solid 1px #7ec8ea 边框的设置

icon:对应天气样式的图标风格。

可以再需要的地方进行配置就可以显示了。