uni-app微信小程序天气预报

### 实现天气预报功能

#### 获取 API 接口数据
为了实现在 uni-app 微信小程序中展示天气预报的功能，首先需要选择一个可靠的第三方气象服务提供商。通常这些服务商提供 RESTful API 来获取实时天气信息。

假设选择了和风天气作为数据源，则可以使用其提供的免费版 API 进行开发[^1]：

// 在 utils/api.js 文件定义请求函数
export function getWeather(cityId) {
    const url = `https://devapi.qweather.com/v7/weather/now?location=${cityId}&key=YOUR_API_KEY`;
    return new Promise((resolve, reject) => {
        uni.request({
            url,
            success(res) {
                resolve(res.data);
            },
            fail(err) {
                reject(err);
            }
        });
    });
}

#### 页面布局设计
创建一个新的页面用于显示天气情况，在页面配置文件 pages.json 添加相应路径并设置窗口属性。

在 WXML 文件里构建简单的 UI 结构来呈现温度和其他重要参数:

<view class="container">
  <text>城市名称</text>
  <text>{{ weather.now.temp }}°C</text>
  <!-- 更多字段可以根据需求添加 -->
</view>

#### 数据绑定与生命周期管理
利用 Vue 的响应式特性处理接收到的数据并与视图同步更新。可以在 onReady 生命周期钩子里面发起网络请求加载最新天气状况。

import { getWeather } from '@/utils/api';

export default {
  data() {
    return {
      weather: {}
    };
  },
  methods: {
    async fetchWeatherData() {
      try {
        let res = await getWeather('CH1010101'); // 替换成目标城市的 ID 或者通过定位得到的城市ID
        console.log(res);
        this.weather = res;
      } catch (error) {
        console.error(error.message);
      }
    }
  },
  mounted() {
    this.fetchWeatherData();
  }
};

#### 用户权限申请
考虑到某些情况下可能需要用到设备的位置服务以便自动识别所在位置对应的天气信息，因此还需要考虑如何优雅地向用户索权以及应对拒绝的情况。

当首次启动应用时应该检查是否有访问位置的权限，并根据结果采取适当行动[^4]:

onLoad(){
  this.isGetLocation();
},
methods:{
  isGetLocation(){
    uni.getSetting({
      success(settingdata){
          if (!settingdata.authSetting['scope.userLocation']){
              uni.authorize({
                  scope:'scope.userLocation',
                  success(authorizedata){
                      // 成功授权后的操作...
                  },
                  fail(faildata){
                      // 处理失败情形...
                  }
              })
          }else{
             // 已经有权限的情况下直接执行定位...
          }
      }
    });
  }
}