微信小程序——城市/区县定位选择组件

前两天在实现一个城市选择器的需求的时候，在github上看到了BeijiYang同学的开源项目，觉得做的非常不错，不过是基于原生小程序写的，所以就花了点时间把他的项目基于mpvue框架改写了。方便让使用mpvue框架的同学使用。

贴一下原项目的地址，还在使用小程序自带框架的同学可以使用这个库哦 项目地址

先一起看一下实现的效果图:

城市选择器示例.gif

在改写完代码以后，我也来谈谈这个小组件里的实现逻辑。首先从布局开始，这个页面的布局结构由三个主要部分构成，页面顶部的搜索框，页面最右侧的字母列表栏，以及左边的最主要的城市列表部分。具体的页面代码我就不贴了，github链接我会放在文章尾部。

我们将地级市的数据存放到本地的city.js文件中，在这个city.js的文件中，还同时包括城市检索的首字母的数组数据，页面的城市列表以及首字母检索的数据就会从city.js中读取。在页面生命周期开始时，我们得获取当前设备的屏幕高度，用以计算右侧首字母列表的单个item高度，并且要将首字母检索的数组重组结构，最后绑定到当前页面的data下，如下的逻辑

const searchLetter = city.searchLetter;const cityList = city.cityList();const sysInfo = wx.getSystemInfoSync();console.log(sysInfo);const winHeight = sysInfo.windowHeight;console.log(winHeight);const itemH = winHeight / searchLetter.length;

searchLetter.map(  (item, index) => {    let temp = {};
    temp.name = item;
    temp.tHeight = index * itemH;
    temp.bHeight = (index + 1) * itemH;
    tempArr.push(temp);
  }
);console.log(tempArr);this.winHeight = winHeight;this.itemH = itemH;this.searchLetter = tempArr;this.cityList = cityList;this.getLocation();

在进入页面后，还需要定位当前的城市区县，所以有了上面源码的最后一行，getLocation()函数，这个函数的主要目的是为了获取到当前定位。

跟小程序原生项目不同的是我们的项目使用了Vuex来管理数据，所以原项目中需要全局保存的变量都被我使用了Vuex来管理，并且把通过腾讯地图API获取区县列表的逻辑也放入了Vuex内，让我们的组件内部只处理UI事件，变得更简洁干净，更易维护。

在点击了城市的Cell之后，接下来的操作就是通过腾讯地图API去请求接口，获取当前城市的附属区县数据，展示并可以再次点选。

/* component中的UI操作 */// 选择城市bindCity(e) {  this.condition = true;  this.changeCity({    city: e.currentTarget.dataset.city,    code: e.currentTarget.dataset.code
  });  this.scrollTopId = 'selectcounty';  this.completeList = [];  this.selectCounty();
}/* Vuex中的selectCounty()函数 */// 根据城市代码 定位区县[CITY_SELECT_COUNTY]({ commit, state }) {console.log('正在定位区县');let code = state.currentCityCode;
wx.request({  url: `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`,  success: function(res) {
    commit({      type: CITY_SELECT_COUNTY,      list: res.data.result[0]
    });    console.log(res.data);    console.log('请求区县成功' + `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`);
  },  fail: function() {    console.log('请求区县失败，请重试');
  }
});
},

这里就是主要的点选逻辑，接下来看看搜索框实现的搜索逻辑。我们的搜索框要求能够通过汉字或者拼音搜索，所以在搜索逻辑中，我们根据对象的short和shorter属性来进行匹配，具体的逻辑可以看如下代码:

/**
 * 搜索匹配逻辑
 */auto() {  let inputSd = this.inputName.trim();  let sd = inputSd.toLowerCase();  let num = sd.length;  const cityList = city.cityObjs;  let finalCityList = [];  let temp = cityList.filter(    item => {      let text = item.short.slice(0, num).toLowerCase();      // eslint-disable-next-line
      return (text && text == sd);
    }
  );  // 在城市数据中，添加简拼到“shorter”属性，就可以实现简拼搜索
  let tempShorter = cityList.filter(    itemShorter => {      if (itemShorter.shorter) {        let textShorter = itemShorter.shorter.slice(0, num).toLowerCase();        // eslint-disable-next-line
        return (textShorter && textShorter == sd);
      }
    }
  );  let tempChinese = cityList.filter(    itemChinese => {      let textChinese = itemChinese.city.slice(0, num);      // eslint-disable-next-line
      return (textChinese && textChinese == sd);
    }
  );  if (temp[0]) {
    temp.map(      item => {        let testObj = {};
        testObj.city = item.city;
        testObj.code = item.code;
        finalCityList.push(testObj);
      }
    );    this.completeList = finalCityList;
  } else if (tempShorter[0]) {
    tempShorter.map(      item => {        let testObj = {};
        testObj.city = item.city;
        testObj.code = item.code;
        finalCityList.push(testObj);
      }
    );    this.completeList = finalCityList;
  } else if (tempChinese[0]) {
    tempChinese.map(      item => {        let testObj = {};
        testObj.city = item.city;
        testObj.code = item.code;
        finalCityList.push(testObj);
      }
    );    this.completeList = finalCityList;
  }
}

到这里，搜索功能也完成了，剩下无非就是各个界面的通信、以及组件与页面间的通信了，肯定也是各位同学必备的基本功了，也就不讲了。有其他疑问的可以直接阅读源码。

下面放上github仓库地址: 微信小程序-城市选择组件

如果对你有帮助，请给我一个star谢谢。

同时谢谢原作者的开源，是你的开源让使用mpvue的同学得到帮助。

作者：Originalee
链接：https://www.jianshu.com/p/2db4e0e3bee8