为你的网站加上和风天气插件

最新推荐文章于 2024-01-23 09:43:53 发布
最新推荐文章于 2024-01-23 09:43:53 发布
阅读量1.4k 收藏 3
点赞数 3
文章标签： servlet javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71327177/article/details/126786434
版权

天气跟我们的生活也是息息相关，所以今天就分享一个完全免费可自定义的天气插件，适配你的网站、APP、小程序、公众号均可使用，同时还配有多种不同的展示效果选择。

效果图

免配置代码

 

<div id="he-plugin-standard"></div>
 

<script>
 

WIDGET = {
 
 

"CONFIG": {
 
 

"layout": "2",
 

"width": 280,
 

"height": 320,
 

"background": "1",
 

"dataColor": "FFFFFF",
 

"key": "e9171275bb8b4c13a1c6d7b49f8b7ae6"
 

}
 

}
 

</script>
 

<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
 

使用教程
 

1、 打开官网： 

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  一个乖乖码字的程序猪
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
和风天气简约插件乱码解决

				
			

			

				

					12-15
				

			

		

		

			
				
1、he-simple.js中文乱码全部修改； 2、该插件鼠标hover时没有设置z-index，已在第2882行添加（"z-index": 99,）。

			
		

	



                

              
                



	

		

			

				
					
和风天气城市代码.xls

				
			

			

				

					11-22
				

			

		

		

			
				
和风天气免费api的城市代码列表，用于本地检索，也可以自建本地数据库，需要的自己下载。获取天气预报数据

			
		

	



                


  
              

                


	

		

			

				
					
在web网页中加入天气

				
			

			

				

					qq_38842742的博客
				

				

					12-03
					
					4552
					
				

			

		

		

			
				
1、现在有很多网站已经给我们提供了很多很好的API供我们使用，有些是收费的，有些是免费的，根据项目要求和经济实力，各取所需吧。
2、这里取用一个免费的API，在网页中加入下面一段代码，就可以在网页上加入一个天气预报了
3、将这个代码放入div中，可以对其位置进行设置
&lt;iframe scrolling="no" frameborder="0" allowtransparency="true"...

			
		

	





	

		

			

				
					
H5 实现天气效果(心知天气插件)

					
热门推荐

				
			

			

				

					朝花夕拾的博客
				

				

					07-13
					
					2万+
					
				

			

		

		

			
				
先上效果图



鼠标移上去的效果展示

核心代码如下：



