更新记录

1.0.1（2023-06-12）

省市区多字时样式错乱问题

1.0.0（2023-05-30）

解决 自定义多列省市区选择,自己维护省市区数据保证实时

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0	×	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	×	×	×	×	×

w-address-picker

功能介绍

支持小程序+h5(vue2或vue3)
可自己维护省市区数据，保证省市区实时性
数据json里还保存了邮编/经纬度，可在需要时获取
使用picker-view做多列选择，因此可自定义样式,可传入cancelOrder和confirmColor修改取消和确定按钮样式
增加type属性可设置只选省/只选省市/选省市区三种

安装

uni_modules 方式

点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/w-address-picker 目录下
需要更新版本时在 HBuilder X 中右键 uni_modules/w-address-picker 目录选择 从插件市场更新 即可

使用

所需的地址json文件地址: 百度云地址
请先下载下来放到自己的服务器里或oss上，因为本身文件就2-3M，小程序有大小限制，因此数据不可放于本地，需从链接获取

属性	属性	类型	默认值
jsonUrl	String		json格式数据文件的地址，从上面所示的百度云地址下载后传到自己的服务器或oss上
cancelColor	String	#666	弹出选择时取消的颜色
confirmColor	String	#576B95	弹出选择时确定的颜色
type	Number	2	0 只有省 1 省市 2 省市区

事件
组件事件

名称	触发时机	返回值
change	选择完省市区	[省,市，区]视选择的type来定
changeLocation	选择完省市区	{lng(经度): xx, lat(纬度):xx}
changeZipcode	只有选择区后	邮编

使用

// vue2
<template>
<view class="content">
    <view class="form-item">
        <view class="form-item-label">省市区：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="1"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<2 ? '#666' : '#333')">
                    {{ region.length < 2 ? '请选择省市' : region[0] + region[1] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0]}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省+ 经纬度</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0] + ',经度：' + location.lng + ',纬度：' + location.lat}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市区+ 邮编</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" @changeZipcode="bindZipCodeChange" class="form-item-content" 
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] + ',邮编：' + zipCode}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
</view>
</template>
<script>
export default {
    data() {
        return {
            //todo 填入你的json文件地址
            jsonUrl: '',
            region: [],
            location: {},
            zipCode: ''
        }
    },
    methods: {
      bindRegionChange(region) {
        this.region = region
      },
      bindLocationChange(location) {
        this.location = location
      },
      bindZipCodeChange(zipCode) {
        this.zipCode = zipCode
      }
    }
}
</script>
<style>
page {
    background-color: #fff;
}
.form-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
    padding: 28rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #f8f8f8;
}
.form-item .form-item-label {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    white-space: nowrap;
    width: 200rpx;
}

.form-item .form-item-content {
    width: calc(100% - 200rpx);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.form-item-content .picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48rpx;
}

.picker .region-text {
    width: calc(100% - 46rpx);
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 48rpx;
    text-align: right;
    word-break: break-all;
}
.picker .right-icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 2rpx;
}
</style>

vue3 setup形式

<template>
<view class="content">
    <view class="form-item">
        <view class="form-item-label">省市区：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="1"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<2 ? '#666' : '#333')">
                    {{ region.length < 2 ? '请选择省市' : region[0] + region[1] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0]}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省+ 经纬度</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0] + ',经度：' + location.lng + ',纬度：' + location.lat}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市区+ 邮编</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" @changeZipcode="bindZipCodeChange" class="form-item-content" 
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] + ',邮编：' + zipCode}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
</view>
</template>
<script setup>
import { ref } from 'vue'
// todo 填入你的json数据文件地址
const jsonUrl = ''
const region = ref([])
const location = ref({})
const zipCode = ref('')

// 当前选择的省市区
const bindRegionChange = (data) => {
   region.value = data
}

// 当前选择的经纬度
const bindLocationChange = (data) => {
 location.value = data
}

// 当前选择区的邮编
const bindZipCodeChange = (data) => {
     zipCode.value = data
}
</script>
<style>
page {
    background-color: #fff;
}
.form-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
    padding: 28rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #f8f8f8;
}
.form-item .form-item-label {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    white-space: nowrap;
    width: 200rpx;
}

.form-item .form-item-content {
    width: calc(100% - 200rpx);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.form-item-content .picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48rpx;
}

.picker .region-text {
    width: calc(100% - 46rpx);
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 48rpx;
    text-align: right;
    word-break: break-all;
}
.picker .right-icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 2rpx;
}
</style>

示例省市区省市省

# w-address-picker

示例	省市区	省市	省
			# w-address-picker

功能介绍

支持小程序+h5(vue2或vue3)
可自己维护省市区数据，保证省市区实时性
数据json里还保存了邮编/经纬度，可在需要时获取
使用picker-view做多列选择，因此可自定义样式,可传入cancelOrder和confirmColor修改取消和确定按钮样式
增加type属性可设置只选省/只选省市/选省市区三种

安装

uni_modules 方式

点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/w-address-picker 目录下
需要更新版本时在 HBuilder X 中右键 uni_modules/w-address-picker 目录选择 从插件市场更新 即可

