码迷,mamicode.com
首页 > 其他好文 > 详细

天气插件(vue)和风天气插件

时间:2021-04-02 13:37:18      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:name   体验   中国天气   document   src   link   cti   err   cipher   

本来项目中用的中国天气,今天突然发现天气不显示了,突然报错net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH 然后上中国天气管网去看,发现登陆都报错404了。。。

当时就一口老血。。。

后来翻了翻有采用了和两个样式差不多的和风天气,从两个人的管网体验和风就胜出了一大截。在使用上两者基本相同。

和风天气生成插件的自定义样式的网址   https://widget.qweather.com/

生成后的代码样式

<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": "603e69a10d664df98f383cf538e0a913"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

其中script中的的代码打开是这样的https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0

(function (d) {
  var c = d.createElement(‘link‘)
  c.rel = ‘stylesheet‘
  c.href = ‘https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0‘
  var s = d.createElement(‘script‘)
  s.src = ‘https://widget.heweather.net/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"
      }
    };
    (function (d) {
      var c = d.createElement(‘link‘)
      c.rel = ‘stylesheet‘
      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)
  },

 

天气插件(vue)和风天气插件

标签:name   体验   中国天气   document   src   link   cti   err   cipher   

原文地址:https://www.cnblogs.com/enhengenhengNymph/p/14609476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!