支付宝小程序 天气预报 从零开始实现天气查询功能的完整流程

🌤️ 支付宝小程序天气查询功能开发全攻略（2025最新版） 🌧️

开发前准备 🛠️

1. 注册支付宝小程序账号
   🔑 登录支付宝开放平台，完成企业认证并创建小程序，获取AppID。

2. 安装开发工具
   💻 下载支付宝小程序开发者工具，支持Windows/macOS。

3. 选择天气API
   🌐 推荐接口（2025年稳定版）：

   

   • 和风天气：免费版支持3天预报，数据精度高
   • 天气通API：提供实时天气+7日预报，免费额度充足
     ⚠️ 注意：需在API官网注册账号，获取专属API Key。

核心开发流程 🚀

界面设计（WXML/AXML）

<!-- 天气主界面 -->
<view class="container">
  <!-- 搜索框 -->
  <input placeholder="输入城市名" bindinput="onCityInput" />
  <button bindtap="searchWeather">查询</button>
  <!-- 当前天气 -->
  <view class="current-weather">
    <text>{{city}} ⛅ {{temp}}℃</text>
    <text>{{weatherDesc}}</text>
    <text>风力：{{wind}} ｜ 湿度：{{humidity}}%</text>
  </view>
  <!-- 7日预报 -->
  <scroll-view scroll-x>
    <view wx:for="{{forecast}}" wx:key="date">
      <text>{{item.date}}</text>
      <text>{{item.weather}}</text>
      <text>{{item.high}}℃/{{item.low}}℃</text>
    </view>
  </scroll-view>
</view>

逻辑实现（JavaScript）

Page({
  data: {
    city: '北京',
    temp: '25',
    weatherDesc: '晴',
    forecast: []
  },
  // 搜索城市天气
  searchWeather() {
    my.request({
      url: 'https://api.seniverse.com/v3/weather/now.json', // 示例API
      data: {
        key: 'YOUR_API_KEY',
        location: this.data.city,
        language: 'zh-Hans'
      },
      success: (res) => {
        this.setData({
          temp: res.data.results[0].now.temperature,
          weatherDesc: res.data.results[0].now.text,
          // 更多数据解析...
        });
      }
    });
  }
});

样式优化（ACSS）

.container {
  padding: 20rpx;
  background: linear-gradient(180deg, #4B79A1, #283E51);
}
.current-weather {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx 0;
}
.scroll-view {
  white-space: nowrap;
}

关键功能扩展 🔧

1. 定位获取

   my.getLocation({
     success: (res) => {
       this.searchWeatherByCoords(res.longitude, res.latitude);
     }
   });

2. 错误处理

   fail: (err) => {
     my.showToast({
       content: '天气查询失败，请检查网络或API密钥',
       icon: 'error'
     });
   }

3. 数据缓存

   

   my.setStorageSync('weatherData', res.data); // 缓存最近一次查询结果

上线前必做事项 🚨

1. 域名白名单配置
   在支付宝小程序后台添加天气API域名（如api.seniverse.com）到request合法域名列表。

2. 性能优化

   • 启用分包加载减少首屏体积
   • 对7日预报数据使用虚拟列表渲染

3. 用户体验细节

   

   • 添加加载动画（my.showLoading()）
   • 输入框增加防抖处理（300ms延迟查询）

完整案例参考 📚

• GitHub开源项目（2025最新版）
• 支付宝开发者社区-天气模板

🎉 完成开发后，提交代码至支付宝小程序后台，通过审核即可发布你的天气查询神器！用户输入城市名或授权定位后，就能实时获取精准天气信息啦～ 🌦️➡️🌞