无需登录 数据私有 本地保存

Contact Picker 多属性获取演示 - 选择联系人信息

API演示 移动端 Contact Picker 演示 联系人 选择
39
0
0
0

Contact Picker — 联系人选择器演示

使用 Web Contact Picker API 从设备中选择联系人并获取多属性信息

选择属性

勾选您希望从联系人中获取的属性：

使用提示
  • 此 API 主要在 Chrome Android 上支持
  • 桌面端 Chrome 可能不支持该 API
  • 需要 HTTPS 或 localhost 环境
  • 用户必须手动选择联系人才能获取信息
  • 不会在未经用户同意的情况下自动获取联系人
选中的联系人 0 
暂无数据

点击「选择联系人」按钮开始

选中的联系人将显示在这里

常见问题
Contact Picker API 是什么？
Contact Picker API 是 Web Contacts API 的一部分，允许 Web 应用通过浏览器原生界面访问用户设备上的联系人信息。用户必须主动选择联系人，充分保护隐私。它通过 navigator.contacts.select() 方法实现，目前主要在 Chrome 80+ for Android 上可用。
支持哪些属性？
当前规范支持以下属性：name（姓名，含 givenName/familyName 等）、tel（电话号码数组）、email（邮箱地址数组）、address（地址信息，含国家/城市/街道等）、icon（联系人头像 Blob）。您可以在本工具中勾选需要的属性进行测试。
为什么我的浏览器无法使用？
目前 Contact Picker API 仅在 Chrome for Android（版本 80+） 上获得较好支持。桌面端 Chrome、Safari、Firefox 等浏览器暂不支持。如果您在桌面端使用，会看到兼容性提示。建议使用 Android 手机上的 Chrome 浏览器访问此工具。同时需要确保网站运行在 HTTPS 或 localhost 环境下。
隐私安全如何保障？
Contact Picker API 设计时充分考虑了隐私保护：① 必须由用户主动触发（如点击按钮）；② 浏览器会弹出原生联系人选择器，用户完全掌控选择哪些联系人；③ 只能获取用户明确选择的联系人信息；④ 无法在后台静默读取联系人；⑤ 网站需要 HTTPS 安全连接。这与原生应用的 contacts 权限类似。
可以一次选择多个联系人吗？
可以！在调用 navigator.contacts.select() 时，通过设置 { multiple: true } 选项，用户就可以在联系人选择器中勾选多个联系人。本工具默认启用了「允许多选联系人」开关，您可以根据需要切换。
联系人头像（icon）返回的是什么格式？
当请求 icon 属性时，浏览器会返回 Blob 对象数组。每个 Blob 对象可以通过 URL.createObjectURL() 转换为可显示的 URL。本工具会自动处理这个转换，将头像以图片形式展示在联系人卡片中。注意：并非所有联系人都设置了头像。
🔧 相关工具