UD5工具箱
操作步骤总览
使用本工具需要按照以下步骤进行操作。整个流程简单直观，无需安装任何软件或注册账号，直接在浏览器中即可完成所有操作。请确保使用支持 Contact Picker API 的浏览器（Chrome for Android 80+）以获得最佳体验。
第一步：环境准备
打开本工具页面后，首先检查浏览器是否支持 Contact Picker API。工具会自动进行兼容性检测，如果浏览器不支持，页面会显示相应的提示信息。由于 Contact Picker API 需要 HTTPS 环境才能正常工作，请确保页面地址以 https:// 开头。本工具已经部署在 HTTPS 环境中，开发者无需额外配置。如果使用本地开发环境，可以通过 localhost 进行测试，浏览器对 localhost 也会视为安全上下文。
第二步：选择联系人属性
在工具界面上方，你会看到一组属性选择复选框。这些复选框对应 Contact Picker API 支持的各种联系人属性。默认情况下，常用的属性（如姓名和电话）已经被勾选。你可以根据测试需求，勾选或取消勾选不同的属性。例如，如果你只想测试邮箱获取功能，可以只勾选 email 属性；如果需要测试完整功能，建议勾选所有可用属性。每次更改属性选择后，后续的 API 调用将使用新的属性配置。
第三步：触发联系人选择
点击页面上的"选择联系人"按钮，浏览器会弹出系统级的联系人选择界面。这个界面是由浏览器原生渲染的，外观和操作方式与手机通讯录应用类似。在弹出的界面中，你可以浏览联系人列表并选择一个或多个联系人。注意，此步骤必须由用户手动点击触发，不能通过脚本自动调用，这是 Contact Picker API 的安全设计要求。选择完成后，点击确认按钮返回网页。
第四步：查看选择结果
联系人选择完成后，工具会将 API 返回的数据以格式化的 JSON 格式显示在结果区域。你可以查看每个被选中联系人的各项属性值，包括姓名字符串、电话号码数组、邮箱地址数组、地址字符串等。如果选择了头像属性，还会显示头像图片的 Blob URL。仔细检查返回的数据结构，确认各项属性是否与你的预期一致。如果某些属性未被选择，返回的数据中将不包含对应字段。
第五步：分析数据结构
仔细观察返回的 JSON 数据结构，理解 Contact Picker API 的数据格式。返回的联系人信息是一个数组，每个元素代表一个被选中的联系人。联系人的各项属性以键值对形式存在，其中电话和邮箱通常以数组形式返回（因为一个人可能有多个电话号码和邮箱地址）。理解这些数据结构对于在实际项目中正确处理 API 返回值非常重要。开发者可以根据这些结构设计相应的数据模型和处理逻辑。
第六步：在实际项目中应用
通过本工具的测试，你已经掌握了 Contact Picker API 的基本使用方法。在实际项目中，你需要调用 navigator.contacts.select() 方法并传入所需的属性列表。确保在用户手势事件（如按钮点击）的处理函数中调用此方法，并正确处理返回的 Promise 对象。同时，建议添加错误处理逻辑来应对用户取消选择或浏览器不支持等情况。在生产环境中，还需要考虑降级方案，为不支持 Contact Picker API 的浏览器提供替代的联系人输入方式。