方法一 组件使用
<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));
});