个人技术总结——Vue使用和风天气插件

[222000132许依红]

目录

• 1.技术概述
• 2.技术详述
• 3.技术使用中遇到的问题和解决过程
• 4.总结
• 5.参考文献、参考博客

1.技术概述

• 通过调用和风天气网站提供的天气插件，获取天气信息并显示。
• 因为我们的团队项目需要获取天气信息辅助用户操作，所以需要实现查看天气功能。
• 难点：需要有html和JavaScript基础

2.技术详述

1.首先进入和风天气官网获取天气插件

2.选择其中一个插件进入，比如选择标准版天气，右边有这个插件布局的一些样式，可以按需修改，最后可以生成所需代码，将这个代码复制到我们需要天气功能的位置就可以了。

需要注册该平台账号，才可以生成代码

3.我的实际使用

• 3.1 使用标准版天气插件

<!-- 天气 -->
     <div class="weather">
         <div id="he-plugin-standard"></div>
     </div>

• 3.2 一些常用属性的说明：
  • layout：布局（1为横板，2为竖版）
  • width，height：插件的宽和高（用于改变插件大小）
  • background：背景设置（随天气变化，深浅，透明）
  • backgroundColor：背景颜色
  • dataColor：字体颜色
  • language：显示语言（中文，English）
  • city：指定城市天气（需查询城市列表对应值，如福州：CN101230101）

    methods: {
    insertWeather () {
      window.WIDGET = {
        CONFIG: {
          layout: '2',
          width: 305,
          height: 260,
          background: '2',
          dataColor: '000000',
          language: 'zh',
          city: 'CN101230101',
          key: '82898b167593451b81c7ce87a89135d0'
        }
      }
      const script = document.createElement('script')
      script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
      document.body.appendChild(script)
    },
    //省略其它方法
    

• 效果显示
  

  

3.技术使用中遇到的问题和解决过程

• 问题：天气如果选择自动定位，再次刷新会自动定位到北京，无法自动定位到准确位置
  

  

• 解决：目前没有找到能自动定位的解决办法，只能考虑人为设置天气地址，可以查询和风天气城市列表获取对应城市的值在属性city处进行设置，比如city: 'CN101230101',将城市设置为福州 ；也可以在使用插件生成代码功能选择城市

  

  
  

  

4.总结

这是一个实际用起来简单又有意思的功能，直接通过插件直接获取天气，比较好上手，能给开发者带来很多便利，在以后的开发工作时也可以使用和风天气开发服务进行天气相关功能的开发，当然获取天气的技术还有很多，可以多学习。

5.参考文献、参考博客

Vue 项目中引入多地点和风天气
和风天气城市列表