h5+ 读取手机联系人并渲染

完整的代码

1. 该功能通过h5+ api的contacts获取到手机通讯录数据，然后使用mint-ui的indexlist排序显示出来。
2. 要注意数据的处理，特别是使用mt-cell，一定要注意数据格式和解构。
3. 使用indexlist排序涉及到第一个中文的拼音首字母，我使用的是vue-pyconst和vue-py-function文件里的外部js。（vue-pyconst.js太长，我这里就不复制粘贴了）
4. 使用mint-ui后，样式可能会错乱，超出被隐藏，没有完全分配布局等等....,要自己去修改样式。
5. 每一次访问通讯录后，要清空，不然数据会重复请求叠加。
   vue-py-function.js

import { pinyin } from './vue-pyconst.js'

export default {
  chineseToPinYin: function (l1) {
    var l2 = l1.length
    var I1 = ''
    var reg = new RegExp('[a-zA-Z0-9]')
    for (var i = 0; i < l2; i++) {
      var val = l1.substr(i, 1)
      var name = this.arraySearch(val, pinyin)
      if (reg.test(val)) {
        I1 += val
      } else if (name !== false) {
        I1 += name
      }
    }
    I1 = I1.replace(/ /g, '-')
    while (I1.indexOf('--') > 0) {
      I1 = I1.replace('--', '-')
    }
    return I1
  },
  arraySearch: function (l1, l2) {
    for (var name in pinyin) {
      if (pinyin[name].indexOf(l1) !== -1) {
        return this.ucfirst(name)
      }
    }
    return false
  },
  ucfirst: function (l1) {
    if (l1.length > 0) {
      var first = l1.substr(0, 1).toUpperCase()
      var spare = l1.substr(1, l1.length)
      return first + spare
    }
  }
}