微信小程序开发中怎样做出城市选择

1. 常规的城市选择方式

在传统的网页或APP中，常见的城市选择方式是通过一个下拉列表或者一个单独页面进行选择。一般来说，这种方式需要用户进行翻页或者滚动才能找到所需的城市，用户体验不佳。因此，在微信小程序中我们需要采用更加智能和方便的方式，使用户可以快速且准确地选择所需城市。

2. 使用微信小程序自带的城市选择器

微信小程序提供了一个自带的城市选择器组件picker-view，它可以在一个选择器中展示3列城市信息：省、市、区县。使用微信小程序自带的城市选择器，可以大大简化开发难度，并提高用户体验。具体实现方式可参考以下步骤：

2.1 在wxml文件中添加城市选择器

  <!-- city-select.wxml -->
  <view class="wrapper">
    <picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 200rpx;" value="{{ value }}" bindchange="onChange">
      <picker-view-column>
        <view wx:for="{{ provinces }}" wx:key="provinceName">
          {{ item.name }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{ cities }}" wx:key="cityName">
          {{ item.name }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{ areas }}" wx:key="areaName">
          {{ item.name }}
        </view>
      </picker-view-column>
    </picker-view>
  </view>

在上述代码中，我们定义了一个picker-view组件，它展示了三列城市信息（省、市、区县）。每一列城市信息都是通过wx:for循环遍历相应的数组，由view进行展示。

2.2 在js文件中添加城市数据

  // city-select.js
  Page({
    data: {
      provinces: [], // 省份列表
      cities: [], // 城市列表
      areas: [], // 区县列表
      value: [0, 0, 0] // 当前选中的省市区下标
    },
    onLoad() {
      this.initData()
    },
    initData() {
      const url = '/geo_api/countries/1/children'
      wx.request({
        url: url,
        success: res => {
          console.log(res)
          const provinces = res.data
          const provinceNames = provinces.map(item => item.name)
          const cities = provinces[0].children
          const cityNames = cities.map(item => item.name)
          const areas = cities[0].children
          const areaNames = areas.map(item => item.name)
          this.setData({
            provinces: provinces,
            cities: cities,
            areas: areas,
            provinceNames: provinceNames,
            cityNames: cityNames,
            areaNames: areaNames
          })
        }
      })
    },
    onChange(event) {
      const value = event.detail.value
      const cities = this.data.provinces[value[0]].children
      const areas = cities[value[1]].children
      this.setData({
        value: value,
        cities: cities,
        areas: areas
      })
    }
  })

在上述代码中，我们使用了微信小程序提供的wx.request方法，从服务器上获取了所有省份的数据，并将它们存储在data中的provinces数组中。同时，我们还定义了cities和areas数组来表示选中省份的城市和区县信息，并将它们绑定在picker-view组件上，以供用户进行选择。

2.3 在wxss文件中添加样式

  /* city-select.wxss */
  .wrapper {
    margin-top: 50px;
  }
  
  .wrapper picker-view {
    width: 100%;
    height: 200rpx;
    text-align: center;
    font-size: 28rpx;
    color: #888;
  }
  
  .wrapper .picker-label {
    position: absolute;
    top: 20rpx;
    left: 0;
    right: 0;
    text-align: center;
  }

在上述代码中，我们为picker-view组件和它的子组件添加了样式，以达到更好的用户体验。我们可以根据实际情况来进行样式的调整。

3. 小结

使用微信小程序自带的城市选择器组件可以大大减少开发难度，并节约开发时间，同时拥有良好的用户体验。在使用该组件时，我们需要注意以下几点：

1. 将省市区的数据存储在一个数组中，并通过wx:for循环渲染到页面上。

2. 监听picker-view组件的bindchange事件，获取用户选中的省市区信息，并将其更新到相应的数组中。

3. 根据选中省份和城市的变化，动态改变picker-view组件每一列的显示，并通过setData方法更新页面。