用uniapp编写一段查询程序
时间: 2024-06-06 19:01:15 浏览: 83
好的,以下是一个简单的使用uniapp编写的查询程序示例,可以查询天气信息:
1. 在uniapp中创建新的页面weather,然后在weather.vue文件中编写以下代码:
```html
<template>
<div class="container">
<div class="input-box">
<input type="text" v-model="city" placeholder="请输入城市名称">
<button @click="search">查询</button>
</div>
<div class="weather-box">
<div class="weather-info" v-if="weather">
<div class="city">{{ weather.city }}</div>
<div class="temp">{{ weather.temp }}℃</div>
<div class="desc">{{ weather.weather }}</div>
</div>
<div v-else>请输入正确的城市名称</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
city: '',
weather: null
}
},
methods: {
search() {
// 调用天气API查询天气信息
uni.request({
url: 'https://v0.yiketianqi.com/api?version=v61&appid=83525668&appsecret=2Fw4z3T0&city=' + this.city,
success: res => {
if (res && res.data && res.data.status === 200) {
this.weather = {
city: res.data.city,
temp: res.data.tem,
weather: res.data.wea
}
} else {
this.weather = null
}
}
})
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.input-box {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.input-box input {
height: 30px;
line-height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}
.input-box button {
height: 30px;
line-height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.weather-box {
text-align: center;
}
.weather-info {
font-size: 24px;
}
.city {
font-weight: bold;
}
.temp {
font-size: 48px;
margin-top: 10px;
}
.desc {
font-size: 20px;
margin-top: 10px;
}
</style>
```
2. 在manifest.json文件中添加以下权限:
```json
{
"app-plus": {
"permissions": {
"network": {
"description": "用于查询天气信息"
}
}
}
}
```
3. 运行程序,在输入框中输入城市名称,点击查询按钮即可查询该城市的天气信息。
注意:以上代码中使用的天气API仅供学习参考,实际开发中请使用正式的天气API。
阅读全文