前两天在实现一个城市选择器的需求的时候，在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的同学得到帮助。
网友评论