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

最近在写后台管理系统，发现有个天气的功能。

这个是同事写的，来看看他是怎么写的。挺漂亮的天气样式。

1.html代码

查找代码后发现，关于天气的html部分只有一行代码：

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

全局检索后也没有发现使用这个dom的地方。

遂百度一下。

2. 和风天气开发平台——创建标准版天气插件

百度vue 天气插件，发现有个和风天气开发平台：https://widget.qweather.com/create-standard?

点击右侧的选项，就可以配置成一个漂亮的插件。

3.完整代码

3.1 html代码

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

3.2 js代码

mounted() {
    
    
    window.WIDGET = {
    
    
      "CONFIG": {
    
    
        "modules": "01234",
        "background": "5",
        "tmpColor": "FFFFFF",
        "tmpSize": "16",
        "cityColor": "FFFFFF",
        "citySize": "16",
        "aqiColor": "FFFFFF",
        "aqiSize": "16",
        "weatherIconSize": "24",
        "alertIconSize": "18",
        "padding": "20px 10px 20px 10px",
        "shadow": "0",
        "language": "auto",
        "borderRadius": "5",
        "fixed": "false",
        "vertical": "top",
        "horizontal": "left",
        "key": "7a359ad9c3e547779a3c8eed7cb26b98"
      }
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
  },

注意此处代码与官网生成的代码有些不同，官网生成的代码是js版本的，对于vue版本，则需要在mounted生命周期函数中添加，关于js版本中引入script的部分，在vue版本中应该写成上面的形式，也就是下面的几行代码。

let script = document.createElement('script');
script.type = 'text/javascript'
script.src='https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
document.getElementsByTagName('head')[0].appendChild(script);

对于不熟悉js的我来说，每一次记录都是一种收获。好记性不如烂笔头。

完成！！！