🚀前言

在我们的日常生活中，天气信息对出行、工作和休闲活动的影响不可忽视。随着小程序的普及，开发一款便捷的天气预报小程序成为了许多开发者的目标。而城市选择模块作为天气预报小程序的核心功能之一，直接关系到用户获取天气信息的准确性和便捷性。

本文将重点探讨天气预报小程序中城市选择模块的开发过程。我们将详细介绍如何设计用户友好的城市选择界面，如何实现城市搜索和定位功能，以及如何将用户选择的城市与天气数据进行有效关联。通过提供直观的操作体验，用户能够轻松选择自己关注的城市，快速获取相关的天气信息。

🚀一、天气预报小程序的开发（城市选择模块开发）

🔎1.页面结构与框架

🦋1.1 selectCity.wxml

这是用于显示省市选择的页面模板。根据页面的 type 参数值，决定是显示省级（一级地区）还是市级（二级地区）选择。

<!--pages/selectCity/selectCity.wxml-->
<view class="list">
    <block wx:if="{{type == '1'}}">
        <view  class="item" wx:for="{{provinceData}}" bindtap="tapEvent" data-index="{{index}}">
            <text>{{item}}</text><text class="icon">></text>
            <view class="line"></view>
        </view>
    </block>
    <block wx:if="{{type == '2'}}">
        <view  class="item" wx:for="{{cityData}}" bindtap="tapEvent" data-index="{{index}}">
            <text>{{item.cityName}}</text>
            <view class="line"></view>
        </view>
    </block>
</view>

说明：

• 使用 wx:if 来判断是显示一级地区还是二级地区。
• 通过 wx:for 循环渲染省和市的列表。
• 点击某个地区时触发 tapEvent 方法，传递 index 值来处理后续逻辑。

🦋1.2 selectCity.js

在 selectCity.js 中，控制页面的核心逻辑，包括获取省市数据、处理点击事件以及根据选择跳转到下一级页面。

// pages/selectCity/selectCity.js
Page({
    data: {
        // 1：一级地区 2：二级地区
        type:"1",
        provinceData:[],
        cityData:[]
    },
    onLoad: function (options) {
        this.setData({
            type:options.type ?? "1",
            province:options.province
        });
        if (options.province.length > 0) {
            wx.setNavigationBarTitle({
              title: options.province,
            })
        }
    },
    onReady:function() {
        if (this.data.type == "1") {
            this.getProvince();
        } else {
            this.getCity();
        }
    },
    // 获取一级地区数据
    getProvince:function() {
        wx.cloud.init();
        wx.showLoading({
          title: '加载中...',
        })
        wx.cloud.callFunction({
          name:'getProvince',
          success:res=>{
              wx.hideLoading({
                success: (res) => {},
              })
              this.setData({
                  provinceData:res.result.result
              });
          }
        })
      },
      // 获取二级地区数据
      getCity:function() {
        wx.cloud.init();
        wx.showLoading({
            title: '加载中...',
          })
        wx.cloud.callFunction({
          name:'getCities',
          data:{province:this.data.province},
          success:res=>{
              wx.hideLoading({
                success: (res) => {},
              })
              console.log(res.result.result);
              this.setData({
                  cityData:res.result.result
              });
          }
        })
      },
      tapEvent:function(event) {
          let index = Number(event.target.dataset.index);
          if (this.data.type == "1") {
            // 跳转二级选择
            wx.navigateTo({
              url: `./selectCity?type=2&province=${this.data.provinceData[index]}`,
            })
          } else {
              // 刷新本地
              wx.setStorageSync('currentCity', this.data.cityData[index].cityName);
              wx.navigateBack({
                delta: 2,
              })
          }
      }
})

说明：

• 在 onLoad 中，根据 URL 参数判断当前页面是一级地区选择（省）还是二级地区选择（市）。
• 在 getProvince 和 getCity 方法中，通过云函数调用获取省和市的数据。
• 在 tapEvent 方法中，处理点击事件。如果是一级地区（省）被点击，则跳转到二级地区（市）页面；如果是二级地区（市）被点击，则将选中的城市存储到本地缓存中，并返回上一页。

🦋1.3 selectCity.wxss

为页面添加一些简单的样式，使列表项看起来更整齐。

/* pages/selectCity/selectCity.wxss */

.list {
    display: flex;
    flex-direction: column;
}

.item {
    height: 44px;
    line-height: 44px;
    
}

.item text {
    margin-left: 20px;
}

.line {
    width: 95%;
    background-color:#d1d1d1;
    height: 1px;
    margin-left: auto;
}

.icon {
    position: absolute;
    right: 30px;
    color: gray;
}

说明：

• .list 用于定义列表容器的排列方式。
• .item 为每个列表项的样式。
• .line 为每个项下方的分割线。

🔎2.首页实现城市选择入口

🦋2.1 index.wxml

首页模板，提供一个选择城市的按钮，点击后跳转到城市选择页面。

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <view class="location">
      <text class="currentCity">{{currentCity}}</text>
      <text class="selectBtn" bindtap="selectCityEvent">选择城市</text>
    </view>
  </view>
</view>

🦋2.2 index.js

在首页中，从本地缓存读取当前选择的城市，并提供跳转到城市选择页面的入口。

// index.js
let networkModule = require('../../utils/network.js');

Page({
  data: {
    currentCity: "北京市",  // 默认城市
  },

  onShow: function () {
    // 从本地缓存读取城市选择信息
    const city = wx.getStorageSync('currentCity') || "北京市";
    this.setData({ currentCity: city });
  },

  selectCityEvent: function () {
    // 跳转到城市选择页面，选择一级地区
    wx.navigateTo({
      url: '../selectCity/selectCity?type=1',
    });
  }
});

说明：

• 在 onShow 中，读取本地缓存的城市信息，并更新页面显示的城市。
• 提供 selectCityEvent 方法，点击“选择城市”按钮时跳转到城市选择页面。

🦋2.3 index.wxss

首页的简单样式，显示当前城市以及选择城市的按钮。

/* index.wxss */
.header {
  background-image: linear-gradient(to left bottom, #8b82f2, #4b3fa0);
  width: 100%;
  height: 800rpx;
}

.location {
  color: white;
  margin: 15px;
}

.currentCity {
  margin-right: 4px;
}

.selectBtn {
  font-size: 12px;
}

🔎3.总结

通过以上步骤，已经完成了一个简单的城市选择模块，支持省市选择和城市的本地存储。用户选择的城市信息会存储在本地缓存中，在首页显示当前城市，且提供入口跳转到城市选择页面。

1. selectCity 页面：提供省市选择，选择城市后将其保存到本地缓存。
2. index 页面：显示当前城市，并提供跳转到 selectCity 页面进行选择。

这样，你就完成了一个完整的城市选择模块，并能够根据选择的城市显示天气等信息。