个人技术博客——uniapp之picker省市区选择器适配多端解决方案

222100110吴宇航 2024-12-17 21:55:12

一、技术概述
二、技术详述
1. 技术实现方案概述
2. 具体实现步骤
步骤 1：引入条件编译
步骤 2：实现微信小程序端选择器
步骤 3：实现 H5 和 APP 端的自定义组件
步骤 4：数据绑定和更新
三、技术使用中遇到的问题和解决过程
问题一：picker 组件不支持 H5 和 APP 端
问题二：官方解决方案（云端数据库）不适用
四、总结
五、参考文献

一、技术概述

技术背景：uni-app 是一个使用 Vue.js 框架的跨平台开发工具，可以发布到 iOS、Android、H5、小程序等多个平台。在实际开发中，我们遇到 picker 组件不支持 H5 和 APP 端的问题，尤其是在处理省市区级联选择器时。

技术使用场景：电商项目的地址选择模块。

学习原因：解决多端兼容问题，提升用户体验。

难点：原生 picker 组件在 H5 和 APP 端不可用，官方解决方案依赖云端数据库，但存在高配置复杂性和不稳定性。

二、技术详述

1. 技术实现方案概述

微信小程序端：继续使用原生 picker 组件，保持体验最佳。
H5 和 APP 端：通过 uni-app 插件市场提供的插件实现自定义省市区选择器。

使用条件编译实现平台差异化：

<template>
  <!-- 微信小程序平台 -->
  <!-- #ifdef MP-WEIXIN -->
  <picker
    @change="onRegionChange"
    class="picker"
    mode="region"
    :value="form.fullLocation.split(' ')"
  >
    <!-- 用户已选择地址时显示选择的值 -->
    <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
    <!-- 未选择时的占位提示 -->
    <view v-else class="placeholder">请选择省/市/区(县)</view>
  </picker>
  <!-- #endif -->

  <!-- H5 和 APP 端 -->
  <!-- #ifdef H5 || APP-PLUS -->
  <view>
    <!-- 自定义插件 pick-regions 组件 -->
    <pick-regions 
      :defaultRegion="form.districtCode" 
      @getRegion="handleGetRegion"
    >
      <!-- 显示选择结果 -->
      <view>{{ form.fullLocation.trim() || '请选择地区' }}</view>
    </pick-regions>
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  data() {
    return {
      form: {
        fullLocation: '', // 完整的省/市/区字符串
        districtCode: '', // 选中的区域编码（用于初始化）
      },
    };
  },
  methods: {
    // 微信小程序端选择器触发事件
    onRegionChange(event) {
      const value = event.detail.value; // 返回数组 ['省', '市', '区']
      this.form.fullLocation = value.join(' ');
    },
    // H5 和 APP 端选择器触发事件
    handleGetRegion(regionData) {
      const { provinceName, cityName, districtName, districtCode } = regionData;
      this.form.fullLocation = `${provinceName} ${cityName} ${districtName}`;
      this.form.districtCode = districtCode; // 保存区域编码
    },
  },
};
</script>