城市选择器小程序实现

1.效果图

2.使用方法

# 城市选择器，城市数据库可自己导出

##后台数据API 由HotApp小程序统计提供并维护，如果需要导出并部署在公司的生产环境，最后有SQL导出下载地址

## 使用方法

- 复制pages/district到你的项目目录

- 把样式文件district.wxss引入到您调用本插件的作用域

`@import "你的路径/district/wxParse.wxss";`

- 在需要使用的模版的x.wxml中引入模版文件wxParse.wxml

```javascript

<import src="../district/district.wxml"/>

<template is="district" data="{{districts}}" />

```

- 在对应的js中引入district.js文件

`var WxParse = require('你的路径/district/district.js');`

- 使用:

在你的js文件中, 必须要绑定四个事件:

getProvinces、getCities、getDistricts和finish

其中

getProvinces事件需要调用districts.getProvinces(this);

getCities事件需要调用districts.getCities(this, event);

getDistricts事件需要调用districts.getDistricts(this, event);

finish事件需要调用districts.finish(this, event);

## 数据来源

数据来源于高德地图, 从高德地图的行政区划查询中找到了api请求地址, 然后再写脚本把高德所有的数据全部导入到hotapp的数据库中

## 数据库表设计

高德地图返回的数据格式是:

```json

{

    adcode: "220100"

  center: "125.3245,43.886841"

  citycode: "0431"

  districts: []

  level: "city"

  name: "长春市"

}

```

数据库字段设计为:

```sql

CREATE TABLE `tbl_districts` (

  `adcode` char(6) COLLATE utf8_unicode_ci NOT NULL,

  `name` varchar(20) COLLATE utf8_unicode_ci NOT NULL,

  `lng` decimal(12,8) unsigned NOT NULL,

  `lat` decimal(12,8) unsigned NOT NULL,

  `level` varchar(10) COLLATE utf8_unicode_ci NOT NULL,

  `parent_adcode` char(6) COLLATE utf8_unicode_ci NOT NULL,

  `created_at` timestamp NULL DEFAULT NULL,

  `updated_at` timestamp NULL DEFAULT NULL,

  PRIMARY KEY (`adcode`),

  KEY `tbl_districts_parent_adcode_index` (`parent_adcode`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

```

其中, lng表示经度, lat表示纬度, level有"province"、"city"和"district"三种类型

## 接口使用方法

一共就一个接口: `GET /districts`, 如果不带参数, 表示获取的是所有province级别的数据, 如果带上参数parent_adcode, 表示获取指定的parent_adcode的数据.

比如: 要获取所有province级别的数据:返回格式为:

```json

[

  {

    "adcode": 110000,

    "name": "北京市",

    "lng": "116.40528500",

    "lat": "39.90498900",

    "level": "province",

    "parent_adcode": ""

  },

  {

    "adcode": 120000,

    "name": "天津市",

    "lng": "117.19018200",

    "lat": "39.12559600",

    "level": "province",

    "parent_adcode": ""

  },

  ...

    {

    "adcode": 420000,

    "name": "湖北省",

    "lng": "114.29857200",

    "lat": "30.58435500",

    "level": "province",

    "parent_adcode": ""

  },

  ...

]

```

然后如果需要获取湖北省所有的city, 返回格式为:


```json

[

  {

    "adcode": 420100,

    "name": "武汉市",

    "lng": "114.29857200",

    "lat": "30.58435500",

    "level": "city",

    "parent_adcode": "420000"

  },

  {

    "adcode": 420700,

    "name": "鄂州市",

    "lng": "114.89059300",

    "lat": "30.39653600",

    "level": "city",

    "parent_adcode": "420000"

  },

  {

    "adcode": 420800,

    "name": "荆门市",

    "lng": "112.20425100",

    "lat": "31.03542000",

    "level": "city",

    "parent_adcode": "420000"

  },

  ...

]

```

3.代码实现

{
    "pages": [
        "pages/index/index",
        "pages/style1/index",
        "pages/style2/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fc8e5d",
        "navigationBarTitleText": "城市选择器",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "color": "#b3b3b3",
        "selectedColor": "#fc8e5d",
        "backgroundColor": "#f5f5f7",
        "borderStyle": "white",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "城市选择",
                "iconPath": "images/1_4.png",
                "selectedIconPath": "images/1_5.png"
            },
            {
                "pagePath": "pages/index/index",
                "text": "占位图标",
                "iconPath": "images/1_2.png",
                "selectedIconPath": "images/1_3.png"
            }
        ]
    },
    "sitemapLocation": "sitemap.json"
}

