@capacitor/share v5分享图片问题：如何直接打开Telegram/WhatsApp应用？

核心问题原因 #

@capacitor/share 插件本质是调用系统原生分享面板，最终由系统和目标应用决定打开方式（比如部分应用会在浏览器/内嵌窗口打开）。要直接唤起独立APP，必须使用@capacitor/app-launcher插件，通过应用专属的URI Scheme直接触发打开。

步骤1：安装依赖 #

安装适配Capacitor v5的App Launcher插件：

npm install @capacitor/app-launcher
npx cap sync

步骤2：调整文件存储目录 #

原代码用Directory.Cache存储图片，部分应用（如Telegram）受系统权限限制无法访问该目录。改为Directory.Public确保文件可被第三方应用读取：

注意：Android 9及以下需在AndroidManifest.xml中添加READ_EXTERNAL_STORAGE权限，iOS无需额外权限。

步骤3：编写专属应用分享代码 #

分享到Telegram

import { Filesystem, Directory } from '@capacitor/filesystem';
import { AppLauncher } from '@capacitor/app-launcher';
import { Share } from '@capacitor/share';

async function shareToTelegram(fileName, base64Data) {
  try {
    // 写入Public目录
    await Filesystem.writeFile({
      path: fileName,
      data: base64Data,
      directory: Directory.Public
    });

    // 获取可被第三方应用访问的URI
    const uriResult = await Filesystem.getUri({
      directory: Directory.Public,
      path: fileName
    });

    // 构建Telegram分享URI Scheme
    const telegramUrl = `tg://msg?url=${encodeURIComponent(uriResult.uri)}&text=${encodeURIComponent(fileName)}`;

    // 尝试打开Telegram，失败则降级到系统分享
    const canOpen = await AppLauncher.canOpenUrl({ url: telegramUrl });
    if (canOpen.value) {
      await AppLauncher.openUrl({ url: telegramUrl });
    } else {
      await Share.share({ title: fileName, url: uriResult.uri });
    }
  } catch (err) {
    console.error('分享失败:', err);
  }
}

分享到WhatsApp

WhatsApp的URI Scheme格式略有不同，需注意附件参数处理：

async function shareToWhatsApp(fileName, base64Data) {
  try {
    await Filesystem.writeFile({
      path: fileName,
      data: base64Data,
      directory: Directory.Public
    });

    const uriResult = await Filesystem.getUri({
      directory: Directory.Public,
      path: fileName
    });

    // WhatsApp分享URI Scheme（支持文本+附件）
    const whatsappUrl = `whatsapp://send?text=${encodeURIComponent(fileName)}&attachment=${encodeURIComponent(uriResult.uri)}`;

    const canOpen = await AppLauncher.canOpenUrl({ url: whatsappUrl });
    if (canOpen.value) {
      await AppLauncher.openUrl({ url: whatsappUrl });
    } else {
      await Share.share({ title: fileName, url: uriResult.uri });
    }
  } catch (err) {
    console.error('分享失败:', err);
  }
}

关键注意事项 #

• URI编码：必须用encodeURIComponent处理参数，避免特殊字符导致链接失效。
• 平台兼容性：部分Android设备可能因系统限制无法直接通过Scheme打开应用，需保留系统分享作为降级方案。
• 文件权限：Android 10+无需额外权限即可访问Directory.Public，Android 9及以下需提前申请存储权限。

内容的提问来源于stack exchange，提问作者Maria Bergson