uniapp树级通讯录

### 实现树状结构通讯录

在 UniApp 中实现树状结构的通讯录主要涉及两个方面的工作：一是从手机中读取并整理通讯录数据；二是设计界面来展示这些数据。对于前者，可以通过调用 `plus.contacts` API 来访问设备上的联系人列表[^1]。

为了构建分组效果，即按照字母顺序对姓名首字母进行分类显示，通常的做法是从获取的数据集中提取每个名字的第一个字符，并转换成拼音形式以便于排序和分组操作。这一步骤需要用到第三方库如 `js-pinyin` 来辅助完成汉字转拼音的任务[^4]：

import Pinyin from 'js-pinyin';

// 假设 contacts 是已经获得的一系列联系人的数组对象
let sortedContacts = [];
contacts.forEach(contact => {
    let pinyin = Pinyin.getFullChars(contact.name.charAt(0)).toUpperCase();
    contact.pinyinFirstChar = pinyin;
});

接下来就是创建一个 Vue 组件用于渲染上述经过处理后的联系人信息。此组件应该能够接收传入的数据作为属性(prop)，并通过计算属性(computed property) 或者 watch 监听器动态更新视图中的内容变化情况。下面是一个简单的例子说明如何定义这样一个组件以及其内部逻辑：

<template>
  <view class="contact-list">
    <!-- 遍历按拼音首字母分好类别的联系人群 -->
    <block v-for="(group, index) in groupedContacts" :key="index">
      <text>{{ group.key }}</text> <!-- 显示当前组对应的字母 -->

      <!-- 展示该类别下的具体成员 -->
      <navigator url="" hover-class="none"
        v-for="item of group.items"
        :key="item.id"
      >
        {{ item.name }}
      </navigator>

    </block>
  </view>
</template>

<script>
export default {
  props: ['contacts'],
  
  computed: {
    // 对输入参数做进一步加工形成新的输出结果
    groupedContacts() {
      const groups = {};
      
      this.contacts.sort((a,b)=>{
          return a.pinyinFirstChar.localeCompare(b.pinyinFirstChar);
      });

      this.contacts.forEach(item=>{
          if(!groups[item.pinyinFirstChar]){
              groups[item.pinyinFirstChar]={
                  key:item.pinyinFirstChar,
                  items:[]
              };
          }
          
          groups[item.pinyinFirstChar].items.push({
            id:item.id,
            name:item.name
          });
      });

      return Object.values(groups);
    },
  },

};
</script>

通过这种方式就可以有效地组织起具有层次感的通讯录页面，在视觉上给用户提供更好的浏览体验的同时也提高了查找效率。