uni-app 天气app模仿

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 天气app模仿

Harmonyos Next教程
1 回复

当然，以下是一个简单的uni-app天气应用示例代码，该示例展示了如何使用uni-app框架构建一个基本的天气查询应用。由于实际的天气数据需要通过API获取，这里假设你有一个天气API的访问权限，并且API的URL和参数格式已知。

项目结构

- pages/
  - index/
    - index.vue
- App.vue
- main.js
- manifest.json
- pages.json

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

App.vue

<template>
  <App />
</template>

<script>
import App from './pages/index/index.vue'

export default {
  components: {
    App
  }
}
</script>

pages/index/index.vue

<template>
  <view class="content">
    <input v-model="city" placeholder="请输入城市" />
    <button @click="getWeather">查询天气</button>
    <view v-if="weather">
      <text>城市: {{ weather.city }}</text>
      <text>天气: {{ weather.weather }}</text>
      <text>温度: {{ weather.temperature }}°C</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      weather: null
    }
  },
  methods: {
    getWeather() {
      if (!this.city) return;
      uni.request({
        url: 'https://api.weather.com/data', // 替换为你的天气API URL
        data: {
          city: this.city
        },
        success: (res) => {
          this.weather = res.data; // 假设返回的数据结构为 { city, weather, temperature }
        },
        fail: (err) => {
          console.error(err);
        }
      });
    }
  }
}
</script>

<style>
.content {
  padding: 20px;
}
input {
  margin-bottom: 10px;
  padding: 10px;
  width: 80%;
}
button {
  padding: 10px 20px;
}
</style>

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "天气查询"
      }
    }
  ]
}

说明

  • 在index.vue中，我们创建了一个简单的界面，用户可以输入城市名称并点击按钮查询天气。
  • uni.request方法用于发送HTTP请求到天气API，获取天气数据。
  • 假设天气API返回的数据结构包含city、weather和temperature字段，这些字段被绑定到视图上进行显示。
  • 请注意，实际开发中需要根据具体的天气API文档调整请求URL和参数，以及处理返回的数据结构。

这个示例代码提供了一个基本的框架，你可以在此基础上添加更多功能和样式以满足实际需求。

回到顶部