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

完整的代码

<template>
  <div class="contact">

    <div class="contact-indexlist-wrapper">
      <mt-index-list :height="mtIndexListHeight">
        <mt-index-section v-for="(item, index) in contactListArr" :key="index" :index="item.initial">
          <mt-cell
            v-for="(contactObj, index) in item.contactArr"
            :key="index"
            :title="contactObj.displayName"
            :label="contactObj.phoneNumbers.value"
            @click.native="onSelectContacts(contactObj)"
          ></mt-cell>
        </mt-index-section>
      </mt-index-list>
    </div>

  </div>
</template>

<script>
import vPinyin from '@/utils/vue-py-function.js'

export default {
  data () {
    return {
      // 给mt-index-list组件设一个高度，随意设，反正都要使用js更改
      mtIndexListHeight: 500,

      contactList: [],
      contactListArr: []
    }
  },

  created () {
  },

  mounted () {
    let windowWidth = document.documentElement.clientWidth
    this.mtIndexListHeight = document.documentElement.clientHeight - 11.6 * windowWidth / 100 - 30
  },

  methods: {
    // 获取通讯录列表数据
    getContact () {
      var that = this
      if (!window.plus) return
      // 获取通讯录对象
      window.plus.contacts.getAddressBook(window.plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {
        // 查找联系人
        addressbook.find(['displayName', 'phoneNumbers'], function (contacts) {
          that.dataFormatting(contacts)
        }, function () {
          this.$toast({ message: '获取联系人失败' })
        }, {multiple: true})
      }, function (e) {
        this.$toast({ message: '获取通讯录对象失败:' + e.message })
      })
    },

    // 通讯录列表的数据处理
    dataFormatting (contacts) {
      var that = this
      contacts.forEach(item => {
        let contactObj = {}
        // 这里必须得判断一下，因为他会把微信通讯录也一并读取了，但是微信通讯录只有分享，没有号码
        if (item.displayName && item.phoneNumbers[0]) {
          contactObj.displayName = item.displayName
          contactObj.phoneNumbers = item.phoneNumbers[0]
          that.contactList.push(contactObj)
        }
      })
      this.indexContactList()
    },

    // 将通讯录数据处理和 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 对应的数组
    indexContactList () {
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(initial => {
        let contactArr = this.contactList.filter(contact => {
          // 获取第一个汉字的拼音首字母
          var firstChineseInitial = this.getFirstChineseInitial(contact.displayName.substr(0, 1))
          // 判断第一个汉字的拼音首字母 === ABCDEFGHIJKLMNOPQRSTUVWXYZ
          if (firstChineseInitial === initial) return contact
        })

        this.contactListArr.push({
          initial,
          contactArr
        })
      })
    },

    // 调函数获取第一个汉字的首字母
    getFirstChineseInitial (firstChinese) {
      return vPinyin.chineseToPinYin(firstChinese).substr(0, 1)
    },

    // 点击选择某一联系人
    onSelectContacts (contactObj) {
      console.log(contactObj)
    }
  }
}
</script>

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
    }
  }
}