天⽓插件(vue)和风天⽓插件
本来项⽬中⽤的中国天⽓,今天突然发现天⽓不显⽰了,突然报错net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH 然后上中国天⽓管⽹去看,发现登陆都报错404了。。。
当时就⼀⼝⽼⾎。。。
后来翻了翻有采⽤了和两个样式差不多的和风天⽓,从两个⼈的管⽹体验和风就胜出了⼀⼤截。在使⽤上两者基本相同。
⽣成后的代码样式
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "20134",
"background": "5",
"tmpColor": "17E6F5",
"tmpSize": "30",
"cityColor": "17E6F5",
"citySize": "30",
"aqiColor": "17E6F5",
"aqiSize": "30",
"weatherIconSize": "30",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "zh",
"fixed": "false",
"vertical": "center",
"horizontal": "left",
"key": "603e69a10d664*********"
}
}
</script>
<script src="widget.qweather/simple/static/js/he-simple-common.js?v=2.0"></script>
(function (d) {
var c = d.createElement('link')
c.href = 'widget.heweather/simple/static/css/he-simple.css?v=1.4.0'
var s = d.createElement('script')
s.src = 'widget.heweather/simple/static/js/he-simple.js?v=1.4.0'
var sn = d.getElementsByTagName('script')[0]
sn.parentNode.insertBefore(c, sn)
sn.parentNode.insertBefore(s, sn)
})(document)
在vue中使⽤
其中c.href、s.src两个⽂件我都下载下来放在本地进⾏加载了,经过中国天⽓那⼀次我真的是怕了。因为vue打包后不打包static,assets,所以两个都放
created(){
//和风天⽓插件调⽤
window.WIDGET = {
"CONFIG": {
"modules": "20134",
"background": "5",
"tmpColor": "17E6F5",
"tmpSize": "30",
"cityColor": "17E6F5",
"citySize": "30",
"aqiColor": "17E6F5",
"aqiSize": "30",
"weatherIconSize": "30",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "zh",
"fixed": "false",
"vertical": "center",
"horizontal": "center",
"key": "603e69a10d664df98f383cf538e0a913"
}
360天气
};
(function (d) {
var c = d.createElement('link')
c.href = '../../../static/css/he-simple.css'
var s = d.createElement('script')
s.src = '../../../static/js/he-simple.js'
var sn = d.getElementsByTagName('script')[0]      sn.parentNode.insertBefore(c, sn)
sn.parentNode.insertBefore(s, sn)
})(document)
},