Memulai

1. Instal paket

   npm

   npm i @capgo/capacitor-wechat

   pnpm

   pnpm add @capgo/capacitor-wechat

   yarn

   yarn add @capgo/capacitor-wechat

   bun

   bun add @capgo/capacitor-wechat

2. Sinkronisasi dengan proyek asli

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Konfigurasi

Pendaftaran Aplikasi WeChat

Sebelum menggunakan plugin ini, Anda harus mendaftarkan aplikasi Anda di Platform Terbuka WeChat untuk mendapatkan ID Aplikasi.

iOS Konfigurasi

Tambahkan yang berikut ke Info.plist Anda:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>weixinULAPI</string>
</array>

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>weixin</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_WECHAT_APP_ID</string>
    </array>
  </dict>
</array>

Anda harus mengintegrasikan WeChat SDK ke dalam proyek iOS Anda. Tambahkan WeChat SDK ke Podfile Anda atau unduh dari Platform Terbuka WeChat.

Android Konfigurasi

Tambahkan yang berikut ke AndroidManifest.xml Anda:

<manifest>
  <application>
    <!-- WeChat callback activity -->
    <activity
      android:name=".wxapi.WXEntryActivity"
      android:exported="true"
      android:label="@string/app_name"
      android:launchMode="singleTask"
      android:theme="@android:style/Theme.Translucent.NoTitleBar">
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
      </intent-filter>
    </activity>
  </application>
</manifest>

Anda harus mengintegrasikan WeChat SDK ke dalam proyek Android Anda. Tambahkan ketergantungan WeChat SDK ke build.gradle Anda atau unduh dari Platform Terbuka WeChat.

Penggunaan

Periksa Instalasi WeChat

import { CapacitorWechat } from '@capgo/capacitor-wechat';

const checkWeChat = async () => {
  const { installed } = await CapacitorWechat.isInstalled();
  if (installed) {
    console.log('WeChat is installed');
  } else {
    console.log('WeChat is not installed');
  }
};

Otentikasi

const loginWithWeChat = async () => {
  try {
    const { code, state } = await CapacitorWechat.auth({
      scope: 'snsapi_userinfo', // or 'snsapi_login'
      state: 'my_random_state'
    });

    // Send code to your backend to exchange for access token
    const response = await fetch('https://yourapi.com/auth/wechat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code })
    });

    const { access_token, openid } = await response.json();
    console.log('Logged in with WeChat:', openid);
  } catch (error) {
    console.error('WeChat auth failed:', error);
  }
};

Bagikan Konten

Bagikan Teks

const shareText = async () => {
  await CapacitorWechat.share({
    scene: 0, // 0 = Chat, 1 = Moments, 2 = Favorite
    type: 'text',
    text: 'Hello from Capacitor WeChat!'
  });
};

Bagikan Tautan

const shareLink = async () => {
  await CapacitorWechat.share({
    scene: 1, // Share to Moments
    type: 'link',
    title: 'Check out this awesome app!',
    description: 'Built with Capacitor and WeChat SDK',
    link: 'https://capacitorjs.com',
    thumbUrl: 'https://capacitorjs.com/icon.png'
  });
};

Bagikan Gambar

const shareImage = async () => {
  await CapacitorWechat.share({
    scene: 0,
    type: 'image',
    imageUrl: 'https://example.com/image.png', // or base64 data
    thumbUrl: 'https://example.com/thumb.png'
  });
};

Pembayaran WeChat

const payWithWeChat = async () => {
  // First, get payment parameters from your server
  const paymentParams = await fetchPaymentParamsFromServer();

  try {
    await CapacitorWechat.sendPaymentRequest({
      partnerId: paymentParams.partnerId,
      prepayId: paymentParams.prepayId,
      nonceStr: paymentParams.nonceStr,
      timeStamp: paymentParams.timeStamp,
      package: paymentParams.package, // Usually 'Sign=WXPay'
      sign: paymentParams.sign
    });

    console.log('Payment successful!');
  } catch (error) {
    console.error('Payment failed:', error);
  }
};

Buka Program Mini

const openMiniProgram = async () => {
  await CapacitorWechat.openMiniProgram({
    username: 'gh_xxxxxxxxxxxxx', // Mini program original ID
    path: 'pages/index/index', // Path within mini program
    type: 0 // 0 = Release, 1 = Test, 2 = Preview
  });
};

API Referensi

Sudah Terpasang()

Periksa apakah aplikasi WeChat diinstal pada perangkat.

const result = await CapacitorWechat.isInstalled();
// Returns: { installed: boolean }

autentikasi (opsi)

Otentikasi pengguna dengan WeChat OAuth.

interface WechatAuthOptions {
  scope: string; // 'snsapi_userinfo' or 'snsapi_login'
  state?: string; // Optional state parameter for CSRF protection
}

const result = await CapacitorWechat.auth(options);
// Returns: { code: string, state?: string }

berbagi (opsi)

Bagikan konten ke WeChat.

