专栏首页编程之旅微信小程序——城市/区县定位选择组件

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nginx配置二级域名

    最近为了练手Vue框架,写了一个博客项目,昨天刚刚把个人博客部署上线,因为前后端分离,所以使用Ajax来请求后端api接口获取数据,部署的过程中碰到了一个坑。我...

    Originalee
  • iOS开发——MJExtension的实际使用,JSON格式解析

    现在的iOS在跟服务器进行交互式,采取的常用数据格式是XML和JSON,而今天就探讨一个JSON解析框架 —— MJExtension。

    Originalee
  • React-Native 在 SectionList 组件中实现九宫格布局

    随着 ReactNative 的不断更新,ListView 这个组件逐步被 FlatList 和 SectionList 取代。ListView 从出生之后就饱...

    Originalee
  • MPchart使用详解及详细属性(一)

    项目源代码:https://github.com/libin7278/MpChart

    先知先觉
  • 据说以后在探头下面用帽子挡脸没用了:SymmNet遮挡物检测的对称卷积神经网络

    从立体图像或视频帧中进行遮挡物的检测,对许多计算机视觉应用而言都是非常重要的。先前的研究重点主要是将其与视差或光流的计算捆绑在一起,这导致了严重的 chicke...

    用户1737318
  • 如何提高小程序的用户留存率?用完即走,走了还会回来

    对商家来说,如果用户“走了不再回来”,即小程序不能被用户反复使用,那就有些令人局促不安了。这就关系到小程序的留存能力,那么,如何才能有效地提高小程序的留存率?

    场景录小程序
  • laravel 5.2使用的那些坑

    下载 illuminate/html后

    lilugirl
  • TF入门04-TF实现Word2Vec

    Word2Vec是一组用来产生词嵌入的模型,包括两种主要的模型:skip-gram和CBOW。

    公众号-不为谁写的歌
  • 九大深度学习框架

    开源的深度学习神经网络正步入成熟,而现在有许多框架具备为个性化方案提供先进的机器学习和人工智能的能力。那么如何决定哪个开源框架最适合你呢?本文试图通过对比深度学...

    朱晓霞
  • 资源 | 从TensorFlow到PyTorch:九大深度学习框架哪款最适合你?

    选自CIO 作者:Mitch De Felice 机器之心编译 参与:Jane W、黄玉胜 开源的深度学习神经网络正步入成熟,而现在有许多框架具备为个性化方案提...

    机器之心

扫码关注云+社区

领取腾讯云代金券