treadpit/wx_selectArea

微信小程序－省市(区)地址选择联动 🌋

wx_selectArea

地址联动选择器采用微信小程序的 picker-view 组件

模板引入

提供 template 模板引入

1. 引入wxml及wxss

// example.wxml
<import src="../../template/index.wxml"/>
<template is="areaPicker" data="{{...areaPicker}}" />

// example.wxss
@import '../../template/index.wxss';

2. 组件初始化

import initAreaPicker, { getSelectedAreaData } from '../../template/index';

const conf = {
	onShow: () => {
    initAreaPicker();
  },
};

Page(conf);

2.1 自定义配置

目前仅支持是否隐藏第三极选择栏，默认显示

import initAreaPicker from '../../template/index';

const conf = {
	onShow: () => {
    initAreaPicker({
      hideDistrict: true,
    });
  },
};

Page(conf);

2.2 获取当前选择的省市区信息

import { getSelectedAreaData } from '../../template/index';

const conf = {
	btnClick() {
		console.table(getSelectedAreaData()); 
	},
};

Page(conf);

其他

API 请求地址在 config 文件夹中配置，GET 请求接口类似 https://your.com/api/area?code=123，服务端返回数据可参考例子中格式即可直接套用模板。

// request

http('https://your.com/api/area?code=0');

// response
{
    "message": "",
    "result": [
        {
            "code": 340000,
            "fullName": "安徽省",
            "mark": "",
            "outofrange": 0,
            "printMark": ""
        },
        {
            "code": 820000,
            "fullName": "澳门特别行政区",
            "mark": "",
            "outofrange": 0,
            "printMark": ""
        },
        ....
    ]
}

截图