uni-app Ystar优秀应用招募活动正式启动，30000元现金大奖等你来拿！

针对uni-app Ystar优秀应用招募活动，作为一名IT专家，我将提供一个简单的uni-app项目示例代码，以展示如何利用uni-app框架开发一个基础应用。这个示例代码将涵盖基本的页面导航、数据绑定和API调用，帮助参赛者快速上手并激发创意灵感。

示例项目：简易天气查询应用

1. 项目结构

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

2. main.js

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

Vue.config.productionTip = false

App.mpType = 'app'

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

3. App.vue

<template>
  <App />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 全局样式 */
</style>

4. pages/index/index.vue

<template>
  <view>
    <button @click="navigateToWeather">查询天气</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToWeather() {
      uni.navigateTo({
        url: '/pages/weather/weather'
      })
    }
  }
}
</script>

5. pages/weather/weather.vue

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

<script>
export default {
  data() {
    return {
      city: '',
      weatherData: null
    }
  },
  methods: {
    async getWeather() {
      try {
        const response = await uni.request({
          url: `https://api.example.com/weather?city=${this.city}`, // 替换为实际API
          method: 'GET'
        })
        this.weatherData = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

6. 配置文件

在pages.json中配置页面路径，确保应用能够正确导航。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/weather/weather",
      "style": {
        "navigationBarTitleText": "天气"
      }
    }
  ]
}

此示例展示了如何使用uni-app创建一个简单的天气查询应用，包括页面导航、数据绑定和API调用。参赛者可以基于此示例进一步扩展功能，如增加更多页面、优化用户体验、集成更多API等，以参与Ystar优秀应用招募活动并争取30000元现金大奖。