Commencer

1. Installez le package

   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. Synchronisation avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

##Configuration

Inscription de l’application WeChat

Avant d’utiliser ce plugin, vous devez enregistrer votre application sur la WeChat Open Platform pour obtenir un identifiant d’application.

iOSConfiguration

Ajoutez ce qui suit à votre Info.plist :

<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>

Vous devrez intégrer le WeChat SDK dans votre projet iOS. Ajoutez le WeChat SDK à votre Podfile ou téléchargez-le depuis la WeChat Open Platform.

Android Configuration

Ajoutez ce qui suit à votre AndroidManifest.xml :

<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>

Vous devrez intégrer le WeChat SDK dans votre projet Android. Ajoutez la dépendance WeChat SDK à votre build.gradle ou téléchargez-la depuis la WeChat Open Platform.

Utilisation

Vérifiez l’installation de 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');
  }
};

Authentification

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);
  }
};

Partager du contenu

Partager le texte

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

Partager le lien

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'
  });
};

Partager l’image

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'
  });
};

Paiement 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);
  }
};

Ouvrir un mini-programme

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 Référence

estInstallé()

Vérifiez si l’application WeChat est installée sur l’appareil.

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

authentification (options)

Authentifiez l’utilisateur avec 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 }

partage(options)

Partagez du contenu sur 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);

sendPaymentRequest(options)

Envoyez la demande de paiement à 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);

openMiniProgram(options)

Ouvrez le mini-programme 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);

choisirFacture(options)

Choisissez la facture de WeChat (pour les applications professionnelles).

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

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

###getPluginVersion()

Obtenez la version native du plugin.

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

Exemple complet

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
    });
  }
}

Remarques importantes

1. Intégration WeChat SDK : ce plugin fournit l’interface Capacitor, mais vous devez intégrer le WeChat officiel SDK dans vos projets natifs.

2. Inscription de l’application : vous devez enregistrer votre application sur la Plateforme ouverte WeChat pour obtenir un identifiant d’application.

3. Liens universels (iOS) : Pour iOS 13+, vous devez configurer les liens universels pour les rappels WeChat.

4. Intégration backend : les fonctionnalités d’authentification et de paiement nécessitent une intégration backend pour échanger des codes contre des jetons et préparer les paramètres de paiement.

5. Test : les fonctionnalités de WeChat nécessitent des tests sur des appareils physiques – elles ne fonctionneront pas dans des simulateurs.

## meilleures pratiques

1. Vérifiez toujours si WeChat est installé avant d’essayer d’utiliser les fonctionnalités.
2. Gérez les erreurs avec élégance avec les blocs try-catch.
3. Utilisez le paramètre d’état dans les demandes d’authentification pour la protection CSRF.
4. Validez les réponses de paiement sur votre backend avant d’accorder l’accès.
5. Compressez les images avant de les partager pour réduire la consommation de données.

## Remarques sur la plate-forme

iOS

• Nécessite iOS 10.0+
• Utilise WeChat officiel SDK pour iOS
• Nécessite une configuration Universal Links pour iOS 13+### Android
• Nécessite Android 5.0 (API 21)+
• Utilise WeChat officiel SDK pour Android
• Nécessite la configuration de WXEntryActivity

###Web

• Non pris en charge sur la plateforme Web