Le SDK JavaScript de WeChat est un outil de dévelopement fourni par la plateforme officielle WeChat aux créateurs de pages web, permettant d'exploiter les capacités natives de l'appareil et les services spécifiques de WeChat. Il offre un accès direct à des foncitonnalités telles que la capture d'images, la sélection de fichiers multimédias, la géolocalisation, ainsi que les options de partage, de scan de codes QR, de gestion de cartes de fidélité et de paiements intégrés.

Procédure d'utilisatoin du SDK

Étape 1 : Configuration du domaine de sécurité

Connectez-vous à la plateforme WeChat pour les comptes officiels et accédez à la section « Paramètres du compte » puis « Configuration des fonctionnalités » afin de définir le « Domaine sécurisé pour les interfaces JS ».

Remarque : Les permissions d'interface correspondantes sont visibles dans le « Centre de développement » après connexion.

Étape 2 : Intégration du fichier JavaScript

Incluez le fichier JS suivant dans les pages nécessitant les interfaces du SDK : http://res.wx.qq.com/open/js/jweixin-1.2.0.js

Remarque : Le chargement via des méthodes de modules AMD/CMD est pris en charge.

Étape 3 : Injection de la configuration d'authentification

Toute page utilisant le SDK doit préalablement injecter les paramètres de configuration, sinon les appels seront impossibles.

configurationWeChat({
    debug: true, // Active le mode débogage, les réponses des API s'affichent via alert sur le client
    appId: '', // Identifiant unique obligatoire du compte officiel
    timestamp: , // Horodatage obligatoire pour la génération de la signature
    nonceStr: '', // Chaîne aléatoire obligatoire pour la signature
    signature: '', // Signature obligatoire
    jsApiList: [] // Liste obligatoire des interfaces JS à utiliser
});

Étape 4 : Traitement d'une authentification réussie via l'interface ready

configurationWeChat.ready(function(){
    // Cette fonction s'exécute après validation des paramètres de configuration. Tous les appels d'interface doivent être placés ici pour garantir l'exécution correcte, car la configuration est asynchrone côté client.
});

Étape 5 : Gestion d'une authentification échouée via l'interface error

configurationWeChat.error(function(res){
    // Cette fonction s'exécute en cas d'échec de validation, comme une signature expirée. Les détails de l'erreur sont disponibles en mode débogage ou dans le paramètre res.
});

Notes sur l'appel des interfaces

Toutes les interfaces sont appelées via l'objet wx (ou jWeixin), avec un paramètre objet incluant des callbacks génériques :

• success : Fonction exécutée en cas de réussite.
• fail : Fonction exécutée en cas d'échec.
• complete : Fonction exécutée à la fin, quel que soit le résultat.
• cancel : Fonction déclenchée lors d'une annulation utilisateur (pour les API concernées).
• trigger : Méthode pour écouter les clics sur les boutons du menu (interfaces spécifiques).

Chaque callback reçoit un objet contenant les données de réponse et une propriété errMsg formatée comme suit : "nom_api:ok" pour une réussite, "nom_api:cancel" pour une annulation, ou un message d'erreur détaillé en cas de problème.

Pour les spécifications complètes des interfaces, consultez la documentation officielle WeChat.

Exemple de code

<?php
$idApplication = "votre_id_app";
$secretApplication = "votre_secret_app";

// Obtenir le jeton d'accès
$pointAcces = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . $idApplication . "&secret=" . $secretApplication;
$reponseJeton = json_decode(executerRequeteHttp($pointAcces));
$jetonAcces = $reponseJeton->access_token;

// Obtenir le ticket pour l'API JS
$pointTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" . $jetonAcces;
$reponseTicket = json_decode(executerRequeteHttp($pointTicket));
$ticketJsApi = $reponseTicket->ticket;

// L'URL doit être récupérée dynamiquement, jamais codée en dur
$protocoleConnexion = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$urlActuelle = $protocoleConnexion . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$estampilleTemporelle = time();
$jeuCaracteres = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$chaineAleatoire = "";
$tailleChaine = 16;

for ($index = 0; $index < $tailleChaine; $index++) {
    $chaineAleatoire .= substr($jeuCaracteres, mt_rand(0, strlen($jeuCaracteres) - 1), 1);
}

// Les paramètres doivent être triés par ordre ASCII des clés
$donneesSignature = "jsapi_ticket=" . $ticketJsApi . "&noncestr=" . $chaineAleatoire . "&timestamp=" . $estampilleTemporelle . "&url=" . $urlActuelle;
$empreinteSignature = sha1($donneesSignature);

$donneesConfig = array(
    "appId" => $idApplication,
    "nonceStr" => $chaineAleatoire,
    "timestamp" => $estampilleTemporelle,
    "signature" => $empreinteSignature
);
?>

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Page intégrant le SDK WeChat</title>
</head>
<body>
    <!-- Contenu de la page -->
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    /*
     * Remarques importantes :
     * 1. Les appels d'interface JS sont uniquement autorisés sur le domaine sécurisé configuré pour le compte officiel WeChat.
     * 2. Pour les problèmes de partage personnalisé sur Android, mettez à jour l'application WeChat vers la version 6.0.2.58 ou ultérieure.
     * 3. La documentation complète et les solutions aux erreurs courantes sont disponibles à l'adresse : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * En cas de difficulté non résolue, veuillez contacter : weixin-open@qq.com avec le sujet "Feedback SDK JS WeChat".
     */

    configurationWeChat({
        debug: true,
        appId: '<?php echo $donneesConfig["appId"];?>',
        timestamp: <?php echo $donneesConfig["timestamp"];?>,
        nonceStr: '<?php echo $donneesConfig["nonceStr"];?>',
        signature: '<?php echo $donneesConfig["signature"];?>',
        jsApiList: [
            // Ajouter ici toutes les API à utiliser
        ]
    });

    configurationWeChat.ready(function () {
        // Code à exécuter après validation réussie
    });

    configurationWeChat.error(function(res) {
        // Gestion des erreurs de configuration
    });
</script>
</html>