最近有一个需求,就是做一个类似通讯录的玩意。这里其实前端的话网上挺多轮子的,直接改改就好了,但是有一点就是在得到汉字之后如何根据拼音的首字母排序并且分组就是一个小问题,当然解决起来也是挺简单的啰。由于我实在小程序中的实现,所以就用的是js。
首先我们需要去github上找到一个开源的汉字库,其实说白了就是一个码表,自己也可以弄,但是没有必要重复造轮子的。
首先,我找的是这个库,star人挺多的 github传送门
也有那种带声标的,但是没必要,这个库就很OK了。由于小程序这边安卓是不能使用localCompare的,所以我们还是使用码表吧。(ps:推荐使用码表,因为localCompare存在兼容性问题,与其碰到问题,不如直接就使用没问题的解决方案)
然后就很简单了,将开源库下面的那个index.js复制到你的util工具包的一个类当中,在需要的页面引入
import Pinyin from '../../utils/pinyin'
引入之后的核心工具方法如下(需要传入需要排序的中文字符数组,变量命名有点随意,不喜勿喷)
function pinyinSort(name) {
var pinyinArray = new Array()
for (var bukn = 0; bukn < name.length; bukn++) {
var o = new Object()
var ken = Pinyin.getSpell(name[bukn], function (charactor, spell) {
console.log(charactor, spell);
return spell[1];
});
o.name = name[bukn]
o.pinyin = ken.split(',').join('')
pinyinArray.push(o)
}
console.log("pinyinArray")
console.log(pinyinArray)
// pinyinArray = pinyinArray.sort(compare("pinyin"))
let map = {
title: '',
datas: []
}
pinyinArray.forEach((item, index) => {
if (!map[item.pinyin[0].toUpperCase()]) {
map[item.pinyin[0].toUpperCase()] = {
title: item.pinyin[0].toUpperCase(),
datas: []
}
}
map[item.pinyin[0].toUpperCase()].datas.push({
name: item.name,
pinyin: item.pinyin
})
}
)
console.log("map")
console.log(map)
var turn = new Array()
var letters = "*ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
for (var i = 1; i < letters.length; i++) {
if (map[letters[i]]) {
var obj = new Object()
//自己改改命名改成自己需要的
obj.title = letters[i]
obj.datas = map[letters[i]].datas
turn.push(obj)
}
}
console.log("trun")
console.log(turn)
return turn;
}
之后前端的那个界面什么的就可以直接去git上面找了啰。关键一步都搞完了,只需要将排序好的怼上去即可。