uniappでテキストをクリップボードにコピーする方法

Uniapp では、クリップボードへのテキストのコピーは、uniapp が公式に提供する API を介して実現できます。この記事では、この API を呼び出してテキストをクリップボードにコピーする機能を実現する方法を紹介します。

1. API の導入

H5 API をコードに直接導入します。コードは次のとおりです:

if (navigator.clipboard) {
  navigator.clipboard.writeText('要复制到剪贴板中的文字');
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
} else {
  uni.showToast({
    title: "复制失败，当前浏览器不支持",
    icon: "none",
    duration: 2000
  });
}

2. 実装方法

1.ブラウザがコピー機能をサポートしているかどうかを確認します。サポートされていない場合は失敗が返されます。

if (!navigator.clipboard) {
  uni.showToast({
    title: "当前浏览器未能支持此功能，请更换浏览器",
    icon: "none",
    duration: 2000
  });
}

2. API を使用してテキストをクリップボードにコピーし、成功を求めるメッセージを表示します。

navigator.clipboard.writeText('要复制到剪贴板中的文字').then(function () {
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
}, function (err) {
  uni.showToast({
    title: "复制失败，请手动复制",
    icon: "none",
    duration: 2000
  });
});

3. 完全なコード

コードは次のとおりです:

// 判断是否支持复制功能
if (!navigator.clipboard) {
  uni.showToast({
    title: "当前浏览器未能支持此功能，请更换浏览器",
    icon: "none",
    duration: 2000
  });
  return;
}

// 复制内容到剪贴板
navigator.clipboard.writeText('要复制到剪贴板中的文字').then(function () {
  uni.showToast({
    title: "复制成功",
    icon: "success",
    duration: 2000
  });
}, function (err) {
  uni.showToast({
    title: "复制失败，请手动复制",
    icon: "none",
    duration: 2000
  });
});

4. 注意事項

1. API は HTTPS でのみ使用できます。ウェブサイト。

2. この API はモバイル ブラウザーでのサポートが低いため、不安定性の問題が発生する可能性があります。

3. ユーザー エクスペリエンスを向上させるには、ユーザーの参照用に手動コピー ソリューションを提供するのが最善です。

以上がuniappでテキストをクリップボードにコピーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。