天氣插件（vue）和風天氣插件

本來項目中用的中國天氣，今天突然發現天氣不顯示了，突然報錯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)
  },