三步搞定分享功能集成：API调用实战手记

上周帮朋友改一个内部工具页面，他指着右上角那个灰掉的「分享」按钮说：‘这玩意儿点不动，能不能让它真能发微信、钉钉、复制链接？’——其实不是不能，是没连上分享 API。今天就拿这个场景，说说怎么把分享功能真正跑起来。

别再写死链接了

很多人做分享，就是写个 window.open('https://weibo.com/share?url=...')，参数拼得满屏都是 +encodeURI()，结果一换域名就 404，一加中文就乱码。这不是集成，是硬编码的临时补丁。

用标准接口，省心又稳定

现代浏览器原生支持 navigator.share()，一行代码就能唤起系统分享面板（微信、QQ、钉钉等已安装 App 都会列出来）：

if (navigator.share) {
  navigator.share({
    title: '实用知识港：效率提升小技巧',
    text: '刚学到一个超顺手的分享 API 调用方式，记录一下',
    url: window.location.href
  }).catch(err => console.log('分享被取消或失败：', err));
} else {
  // 降级方案：复制链接 + 提示
  navigator.clipboard.writeText(window.location.href);
  alert('链接已复制，可粘贴分享');
}

注意：该 API 只在 HTTPS 环境和用户手势触发（比如点击按钮）下生效，开发时别在控制台直接执行，否则会报错。

第三方平台要授权？其实不用

有人问「微信分享是不是得先申请公众号、配 JS-SDK？」——那是做自定义分享卡片（带缩略图、描述）才需要。如果只要基础分享动作（跳转到微信会话页并附带链接），完全不用后端介入。像钉钉、飞书也一样，直接传 URL 就行：

// 钉钉分享（移动端）
window.location.href = `dingtalk://dingtalkclient/page/link?webUrl=${encodeURIComponent(window.location.href)}&title=效率提升干货`;

PC 端不支持？那就 fallback 到生成带参数的二维码，用 qrcode.js 两行搞定，扫码即开。

小改动，大体验

我们上线后，同事反馈：‘以前要手动复制再切 App，现在点一下就弹出选择，连复制步骤都省了。’——分享功能不是炫技，是让信息流动少卡一次。API 调用本身不难，关键是选对路子：优先用原生，再补兼容，最后才考虑 SDK。