HTML5实现调用手机通讯录，获取手机通讯录信息。

Question

HTML5实现调用手机通讯录，获取手机通讯录信息。
HTML5实现调用手机通讯录，获取手机通讯录信息。
HTML5实现调用手机通讯录，获取手机通讯录信息。

Answer 1

• 直接无法读，和file控件一样需要用户自己选择，用select方法

• 网址需要使用https协议，要不无法使用contacts对象。

• 用最新版的移动端chrome测试，内置的浏览器虽然内核是webkit，但是很多没实现通讯录选择器，会报错【unable to open a contact selector】

  <button onclick="choose()">读取通讯录</button>
  <script>
    async function choose() {
        if (!navigator?.contacts?.select) { alert('浏览器不支持！'); return; }
        const props = await navigator.contacts.getProperties();
        alert(JSON.stringify(props))
        const opts = { multiple: true };
        try {
            var rs = await navigator.contacts.select(props, opts);
  
            alert(JSON.stringify(rs))
        }
        catch (e) { alert('获取失败\n' + e) }
    }
  </script>
  

  具体参数参考下面链接
  

  ContactsManager: select() method - Web APIs | MDN The select() method of the ContactsManager interface returns a Promise which, when resolved, presents the user with a contact picker which allows them to select contact(s) they wish to share. This method requires a user gesture for the Promise to resolve. https://developer.mozilla.org/en-US/docs/Web/API/ContactsManager/select