Welcome

首页 / 脚本样式 / Vue / 在vue中使用中国天气插件

https://cj.weather.com.cn/

中国天气插件


1.中国天气

实例:https://cj.weather.com.cn/plugin/pc


2. 心知天气

文档:https://docs.seniverse.com/api/start/start.html


实例:https://github.com/seniverse/seniverse-api-demos


3. 和风天气(可用)

文档:https://dev.heweather.com/docs/getting-started/


实例:https://dev.heweather.com/widget/


4.?天气网

实例:http://www.tianqi.com/dingzhi/


5.?天气API

文档:https://www.tianqiapi.com/?action=v1


实例:https://www.tianqiapi.com/?action=iframe


demo:JS获取7天, 15天, 40天天气预报代码示例



在vue中引入插件

template 中


<div id="weather-v2-plugin-simple"></div> 

mounted 中


window.WIDGET = {CONFIG:{"modules":"20","background":5,"tmpColor":"ffffff","tmpSize":16,"cityColor":"ffffff","citySize":16,"aqiSize":16,"weatherIconSize":24,"alertIconSize":18,"padding":"10px 10px 10px 10px","shadow":"1","language":"auto","borderRadius":5,"fixed":"false","vertical":"middle","horizontal":"center","key":"aGh9gAMF5m"}}

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0';

document.getElementsByTagName('head')[0].appendChild(script);