UD5工具箱
Contact Picker API
Contact Picker API 是 W3C 标准化进程中的一项 Web API，允许网页应用请求用户从设备通讯录中选择联系人并获取选定联系人的基本信息。该 API 的设计目标是为 Web 应用提供访问设备通讯录的安全途径，同时最大限度地保护用户隐私。与传统的文件系统访问不同，Contact Picker API 不允许应用读取完整通讯录，只能获取用户明确选择的联系人数据。本工具的核心功能就是演示和测试这项 API 的实际行为。
Web API
Web API（Web Application Programming Interface）是浏览器提供的一系列编程接口，允许 JavaScript 代码访问设备硬件功能和系统服务。Contact Picker API 属于 Web API 家庭的一员，类似于 Geolocation API（获取地理位置）、Camera API（访问摄像头）等。Web API 通常通过 navigator 对象暴露给 JavaScript，并且大多需要用户授权或特定环境条件（如 HTTPS）才能使用。了解 Web API 的工作原理有助于开发者更好地使用浏览器提供的各种能力。
联系人属性
联系人属性是指 Contact Picker API 可以获取的联系人信息字段。当前 API 规范定义了五种标准属性：name（联系人姓名）、tel（电话号码）、email（电子邮件地址）、address（邮政地址）和 icon（联系人头像图片）。每种属性都有其特定的数据格式，例如 name 返回字符串，tel 和 email 返回数组（因为一个联系人可能有多个电话号码和邮箱地址），address 返回字符串，icon 返回 Blob 对象。本工具允许开发者自由选择需要获取的属性，从而理解每种属性的数据格式和获取方式。
浏览器兼容性
浏览器兼容性是指不同浏览器和浏览器版本对特定 Web API 的支持程度。Contact Picker API 目前主要在 Chrome for Android 80 及以上版本中得到支持，桌面版 Chrome、Safari、Firefox 等浏览器尚未支持此 API。这种兼容性差异意味着开发者在使用 Contact Picker API 时必须检测浏览器支持情况，并为不支持的浏览器提供降级方案。本工具内置了兼容性检测功能，会自动检查当前浏览器是否支持该 API，并给出相应的提示信息。
用户手势触发
用户手势触发是 Contact Picker API 的一项重要安全机制。这意味着调用 navigator.contacts.select() 方法必须在用户主动操作（如点击按钮）的事件处理函数中进行，不能在页面加载时自动调用，也不能在定时器或异步回调中调用。浏览器通过这种限制防止恶意脚本在用户不知情的情况下获取通讯录信息。在本工具中，用户必须点击"选择联系人"按钮才能触发联系人选择器，这是用户手势触发机制的具体体现。开发者在实现自己的应用时也必须遵循这一设计原则。
HTTPS 安全上下文
HTTPS 安全上下文是 Contact Picker API 正常运行的必要条件。浏览器要求页面通过 HTTPS 协议加载才能使用 Contact Picker API，这是因为通讯录属于敏感个人信息，需要在加密传输通道中处理。本地开发环境中的 localhost 也会被视为安全上下文，方便开发者在本地进行测试。本工具部署在 HTTPS 环境中，确保 API 能够正常工作。如果开发者在本地测试时遇到 API 不可用的情况，请检查是否使用了 localhost 或配置了本地 HTTPS 证书。
navigator.contacts.select()
navigator.contacts.select() 是 Contact Picker API 的核心方法，用于弹出联系人选择器并返回用户选择的联系人数据。该方法接受一个配置对象作为参数，用于指定需要获取的联系人属性（properties 数组）和是否允许多选（multiple 布尔值）。方法返回一个 Promise 对象，解析后得到一个包含联系人信息的数组。如果用户取消选择，Promise 会被拒绝。在本工具中，该方法的调用过程和返回结果被完整展示，帮助开发者理解 API 的实际使用方式。
Promise 异步操作
Promise 是 JavaScript 中处理异步操作的标准机制。Contact Picker API 的 select() 方法返回一个 Promise 对象，因为联系人选择涉及用户交互，需要一定时间才能完成。开发者可以使用 async/await 语法或 .then()/.catch() 链式调用来处理 Promise 的结果。在本工具的实现中，select() 调用被封装在 async 函数中，通过 await 关键字等待用户选择完成，然后直接获取返回的联系人数据。理解 Promise 的工作原理对于正确使用 Contact Picker API 至关重要。