和风天气的使用方法

最新推荐文章于 2025-04-13 14:45:00 发布

এ᭄ꦿ十二ঞ

最新推荐文章于 2025-04-13 14:45:00 发布

阅读量774

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/FANSILVLV/article/details/131934002

版权

方法一组件使用

 <div id="he-plugin-simple"></div>
 // 初始化和风天气
onBeforeMount(() => {
  window.WIDGET = {
    CONFIG: {
      modules: "21034",
      background: "5",
      tmpColor: "FFFFFF",
      tmpSize: "18",
      cityColor: "FFFFFF",
      citySize: "18",
      aqiColor: "FFFFFF",
      aqiSize: "18",
      weatherIconSize: "45",
      alertIconSize: "18",
      padding: "10px 10px 10px 10px",
      shadow: "0",
      language: "auto",
      fixed: "false",
      vertical: "center",
      horizontal: "left",
      key: "你自己的key",
    },
  };
  const 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);
});

方法二接口调用

import axios from "axios";
// 天气
let location = reactive({
  now: {},
});
// 空气
let air = reactive({
  now: {},
});
onBeforeMount(() => {
  axios
    .get(
      "https://devapi.qweather.com/v7/weather/now?location=坐标点&key=自己的key"
    )
    .then((response) => (location.now = response.data.now));
  // 空气
  axios
    .get(
      "https://devapi.qweather.com/v7/air/now?location=坐标点&key=自己的key"
    )
    .then((response) => (air.now = response.data.now));
});