Membina Sistem Saham Fleksibel dalam Reaksi dengan API Saham Web

Bosan dengan laman web kembung yang ditimbang oleh beberapa skrip perkongsian pihak ketiga? API Web Share menawarkan alternatif yang diperkemas, memanfaatkan keupayaan perkongsian asli peranti anda. Tutorial ini menunjukkan membina sistem perkongsian berasaskan reaksi moden.

Persediaan Projek

Mula dengan membuat projek React baru menggunakan Vite dan TypeScript:

<code class="language-bash">npm create vite@latest my-share-app -- --template react-ts
cd my-share-app</code>

Pasang kebergantungan:

<code class="language-bash">npm install sonner</code>

untuk gaya (pilihan, tetapi disyorkan):

<code class="language-bash">npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p</code>

Tambahkan

pembekal roti bakar ke komponen utama sonner anda: App

<code class="language-typescript">// src/App.tsx
import { Toaster } from 'sonner';

function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      {/* Your app content */}
    </>
  );
}</code>

Memahami API Saham Web

API Web Share menawarkan pengalaman perkongsian asli platform, mengintegrasikan dengan lancar dengan mekanisme perkongsian terbina dalam peranti anda. Ini memberikan pengalaman pengguna yang konsisten di seluruh mudah alih dan desktop.

Mewujudkan cangkuk saham

mari kita buat cangkuk tersuai (

) untuk menguruskan logik perkongsian: src/hooks/useShare.ts

<code class="language-typescript">import { toast } from "sonner";

const useShare = () => {
  const copy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success(`Copied ${text} to clipboard!`);
    } catch (error) {
      console.error("Clipboard copy error:", error);
      toast.error("Clipboard copy failed.");
    }
  };

  const share = async (url: string, title: string, description: string) => {
    if (navigator.share) {
      try {
        await navigator.share({ title, text: description, url });
        console.log("Share successful!");
      } catch (error) {
        console.error("Sharing error:", error);
        toast.error("Sharing failed.");
        copy(url); // Fallback to copy
      }
    } else {
      console.error("Web Share API not supported.");
      toast.error("Web Share API not supported. Copying URL instead.");
      copy(url); // Fallback to copy
    }
  };

  return { copy, share };
};

export default useShare;</code>

Pecahan pelaksanaan

Menyediakan: useShare

1. : clipboard clipback menggunakan API Clipboard. copy
2. : Mengutamakan API Web Share, jatuh ke share jika tidak tersedia atau tidak berjaya. copy

Pendekatan ini memastikan pengalaman perkongsian yang mantap di pelbagai pelayar dan peranti.

menggunakan cangkuk dalam komponen

inilah komponen

(ShareButton): src/components/ShareButton.tsx

<code class="language-typescript">// src/components/ShareButton.tsx
import { FC } from 'react';
import useShare from '../hooks/useShare';

interface ShareButtonProps {
  url: string;
  title: string;
  description: string;
}

const ShareButton: FC<ShareButtonProps> = ({ url, title, description }) => {
  const { share } = useShare();

  const handleShare = () => {
    share(url, title, description);
  };

  return (
    <button onClick={handleShare}>Share</button>
  );
};

export default ShareButton;</code>

dan penggunaannya dalam

: App.tsx

<code class="language-typescript">// src/App.tsx
import ShareButton from './components/ShareButton';

function App() {
  return (
    <div className="p-4">
      <h1>My Awesome Content</h1>
      <ShareButton 
        url={window.location.href} 
        title="Check out this content!" 
        description="Interesting article about the Web Share API..." 
      />
    </div>
  );
}</code>

sokongan dan pertimbangan penyemak imbas

API Web Share menikmati sokongan luas pada pelayar mudah alih dan desktop moden. Ingat:

Konteks selamat (HTTPS) diperlukan.
Interaksi Pengguna (mis., Klik butang) diperlukan.
tidak semua jenis data disokong secara universal.

Amalan Terbaik

• Sentiasa sertakan kejatuhan.
• mengendalikan kesilapan dengan anggun. Memberitahu pengguna kejayaan atau kegagalan.
• Pastikan ia mudah. ​​ Butang yang jelas dan ringkas adalah mencukupi.
• menguji secara menyeluruh di seluruh peranti.

Sumber

Projek Contoh (github): [masukkan pautan github di sini jika berkenaan]

Kesimpulan

API Web Share menawarkan alternatif yang unggul kepada kaedah perkongsian tradisional. Dengan menggabungkannya dengan pengendalian ralat yang bertindak balas dan bijak, anda boleh membuat pengalaman perkongsian asli yang lancar untuk pengguna anda. Cubalah dalam projek anda yang seterusnya!

Atas ialah kandungan terperinci Membina Sistem Saham Fleksibel dalam Reaksi dengan API Saham Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!