(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[..

			
		

	



		

			
		



	

		

			

				
					
web网页添加天气插件（心知天气）

				
			

			

				

					Serena_tz的博客
				

				

					04-19
					
					6247
					
				

			

		

		

			
				
想在网页中加入一个天气预报，所以最近在尝试各种天气插件，心知天气，如风天气等都可以实现。我在网页中使用的是心知天气，具体的步骤如下：
步骤1 注册账号并添加产品
首先，在心知天气的官网（https://www.seniverse.com/）注册心知天气账号，成为心知天气用户。登录之后，进入【控制台】页面在侧边栏【产品管理】中点击【添加新产品】。

步骤2 生成插件代码
心知天气 V3 插件，会根据用户自己拥有的 API 产品权限的不同，提供不同的功能。权限越大则功能越丰富。因此，需要用户自行选择插件想要绑定

			
		

	





	

		

			

				
					
如何在 html 中插入天气插件

				
			

			

				

					雾隐雾现的至渝博客
				

				

					05-11
					
					2万+
					
				

			

		

		

			
				
背景
          之前的方法图片形式对中文的支持不太好，  如何获取某个城市的天气小图标插入到自己的网页中，js 形式又有点缺陷，不知道为啥子，懒得弄，所以就换了一个心知天气的接口；
步骤

进入插件的自定义平台  https://www.seniverse.com/widgetv3，没有的话，先注册登录，选择控制台，新版插件。就能看到了，一般要让你先买个免费服务拿到 token
自定义的时候，如果你打算只放一个，而且固定在屏幕上，那浮动气泡加可展开是个不错的

			
		

	





	

		

			

				
					
给Typecho加上心知天气-网页天气插件

					
最新发布

				
			

			

				

					blog.jichun29.cn
				

				

					01-23
					
					462
					
				

			

		

		

			
				
【代码】给Typecho加上心知天气-网页天气插件。

			
		

	





	

		

			

				
					
vue中使用天气插件

				
			

			

				

					VIVI_CSDN01的博客
				

				

					06-14
					
					1399
					
				

			

		

		

			
				
vue中使用天气插件

			
		

	





	

		

			

				
					
ESP32获取和风天气

				
			

			

				

					05-21
				

			

		

		

			
				
在本项目中，我们将探讨如何利用ESP32通过Arduino IDE获取和风天气网（Aqicn.org）提供的实时天气数据。这个过程涉及到网络编程、JSON解析以及与API接口的交互。  首先，你需要在Arduino IDE中安装ESP32的开发库。...

			
		

	





	

		

			

				
					
微信小程序精品demo：和风天气：天气API，设置城市；适用1122(源代码+截图)

				
			

			

				

					06-19
				

			

		

		

			
				
微信小程序精品demo：和风天气：天气API，设置城市；适用1122(源代码+截图)微信小程序精品demo：和风天气：天气API，设置城市；适用1122(源代码+截图)微信小程序精品demo：和风天气：天气API，设置城市；适用1122(源...

			
		

	





	

		

			

				
					
机器人天气插件

				
			

			

				

					02-03
				

			

		

		

			
				
机器人天气插件放入酷Q机器人里即可查询天气

			
		

	





	

		

			

				
					
和风天气预报城市IDxlsx.xlsx

				
			

			

				

					12-31
				

			

		

		

			
				
和风天气预报城市ID修正版，上一次放上去的不全，这次更新后再放，需要的可以下载查看，格式已经转了一下

			
		

	





	

		

			

				
					
和风天气插件的运用--以及运用高德地图自动获取当前省市位置信息

				
			

			

				

					xin的博客
				

				

					03-29
					
					1695
					
				

			

		

		

			
				
和风天气插件的运用
地址：https://widget.qweather.com/create-standard/
<div id="he-plugin-standard"></div>

const changeOrider = window.outerWidth / 750 * 686
window.WIDGET = {
    CONFIG: {
        layout: '1',
        width: changeOrider,
        height: 

			
		

	





	

		

			

				
					
天气插件11

				
			

			

				

					m0_47999208的博客
				

				

					01-19
					
					473
					
				

			

		

		

			
				
【代码】天气插件11。

			
		

	





	

		

			

				
					
vue 天气插件 —— 创建标准版天气插件的使用——基础积累

				
			

			

				

					yehaocheng520的博客
				

				

					05-09
					
					5687
					
				

			

		

		

			
				
vue 天气插件 —— 创建标准版天气插件的使用

			
		

	





	

		

			

				
					
和风天气插件

				
			

			

				

					weixin_53843267的博客
				

				

					11-09
					
					270
					
				

			

		

		

			
				
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "1",
    "width": 450,
    "height": 150,
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "city": "CN101110101",
    "key".

			
		

	





	

		

			

				
					
找到一款免费的网页天气插件

				
			

			

				

					u011415782的专栏
				

				

					01-02
					
					4848
					
				

			

		

		

			
				
♩ 背景
最近在参考别人后台CMS模板时，发现了一款网页天气插件，感觉简单好用
对于访问量不大的页面完全可以免费应用，当然可根据需要自行决定其他付费功能
官网 - 心知天气
♪ 使用方法①. 注册用户
简单填写信息即可，当然，本人只是简单的使用了一下功能，实时获取天气信息即可
②. 定制样式
进入定制页面根据界面指导，直接自行定制即可，非常的方便
③. 代码参考
以下是在我的账号下生成的代码，我使用

			
		

	





	

		

			

				
					
心知天气Android开发,H5 实现天气效果(心知天气插件)

				
			

			

				

					weixin_39927144的博客
				

				

					05-29
					
					375
					
				

			

		

		

			
				
H5 实现天气效果(心知天气插件)H5 实现天气效果(心知天气插件)先上效果图鼠标移上去的效果展示核心代码如下：(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.ins...

			
		

	





	

		

			

				
					
好用的前端天气插件iframe

				
			

			

				

					九九八拾一的博客
				

				

					03-27
					
					4515
					
				

			

		

		

			
				
（1）天气网：http://www.tianqi.com/plugin/
（2）中国天气网：https://cj.weather.com.cn/
（3）天气API：http://www.tianqiapi.com/



			
		

	





	

		

			

				
					
怎么在vue中使用和风天气插件

				
			

			

				

					04-29
				

			

		

		

			
				
可以按照以下步骤在 Vue 中使用和风天气插件：

1. 在终端中使用 npm 安装和风天气插件：

```
npm install vue-weather-widget --save
```

2. 在 Vue 组件中引入和风天气插件：

```js
import VueWeatherWidget from 'vue-weather-widget';
```

3. 在 Vue 组件的 template 中使用和风天气插件：

```html
<template>
  <div id="app">
    <VueWeatherWidget :options="options" />
  </div>
</template>
```

其中，`:options` 是一个包含和风天气插件配置选项的对象，例如：

```js
options: {
  location: {
    city: '北京',
    district: '朝阳区'
  },
  key: 'your_key_here',
  lang: 'zh',
  unit: 'c',
  theme: 'default'
}
```

4. 在 Vue 组件中设置和风天气插件的样式：

```css
@import 'vue-weather-widget/dist/css/vue-weather-widget.css';
```

5. 最后，在 Vue 组件中使用和风天气插件的数据和方法：

```js
export default {
  name: 'App',
  data() {
    return {
      options: {
        location: {
          city: '北京',
          district: '朝阳区'
        },
        key: 'your_key_here',
        lang: 'zh',
        unit: 'c',
        theme: 'default'
      }
    };
  },
  methods: {
    onWeatherLoaded(weather) {
      console.log(weather);
    }
  }
};
```

其中，`onWeatherLoaded` 是一个回调函数，当和风天气插件加载完毕后会调用该函数，并将天气数据作为参数传入。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
一个乖乖码字的程序猪

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值