ContactsManager - 允许用户从其联系人列表中选择联系人

ContactsManager 是 Contact Picker API 的接口，允许用户从其联系人列表中选择联系人，并与网站或应用程序共享所选条目的有限详细信息。

可通过全局 navigator.contacts 属性使用 ContactsManager。

方法

select()

返回一个 Promise，在解析后，向用户提供一个联系人选择器，该选择器允许他们选择要共享的联系人。

getProperties()

返回一个 Promise，其解析为一个包含 strings 的 Array，指示哪些联系人属性可用。

实例

功能检测

以下代码检查是否支持联系人选择器 API。

const supported = ('contacts' in navigator && 'ContactsManager' in window);

检查支持的属性

以下异步函数使用 getProperties 方法检查支持的属性。

async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes('name')) {
    // 运行支持名称的相关代码
  }
  if (supportedProperties.includes('email')) {
    // 运行支持邮箱的相关代码
  }
  if (supportedProperties.includes('tel')) {
    // 运行支持电话号码的相关代码
  }
  if (supportedProperties.includes('address')) {
    // 运行支持地址的相关代码
  }
  if (supportedProperties.includes('icon')) {
    // 运行支持地址的相关代码
  }
}

选择联系人

下面的实例设置要为每个联系人检索的属性数组，并设置选项对象以允许选择多个联系人。

然后定义一个异步函数，该函数使用 select() 方法为用户提供联系人选择器界面并处理选定的结果。

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

async function getContacts() {
  try {
      const contacts = await navigator.contacts.select(props, opts);
      handleResults(contacts);
  } catch (ex) {
      // 在这里处理任何错误。
  }
}

handleResults() 是开发人员定义的函数。

规范

规范	状态	备注
Unknown ContactsManager 的定义	Unknown	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Web 网络联系人选择器
• glitch 的联系人选择器演示