uniapp小程序开发案例

UniApp是一个基于Web技术栈的多平台开发框架，可以同时构建iOS、Android、H5以及桌面应用。下面是一个简单的uniapp小程序开发案例：

假设我们要开发一个天气查询的小程序，用户可以在输入框内输入城市名，然后点击“查询”按钮查看当前的天气情况。

<!-- uni-app页面模板 -->
<view class="container">
  <input type="text" placeholder="请输入城市名" v-model="cityName" @change="fetchWeather"/>
  <button open-type="submit" @click="fetchWeather">查询</button>
  <view v-if="weatherData">{{ weatherData }}</view> <!-- 显示天气数据 -->
</view>

<script>
export default {
  data() {
    return {
      cityName: '',
      weatherData: ''
    };
  },
  methods: {
    fetchWeather() {
      // 使用axios或uni.request发起网络请求
      uni.request({
        url: 'https://api.example.com/weather?city=' + this.cityName,
        success(res) {
          this.weatherData = res.data.weather;
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

在这个例子中，`v-model`用于绑定输入框的内容，当输入发生变化时触发`fetchWeather`方法获取天气信息。如果请求成功，获取到的天气数据会在页面上显示出来。