通过JS实现向手机通讯录添加联系人的方案问询

跨平台基础方案：生成vCard触发系统导入 #

这是兼容性最广的方案，几乎支持所有移动端浏览器。通过生成标准vCard格式文件，让系统识别后唤起联系人添加流程。

实现代码 #

function addContact(name, phone) {
  // 构造标准vCard内容
  const vcardContent = `BEGIN:VCARD
VERSION:3.0
FN:${name}
TEL;TYPE=CELL:${phone}
END:VCARD`;
  
  // 转为Blob并创建下载链接
  const blob = new Blob([vcardContent], { type: 'text/vcard' });
  const downloadUrl = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = `${name}.vcf`;
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
}

使用时绑定按钮点击事件即可，用户点击后会弹出系统选择框，选择「添加到通讯录」就能唤起编辑UI。

iOS专属优化：Web Share API（Safari 15+） #

iOS 15及以上的Safari支持Web Share API的contacts目标，可以直接跳过下载步骤，唤起系统原生添加联系人UI。

实现代码 #

async function addContactiOS(name, phone) {
  try {
    await navigator.share(
      {
        title: name,
        text: phone,
        url: `tel:${phone}`
      },
      { target: 'contacts' }
    );
  } catch (error) {
    // 不支持时降级到vCard方案
    addContact(name, phone);
  }
}

注意：必须在HTTPS环境下使用，且只能由用户主动触发（比如按钮点击），浏览器会拦截非交互触发的调用。

Android专属优化：Intent URI唤起 #

Android Chrome及兼容Intent的浏览器，支持直接通过intent: URI唤起系统原生添加联系人界面，无需下载文件。

实现代码 #

function addContactAndroid(name, phone) {
  const intentUrl = `intent://add#Intent;scheme=content;type=vnd.android.cursor.dir/person;S.phone=${phone};S.name=${name};end;`;
  window.location.href = intentUrl;
}

也可以直接用HTML链接：

<a href="intent://add#Intent;scheme=content;type=vnd.android.cursor.dir/person;S.phone=13800138000;S.name=张三;end;">添加到通讯录</a>

关键注意事项 #

• 所有操作必须由用户主动交互触发（比如点击按钮），否则浏览器会拦截脚本行为。
• 务必在HTTPS环境下部署，HTTP环境会限制多数特殊API和URI的使用。
• 建议做平台判断，优先使用对应平台的优化方案，失败后自动降级到vCard基础方案，保证全设备覆盖。

内容的提问来源于stack exchange，提问作者Aje Damilola