对城市名搜索（汉字、拼音）功能的改进 / 小程序城市区县定位模块改进
效果演示
在真机预览的画面是非常流畅的
###支持搜索335个城市(及相应级别地区)。截至目前，最新的国家统计局2016年统计年鉴中,地级市291个，地级行政区划334个。
项目仓库
微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用
改进的问题
小程序项目中需要城市区县定位功能，就自己写了个小程序城市/区县定位选择模块，支持汉字、拼音搜索，之前一篇文章介绍了城市名搜索功能的实现。
后发现有的地级市搜不到，必须从侧边栏搜索首字母，再点击选择。原因在于对应城市名-拼音名的JSON数据不全。为了提升用户体验，决定改进下。
思路
目前城市数据的结构：
[...,{ id: '8',provincecode: '130000',city: '张家口市',code: '130700',initial: 'Z',short: 'Zhangjiajie' },...
]
为了不动代码逻辑，通过仅仅修改数据达到目的，决定在目前城市数据的基础上，增加一条拼音属性。方法是，利用新找的数据，对旧有数据进行匹配和填充。
[ ...{ label: '张家口Zhangjiakou0313',name: '张家口',pinyin: 'Zhangjiakou',zip: '0313' },...
]
问题一
地名格式差异
市
地区
X族自治州
虽然字符串尾部不统一，但地名头部一般不重复，可以考虑只匹配前两个字
...cityObj.map( //项目中原有的，待补充的(item) => {biggerObj.map( //后找的，更全的(bItem) => {if (item.city.slice(0,2) === bItem.name.slice(0,2)) {item.short = bItem.pinyintempArr.push(item)}})}
)console.log(tempArr.length) //经过加工，增加了属性的
console.log('cityObj: '+cityObj.length) //项目原有的
输出
347
cityObj: 337
问题二
发现得到的数字竟然比原来长10，说明有重复匹配现象
利用变量计数，发现重复的
let tempArr = []cityObj.map((item) => {let a = 0biggerObj.map((bItem) => {if ((a === 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {item.short = bItem.pinyintempArr.push(item)a++} else if ((a !== 0) && (item.city.slice(0,2) === bItem.name.slice(0,2))) {console.log(a)console.log(item)console.log(bItem)console.log("---------------------------")}})}
)输出
1
{ id: ‘31’,
provincecode: ‘150000’,
city: ‘巴彦淖尔市’,
code: ‘150800’,
initial: ‘B’,
short: ‘Bayannaoer’ }
{ label: ‘巴彦Bayan0451’, name: ‘巴彦’, pinyin: ‘Bayan’, zip: ‘0451’ } ---------------------------
1
{ id: ‘163’,
provincecode: ‘410000’,
city: ‘三门峡市’,
code: ‘411200’,
initial: ‘S’,
short: ‘Sanmenxia’ }
{ label: ‘三门Sanmen0576’,
name: ‘三门’,
pinyin: ‘Sanmen’,
zip: ‘0576’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘8’,
provincecode: ‘130000’,
city: ‘张家口市’,
code: ‘130700’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: ‘0512’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家口Zhangjiakou0313’,
name: ‘张家口’,
pinyin: ‘Zhangjiakou’,
zip: ‘0313’ } ---------------------------
1
{ id: ‘190’,
provincecode: ‘430000’,
city: ‘张家界市’,
code: ‘430800’,
initial: ‘Z’,
short: ‘Zhangjiajie’ }
{ label: ‘张家港Zhangjiagang0512’,
name: ‘张家港’,
pinyin: ‘Zhangjiagang’,
zip: '0512’ }
335 //经过加工，增加了属性的
cityObj: 337 //项目原有的
由此
发现了重复匹配的，就两三个，手动改了。
看数字，还少了两个，说明长列表里有缺少的，检查一下
cityObj.map((item) => {let a = 0biggerObj.map((bItem) => {if (item.city.slice(0,2) === bItem.name.slice(0,2)) {item.short = bItem.pinyintempArr.push(item)a++}})if (a===0) {console.log("----------")console.log(item)} })发现是后者缺了这两个
荷泽市
普洱市
手动加上
##导出使用
最后用fs模块导出，保存使用。
关于fs模块的使用，参考这一篇的代码
然后又优化了一下样式
项目仓库
微信小程序 城市/区县定位选择模块 汉字/拼音搜索 可直接使用
效果演示
在真机预览的画面是非常流畅的
对城市名搜索（汉字、拼音）功能的改进 / 小程序城市区县定位模块改进相关推荐
- 独家强大情侣头像网名个性签名多功能工具微信小程序源码下载
强大的多功能情侣小程序源码 内含N款功能,每一款都是独特的 列如的功能有: 情侣头像(这个大家都知道哈,就不用我介绍了) 情侣网名(这个也就不用我介绍了看名字就知道了 网名生成(根据你输入的文字生成网 ...
- Delphi学习之函数 ⑨汉字拼音功能函数
//▎============================================================▎// //▎=====================⑨汉字拼音功能函数 ...
- uniapp中的分享功能实现(APP,小程序，公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...
- 新功能：个人小程序直接打开公众号链接
在此之前,想要从小程序里面跳转一个链接,要使用web-view才可以,而且个人 <web-view src="https://www.baidu.com/"></ ...
- 【小程序源码】升级版王者荣耀铭文多功能助手微信小程序源码下载
这是一个王者铭文小程序 支持每一个英雄的铭文出装推荐查看 支持铭文组合模拟数据 另外还支持游戏重复名生成和空白名生成 比之前分享的一款单一铭文好一点吧 废话不多说,下面就一起来看看小编的测试演示图吧! ...
- 【免费】多功能工具箱微信小程序源码，免服务器和域名【亲测】
这是一个超有实用性的多功能工具箱小程序,具有48种实用性功能.是一个多种功能融为一体的小程序,让挺多人喜欢,同时这款小程序时适合小白操作 这款小程序不需要服务器和域名,直接上传开发者工具修改小程序ID ...
- 升级版王者荣耀铭文多功能助手微信小程序源码下载-支持多种流量主
这是一个王者铭文小程序 支持每一个英雄的铭文出装推荐查看 支持铭文组合模拟数据 另外还支持游戏重复名生成和空白名生成 比之前分享的一款单一铭文好一点吧 另外该款小程序还支持多种流量主模式 比如:激励视 ...
- 小程序源码：升级版王者荣耀铭文多功能助手微信小程序
这是一个王者铭文小程序 支持每一个英雄的铭文出装推荐查看 支持铭文组合模拟数据 另外还支持游戏重复名生成和空白名生成 比之前分享的一款单一铭文好一点吧 另外该款小程序还支持多种流量主模式 比如:激励视 ...
- 小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
最新文章
- 「AI初识境」激活函数：从人工设计到自动搜索
- 你写的Python代码规范吗？
- MATLAB 图形着色
- java是值传递还是引用传递_Java 到底是值传递还是引用传递？
- BZOJ 1018: [SHOI2008]堵塞的交通traffic
- cmd sc命令进行服务操作
- Vivado常见问题集锦
- AWS 专家教你快速使用 Spring Boot 和 DJL！
- python函数名的应用、闭包和迭代器
- 鲁棒控制 matlab程序,鲁棒控制的在matlab中的程序
- bootstrap框架写手机端app模板也很漂亮
- html中header怎么设置,怎么在html中设置header
- [brew]切换brew源
- 职能部门绩效考核指标设置
- Ceres Solver (ubuntu 安装)
- 建网站还有用吗？现解说您的网站不赚钱，同行在盈利
- switch怎么切换服务器账号,任天堂eshop如何换区 switch账号如何切换其他服地区
- JavaScript中文与阿拉伯数字互相转换
- Python分析抖音数据，让视频爆起来！
- android应用商店升级标准,五大应用商店宣布：共同推进安卓APP升级64位架构