微信小程序如何利用组件添加地址

微信小程序提供了 `picker-view` 和 `picker` 组件，可以用于实现省市区三级联动的选择器。你可以利用这些组件来添加地址。

下面是一个简单的添加地址的示例代码：

1. 在小程序的 `wxml` 文件中添加以下代码：

<!-- 省市区三级联动选择器 -->
<view class="picker-container">
  <picker-view class="picker-view" value="{{regionIndex}}" bindchange="bindRegionChange" indicator-style="height: 50px;">
    <picker-view-column>
      <view wx:for="{{provinces}}" wx:key="index" class="picker">
        {{item}}
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{cities}}" wx:key="index" class="picker">
        {{item}}
      </view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{areas}}" wx:key="index" class="picker">
        {{item}}
      </view>
    </picker-view-column>
  </picker-view>
</view>

<!-- 收货人信息表单 -->
<form class="address-form" bindsubmit="formSubmit">
  <view class="form-group">
    <view class="form-label">收货人：</view>
    <input class="form-input" type="text" name="name" placeholder="请输入收货人姓名" />
  </view>
  <view class="form-group">
    <view class="form-label">手机号码：</view>
    <input class="form-input" type="number" name="phone" placeholder="请输入手机号码" />
  </view>
  <view class="form-group">
    <view class="form-label">所在地区：</view>
    <input class="form-input" type="text" name="region" value="{{region}}" disabled />
  </view>
  <view class="form-group">
    <view class="form-label">详细地址：</view>
    <input class="form-input" type="text" name="address" placeholder="请输入详细地址" />
  </view>
  <button class="form-btn" type="submit">保存地址</button>
</form>

2. 在小程序的 `js` 文件中添加以下代码：

Page({
  data: {
    provinces: [], // 省份列表
    cities: [], // 城市列表
    areas: [], // 区县列表
    regionIndex: [0, 0, 0], // 省市区选择器的选择项
    region: '', // 所在地区
  },

  // 页面加载时获取省份列表
  onLoad: function () {
    this.getProvinces();
  },

  // 获取省份列表
  getProvinces: function () {
    let that = this;
    // 调用后台接口获取省份列表
    wx.request({
      url: 'https://example.com/getProvinces',
      success: function (res) {
        that.setData({
          provinces: res.data,
        });
        // 加载省份列表后获取城市列表
        that.getCities(res.data[0]);
      }
    });
  },

  // 获取城市列表
  getCities: function (province) {
    let that = this;
    // 调用后台接口获取城市列表
    wx.request({
      url: 'https://example.com/getCities',
      data: {
        province: province
      },
      success: function (res) {
        that.setData({
          cities: res.data,
        });
        // 加载城市列表后获取区县列表
        that.getAreas(that.data.provinces[that.data.regionIndex[0]], that.data.cities[that.data.regionIndex[1]]);
      }
    });
  },

  // 获取区县列表
  getAreas: function (province, city) {
    let that = this;
    // 调用后台接口获取区县列表
    wx.request({
      url: 'https://example.com/getAreas',
      data: {
        province: province,
        city: city,
      },
      success: function (res) {
        that.setData({
          areas: res.data,
          region: province + city + res.data[0],
        });
      }
    });
  },

  // 省市区选择器改变事件
  bindRegionChange: function (e) {
    let that = this;
    that.setData({
      regionIndex: e.detail.value,
    });
    that.getAreas(that.data.provinces[e.detail.value[0]], that.data.cities[e.detail.value[1]]);
  },

  // 表单提交事件
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    // 调用后台接口保存收货地址
    wx.request({
      url: 'https://example.com/saveAddress',
      data: e.detail.value,
      success: function (res) {
        console.log(res.data);
      }
    });
  },
});

在这个示例中，我们使用 `picker-view` 组件实现了省市区三级联动的选择器，用户选择了所在地区之后，输入框会自动填充所选的省市区信息。用户填写完所有信息之后，点击保存地址按钮会触发表单提交事件，将表单的数据提交给后台接口保存到数据库中。

需要注意的是，示例中的后台接口和数据库都需要开发者自己搭建和维护。