Verwenden Sie die Zephyr Weather API in Vue

Der erste Schritt besteht darin, den Stil und die Stadt auf der Zephy-Wetter-Website festzulegen, um eine Standardversion des Wetter-Plug-Ins zu erstellen

Der zweite Schritt wird in Vue verwendet

<template>
  <div class="info_weather">
    <div id="he-plugin-standard"></div> // 和风天气
  </div>
</template>
  mounted() {
    
    
    this.weathers();
  },
  methods:{
    
    
	   // 获取天气
    weathers() {
    
    
      // 到和风天气官网设计和下载 https://widget.qweather.com/
      window.WIDGET = {
    
    
        CONFIG: {
    
    
          layout: "1",
          width: "320",
          height: "210",
          background: "1",
          dataColor: "FFFFFF",
          borderRadius: "5",
          key: "9f5cb7d9725e483f95457d258eaba2cb",
        },
      };
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
      document.getElementsByTagName("head")[0].appendChild(script);
    },
}