/*
城市选择器
*/
//app.js
var hotapp = require('util/hotapp.js');
App({
  onLaunch: function () {
    //一行代码接入HotApp小程序统
    //统计接入成功后 会自动统计 今日启动数 昨日启动数 今日新增用户 昨日新增用户  今日活跃 昨日活跃数 今日累计用户
    hotapp.init("hotapp22259962");
  }
})

<!-- district.wxml -->
<template name="district">
    <block wx:if="{{districts.showProvinces}}">
        <scroll-view scroll-y="true"  class='district-section-wrap'>
            <view id="province" class='district-section'>
                <block wx:for="{{districts.provinces}}" >
                    <view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="getCities">
                        {{item.name}}
                        <image class="district_arrow" src="../../images/1_7.png" ></image>
                    </view>
                </block>
            </view>
        </scroll-view >
    </block>
    <block wx:if="{{districts.showCities}}">
        <scroll-view scroll-y="true"  class='district-section-wrap' >
            <view id="city" class='district-section'>
                <block wx:for="{{districts.cities}}">
                    <view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="getDistricts">
                        {{item.name}}
                        <image class="district_arrow" src="../../images/1_7.png" ></image>
                    </view>
                </block>
            </view>
        </scroll-view > 
    </block>
    <block wx:if="{{districts.showDistricts}}">
        <scroll-view scroll-y="true"  class='district-section-wrap' >
            <view id="town" class='district-section'>
                <block wx:for="{{districts.districts}}">
                    <view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="finish">
                        {{item.name}}
                        <image class="district_arrow" src="../../images/1_7.png" ></image>
                    </view>
                </block>
            </view>
        </scroll-view >
    </block>
</template>

/*

*/
var host = 'https://sunjiaoshou/api/districts';
var districts = {
    provinces: [],
    cities: [],
    districts: [],
    showProvinces: false,
    showCities: false,
    showDistricts: false,
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
};

//查询
function query(parent_adcode,cb){
    var adcode = '';

    //判断parent_adcode是不是function类型
    if((typeof parent_adcode == "function")){
        cb = parent_adcode;
    }else{
        adcode = parent_adcode;
    }

    wx.request({
        url: host, //仅为示例，并非真实的接口地址
        data: {
            parent_adcode: adcode 
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            typeof cb == "function" && cb(res.data)
        }
    })
}

/**
 * 获取省份
 */
function getProvinces(that) {
    query(function(data) {
        districts.provinces = data;
        if (data.length == 0) {
            getDistricts.showProvinces = false;
        } else {
            districts.showProvinces = true;
        }
        districts.showCities = false;
        districts.showDistricts = false;
        districts.selectedCity = '';
        districts.selectedDistrict = '';
        that.setData({
            districts: districts
        });
    });
}

/**
 * 获取城市
 */
function getCities(that, event) {
    var adcode = event.currentTarget.dataset.adcode;
    var provinceName = event.currentTarget.dataset.name;
    query(adcode, function(data) {
        districts.cities = data;
        districts.selectedProvince = provinceName;  
        districts.showProvinces = false;
        if (data.length == 0) {
            districts.showCities = false;
        } else {
            districts.showCities = true;
        }
        districts.selectedDistrict = '';
        districts.showDistricts = false;
        that.setData({
            districts: districts
        });
    });
}

/**
 * 获取地区
 */
function getDistricts(that, event) {
    var adcode = event.currentTarget.dataset.adcode;
    var cityName = event.currentTarget.dataset.name;
    query(adcode, function(data) {
        districts.districts = data;
        districts.selectedCity = cityName; 
        districts.showProvinces = false;
        districts.showCities = false;
        if (data.length == 0) {
            districts.showDistricts = false;
        } else {
            districts.showDistricts = true;
        }
        that.setData({
            districts: districts
        });
        console.log(that.data);
    });
}

/**
 * 选择完成
 */
function finish(that, event) {
    districts.showProvinces = false;
    districts.showCities = false;
    districts.showDistricts = false;
    districts.selectedDistrict = event.currentTarget.dataset.name;
    that.setData({
        districts: districts
    });
}

module.exports = {
  getProvinces: getProvinces,
  getCities: getCities,
  getDistricts: getDistricts,
  finish: finish
}