如何使用js（Reactjs/NextJs）从网络创建新的手机联系人？

Question

我正在尝试使用 js 创建新联系人。我只在这里找到了从手机获取所有联系人的文档https://developer.mozilla.org/en-US/docs/Web/API/ContactsManager/select。是否有一些库可以帮助我解决这个问题，或者这只能通过本机反应来实现？

Answer 1

有点老话题，但如果有人正在寻找答案......

有一个名为 Web contact 的库。只是并非所有浏览器都支持。

或者，您可以创建可下载的 v 卡片。 人们下载后，安装它并自动创建联系人。

功能电子名片：

  const generateVCard = (contact) => {
  const vCardData = `
  BEGIN:VCARD
  VERSION:3.0
  FN:${contact.name}
  EMAIL:${contact.email}
  TEL:${contact.tel}
  ADR:${contact.address}
  END:VCARD
  `;
  return vCardData;
};

组件使用功能示例：

import React from 'react';

const AddContactButton = () => {
  const downloadVCard = () => {
    const contact = {
      name: 'John Doe',
      email: '[email protected]',
      tel: '[phone]',
      address: '123 Main St, Anytown, USA'
    };

    const vCardData = generateVCard(contact);
    const blob = new Blob([vCardData], { type: 'text/vcard' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = `${contact.name}.vcf`;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  };

  return (
    <button onClick={downloadVCard}>Ajouter à mes contacts</button>
  );
};

export default AddContactButton;

组件的使用：

import React from 'react';
import AddContactButton from '../components/AddContactButton';

const HomePage = () => {
  return (
    <div>
      <h1>Bienvenue sur notre page web</h1>
      <AddContactButton />
    </div>
  );
};

export default HomePage;