<template> <view> <view id="root"> <view> <!-- 呈现地点 --> <u-row> <u-col span="4"> </u-col> <u-col span="4"> <u--text :text="`${city.pname} -${city.name}`"></u--text> </u-col> <u-col span="4"> </u-col> </u-row> <u-divider></u-divider> <!-- 呈现天气情况 --> <u-row style="height: 200px;"> <u-col span="3"> </u-col> <u-col span="10"> <u--text :text="`${forecast.tempNight} ~ ${forecast.tempDay}℃`" size="20px"> </u--text> </u-col> </u-row> <u-divider></u-divider></view> </view> </view> </template> <script> export default { data() { return { "city": { "cityId": "", "counname": "", "ianatimezone": "", "name": "", "pname": "", "secondaryname": "", "timezone": "" }, "forecast": [{ "conditionDay": "", "conditionIdDay": "", "conditionIdNight": "", "conditionNight": "", "humidity": "", "moonphase": "", "moonrise": "", "moonset": "", "pop": "", "predictDate": "", "qpf": "", "sunrise": "", "sunset": "", "tempDay": "", "tempNight": "", "updatetime": "", "uvi": "", "windDegreesDay": "", "windDegreesNight": "", "windDirDay": "", "windDirNight": "", "windLevelDay": "", "windLevelNight": "", "windSpeedDay": "", "windSpeedNight": "" }] } }, onLoad() { uni.$u.http.get('https://api.oioweb.cn/api/weather/GetWeather', {}).then(res => { this.city = res.data.result.city; this.city.pname = res.data.result.city.pname; this.city.name = res.data.result.city.name; }) }, methods: { } } </script> <style> </style> 补全修改代码实现显示温度的功能

<>
<view>
<view id="root">
<view>
<!-- 呈现地点 -->
<u-row>
<u-col span="4"></u-col>
<u-col span="4">
<u-text>{{ city.pname }} - {{ city.name }}</u-text>
</u-col>
<u-col span="4"></u-col>
</u-row>
<u-divider></u-divider>
<!-- 呈现天气情况 -->
<u-row style="height: 200px;">
<u-col span="3"></u-col>
<u-col span="10">
<u-text size="20px">{{ forecast[0].tempNight }} ~ {{ forecast[0].tempDay }}℃</u-text>
</u-col>
</u-row>
<u-divider></u-divider>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
city: {
cityId: "",
counname: "",
ianatimezone: "",
name: "",
pname: "",
secondaryname: "",
timezone: ""
},
forecast: [{
conditionDay: "",
conditionIdDay: "",
conditionIdNight: "",
conditionNight: "",
humidity: "",
moonphase: "",
moonrise: "",
moonset: "",
pop: "",
predictDate: "",
qpf: "",
sunrise: "",
sunset: "",
tempDay: "",
tempNight: "",
updatetime: "",
uvi: "",
windDegreesDay: "",
windDegreesNight: "",
windDirDay: "",
windDirNight: "",
windLevelDay: "",
windLevelNight: "",
windSpeedDay: "",
windSpeedNight: ""
}]
}
},
onLoad() {
uni.$u.http.get('https://api.oioweb.cn/api/weather/GetWeather', {}).then(res => {
this.city = res.data.result.city;
this.city.pname = res.data.result.city.pname;
this.city.name = res.data.result.city.name;
this.forecast = res.data.result.forecast;
})
},
methods: {

}
}
</script>

<style>

</style>
在上面的代码中，我添加了一个 `<u-text>` 组件来显示地点和温度。在 `onLoad` 方法中，我将获取到的城市数据和天气预报数据赋值给 `city` 和 `forecast` 对象。然后，在模板中使用双花括号 `{{ }}` 来插入数据并显示在页面上。温度的值是通过 `forecast[0].tempNight` 和 `forecast[0].tempDay` 来获取的，因为 `forecast` 是一个数组，我们只取第一个元素来显示温度。