使用

所需的地址json文件地址: 百度云地址
请先下载下来放到自己的服务器里或oss上，因为本身文件就2-3M，小程序有大小限制，因此数据不可放于本地，需从链接获取
属性

属性	类型	默认值	说明
jsonUrl	String		json格式数据文件的地址，从上面所示的百度云地址下载后传到自己的服务器或oss上
cancelColor	String	#666	弹出选择时取消的颜色
confirmColor	String	#576B95	弹出选择时确定的颜色
type	Number	2	0 只有省 1 省市 2 省市区

事件
组件事件

名称	触发时机	返回值
change	选择完省市区	[省,市，区]视选择的type来定
changeLocation	选择完省市区	{lng(经度): xx, lat(纬度):xx}
changeZipcode	只有选择区后	邮编

使用

// vue2
<template>
<view class="content">
    <view class="form-item">
        <view class="form-item-label">省市区：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="1"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<2 ? '#666' : '#333')">
                    {{ region.length < 2 ? '请选择省市' : region[0] + region[1] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0]}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省+ 经纬度</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0] + ',经度：' + location.lng + ',纬度：' + location.lat}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市区+ 邮编</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" @changeZipcode="bindZipCodeChange" class="form-item-content" 
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] + ',邮编：' + zipCode}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
</view>
</template>
<script>
export default {
    data() {
        return {
            //todo 填入你的json文件地址
            jsonUrl: '',
            region: [],
            location: {},
            zipCode: ''
        }
    },
    methods: {
      bindRegionChange(region) {
        this.region = region
      },
      bindLocationChange(location) {
        this.location = location
      },
      bindZipCodeChange(zipCode) {
        this.zipCode = zipCode
      }
    }
}
</script>
<style>
page {
    background-color: #fff;
}
.form-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
    padding: 28rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #f8f8f8;
}
.form-item .form-item-label {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    white-space: nowrap;
    width: 200rpx;
}

.form-item .form-item-content {
    width: calc(100% - 200rpx);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.form-item-content .picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48rpx;
}

.picker .region-text {
    width: calc(100% - 46rpx);
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 48rpx;
    text-align: right;
    word-break: break-all;
}
.picker .right-icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 2rpx;
}
</style>

vue3 setup形式

<template>
<view class="content">
    <view class="form-item">
        <view class="form-item-label">省市区：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="1"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<2 ? '#666' : '#333')">
                    {{ region.length < 2 ? '请选择省市' : region[0] + region[1] }}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省：</view>
        <w-address-picker @change="bindRegionChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0]}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省+ 经纬度</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" class="form-item-content" :type="0"
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<1 ? '#666' : '#333')">
                    {{ region.length < 1 ? '请选择省' : region[0] + ',经度：' + location.lng + ',纬度：' + location.lat}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
    <view class="form-item">
        <view class="form-item-label">省市区+ 邮编</view>
        <w-address-picker @change="bindRegionChange" @changeLocation="bindLocationChange" @changeZipcode="bindZipCodeChange" class="form-item-content" 
        :json-url="jsonUrl">
           <view class="picker">
                 <view class="region-text" :style="'color:' + (region.length<3 ? '#666' : '#333')">
                    {{ region.length < 3 ? '请选择省市区' : region[0] + region[1] + region[2] + ',邮编：' + zipCode}}
                 </view>
       <image src="/static/images/icon_right.png" class="right-icon" />
             </view>
        </w-address-picker>
    </view>
</view>
</template>
<script setup>
import { ref } from 'vue'
// todo 填入你的json数据文件地址
const jsonUrl = ''
const region = ref([])
const location = ref({})
const zipCode = ref('')

// 当前选择的省市区
const bindRegionChange = (data) => {
   region.value = data
}

// 当前选择的经纬度
const bindLocationChange = (data) => {
 location.value = data
}

// 当前选择区的邮编
const bindZipCodeChange = (data) => {
     zipCode.value = data
}
</script>
<style>
page {
    background-color: #fff;
}
.form-item {
    display: flex;
    width: 100%;
    flex-direction: row;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
    padding: 28rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #f8f8f8;
}
.form-item .form-item-label {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;
    white-space: nowrap;
    width: 200rpx;
}

.form-item .form-item-content {
    width: calc(100% - 200rpx);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.form-item-content .picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48rpx;
}

.picker .region-text {
    width: calc(100% - 46rpx);
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 48rpx;
    text-align: right;
    word-break: break-all;
}
.picker .right-icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 2rpx;
}
</style>

示例省市区省市省

w-address-picker w-address-picker address-picker

更新记录

1.0.1（2023-06-12）

1.0.0（2023-05-30）

平台兼容性

w-address-picker

功能介绍

安装

使用

组件事件

功能介绍

安装

使用

组件事件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

w-address-picker

w-address-picker w-address-picker address-picker

更新记录

1.0.1（2023-06-12）

1.0.0（2023-05-30）

平台兼容性

w-address-picker

功能介绍

安装

使用

组件事件

功能介绍

安装

使用

组件事件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

w-address-picker

Modal title