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

222000132许依红 学生 2023-06-06 19:21:57

目录

  • 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 项目中引入多地点和风天气
和风天气城市列表

...全文
1727 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

686

社区成员

发帖
与我相关
我的任务
社区描述
2023年福州大学软件工程实践课程W班的教学社区
软件工程团队开发软件构建 高校 福建省·福州市
社区管理员
  • FZU_SE_teacherW
  • aboutazhang
  • 郭渊伟
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