interface WechatShareOptions {
  scene: number; // 0 = Session (chat), 1 = Timeline (moments), 2 = Favorite
  type: 'text' | 'image' | 'link' | 'music' | 'video' | 'miniprogram';
  text?: string; // For type 'text'
  title?: string; // For type 'link', 'music', 'video', 'miniprogram'
  description?: string; // For type 'link', 'music', 'video', 'miniprogram'
  link?: string; // For type 'link'
  imageUrl?: string; // Image URL or base64 data
  thumbUrl?: string; // Thumbnail URL or base64 data
  mediaUrl?: string; // For type 'music' or 'video'
  miniProgramUsername?: string; // For type 'miniprogram'
  miniProgramPath?: string; // For type 'miniprogram'
  miniProgramType?: number; // For type 'miniprogram': 0 = Release, 1 = Test, 2 = Preview
  miniProgramWebPageUrl?: string; // Fallback URL for type 'miniprogram'
}

await CapacitorWechat.share(options);

kirimPermintaan Pembayaran(pilihan)

Kirim permintaan pembayaran ke WeChat Pay.

interface WechatPaymentOptions {
  partnerId: string; // Merchant ID
  prepayId: string; // Prepay ID from unified order API
  nonceStr: string; // Random string
  timeStamp: string; // Timestamp
  package: string; // Usually 'Sign=WXPay'
  sign: string; // Signature
}

await CapacitorWechat.sendPaymentRequest(options);

bukaMiniProgram(pilihan)

Buka program mini WeChat.

interface WechatMiniProgramOptions {
  username: string; // Mini-program username (original ID)
  path?: string; // Path to open in mini-program
  type?: number; // 0 = Release, 1 = Test, 2 = Preview
}

await CapacitorWechat.openMiniProgram(options);

pilih Faktur (pilihan)

Pilih faktur dari WeChat (untuk aplikasi bisnis).

interface WechatInvoiceOptions {
  appId: string;
  signType: string;
  cardSign: string;
  timeStamp: string;
  nonceStr: string;
}

const result = await CapacitorWechat.chooseInvoice(options);
// Returns: { cards: string[] }

dapatkanVersi Plugin()

Dapatkan versi plugin asli.

const result = await CapacitorWechat.getPluginVersion();
// Returns: { version: string }

Contoh Lengkap

import { CapacitorWechat } from '@capgo/capacitor-wechat';

export class WeChatService {
  async init() {
    const { installed } = await CapacitorWechat.isInstalled();
    if (!installed) {
      throw new Error('WeChat is not installed');
    }
  }

  async login() {
    const { code } = await CapacitorWechat.auth({
      scope: 'snsapi_userinfo',
      state: Math.random().toString(36).substring(7)
    });

    // Exchange code for access token on your backend
    const response = await fetch('/api/auth/wechat', {
      method: 'POST',
      body: JSON.stringify({ code })
    });

    return response.json();
  }

  async shareToChat(title: string, description: string, link: string, imageUrl: string) {
    await CapacitorWechat.share({
      scene: 0, // Chat
      type: 'link',
      title,
      description,
      link,
      thumbUrl: imageUrl
    });
  }

  async shareToMoments(title: string, description: string, link: string, imageUrl: string) {
    await CapacitorWechat.share({
      scene: 1, // Moments
      type: 'link',
      title,
      description,
      link,
      thumbUrl: imageUrl
    });
  }
}

Catatan Penting

1. Integrasi WeChat SDK: Plugin ini menyediakan antarmuka Capacitor, tetapi Anda perlu mengintegrasikan WeChat resmi SDK ke dalam proyek asli Anda.

2. Pendaftaran Aplikasi: Anda harus mendaftarkan aplikasi Anda di Platform Terbuka WeChat untuk mendapatkan ID Aplikasi.

3. Tautan Universal (iOS): Untuk iOS 13+, Anda perlu mengonfigurasi Tautan Universal untuk panggilan balik WeChat.

4. Integrasi Backend: Fitur autentikasi dan pembayaran memerlukan integrasi backend untuk menukar kode token dan menyiapkan parameter pembayaran.

5. Pengujian: Fitur WeChat memerlukan pengujian pada perangkat fisik - fitur tersebut tidak akan berfungsi di simulator.

Praktik Terbaik

1. Selalu periksa apakah WeChat telah diinstal sebelum mencoba menggunakan fitur.
2. Tangani kesalahan dengan baik dengan blok coba-tangkap.
3. Gunakan parameter status dalam permintaan autentikasi untuk perlindungan CSRF.
4. Validasi tanggapan pembayaran di backend Anda sebelum memberikan akses.
5. Kompres gambar sebelum dibagikan untuk mengurangi penggunaan data.

Catatan Platform

iOS

• Membutuhkan iOS 10.0+
• Menggunakan WeChat resmi SDK untuk iOS
• Memerlukan konfigurasi Tautan Universal untuk iOS 13+### Android
• Memerlukan Android 5.0 (API 21)+
• Menggunakan WeChat resmi SDK untuk Android
• Membutuhkan konfigurasi WXEntryActivity

Web

• Tidak didukung pada platform web