Résumé de l'interface WeChat JS et explication détaillée des compétences d'utilisation_javascript

Instructions de base

Mode d'emploi

1. Importer des fichiers JS
Introduisez le fichier JS suivant dans la page qui doit appeler l'interface JS (supporte https) : http://res.wx.qq.com/open/js/jweixin-1.0.0.js

Remarque : prend en charge le chargement à l'aide de la méthode de chargement de module standard AMD/CMD

2. Injectez l'interface de configuration
Toutes les pages qui doivent utiliser JSSDK doivent d'abord injecter des informations de configuration, sinon elles ne seront pas appelées (la même URL ne doit être appelée qu'une seule fois, et l'application Web SPA qui modifie l'URL peut être appelée à chaque fois que l'URL change).

Copier le code Le code est le suivant :

wx.config({
debug: true, // Activez le mode débogage. Les valeurs de retour de tous les appels d'API seront alertées côté client. Si vous souhaitez afficher les paramètres entrants, vous pouvez l'ouvrir côté PC. être imprimé via le journal, seul le côté PC sera imprimé.
appId : '', // Obligatoire, l'identifiant unique du compte officiel
timestamp : , // Obligatoire, horodatage pour générer la signature
nonceStr : '', // Obligatoire, générer une chaîne aléatoire de signature
signature : '',//Obligatoire, signature, voir Annexe 1
jsApiList : [] // Obligatoire, une liste des interfaces JS qui doivent être utilisées. Pour une liste de toutes les interfaces JS, voir l'Annexe 2
. });

3. Vérifiez via l'interface prête

Copier le code Le code est le suivant :

wx.ready(function(){

// La méthode ready sera exécutée une fois les informations de configuration vérifiées. Tous les appels d'interface doivent être effectués une fois que l'interface de configuration a obtenu le résultat. La configuration est une opération asynchrone côté client, donc si vous devez appeler la méthode appropriée. interface lorsque la page est chargée, vous devez mettre l'interface appropriée L'interface est appelée dans la fonction ready pour garantir une exécution correcte. Pour les interfaces appelées uniquement lorsqu'elles sont déclenchées par l'utilisateur, elles peuvent être appelées directement et n'ont pas besoin d'être placées dans la fonction ready.
});

4. Interface d'erreur d'échec de vérification

Copier le code Le code est le suivant :

wx.erreur(fonction(res){
// Si la vérification des informations de configuration échoue, la fonction d'erreur sera exécutée. Si la signature expire et que la vérification échoue, les informations d'erreur spécifiques peuvent être visualisées en ouvrant le mode débogage de la configuration ou dans le paramètre res renvoyé pour SPA, la signature peut être mise à jour ici.
});

Instructions d'appel de l'interface
Toutes les interfaces sont appelées via des objets wx (les objets jWeixin peuvent également être utilisés). Le paramètre est un objet en plus des paramètres qui doivent être transmis par chaque interface elle-même, il existe également les paramètres communs suivants :

.

succès : la fonction de rappel exécutée lorsque l'appel d'interface réussit.
fail : la fonction de rappel exécutée lorsque l'appel d'interface échoue.
complete : fonction de rappel exécutée lorsque l'appel d'interface est terminé, quel que soit le succès ou l'échec.
annuler : La fonction de rappel lorsque l'utilisateur clique sur Annuler. Elle n'est utilisée que par certaines API où l'utilisateur annule l'opération.
trigger : une méthode qui est déclenchée lorsqu'un bouton du menu est cliqué. Cette méthode ne prend en charge que les interfaces associées dans le menu.

Les fonctions ci-dessus ont toutes un paramètre de type objet. En plus des données renvoyées par chaque interface elle-même, il existe également un attribut général errMsg, dont le format de valeur est le suivant :

Lorsque l'appel réussit : "xxx:ok", où xxx est le nom de l'interface appelée
Lorsque l'utilisateur annule : "xxx:cancel", où xxx est le nom de l'interface appelée
Lorsque l'appel échoue : sa valeur est le message d'erreur spécifique

Interface de base
Déterminez si la version actuelle du client prend en charge l'interface JS spécifiée

Copier le code Le code est le suivant :

wx.checkJsApi({
jsApiList : ['chooseImage'] // Liste des interfaces JS qui doivent être détectées Voir l'Annexe 2 pour la liste de toutes les interfaces JS,
. succès : fonction(res) {
//Retour sous forme de paires clé-valeur, la valeur API disponible est vraie et la valeur API indisponible est fausse
// Par exemple : {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

});

Interface de partage

Obtenez l'état du clic du bouton "Partager sur Moments" et personnalisez l'interface de partage de contenu

Copier le code Le code est le suivant :

wx.onMenuShareTimeline({
Titre : '', // Partager le titre
Lien : '', // Partager le lien
imgUrl : '', // Icône de partage
succès : fonction () {
//Fonction de rappel exécutée après que l'utilisateur confirme le partage
},
annuler : fonction () {
//Fonction de rappel exécutée après que l'utilisateur a annulé le partage
>
});

Obtenez l'état du clic sur le bouton "Partager avec des amis" et personnalisez l'interface de partage de contenu

Copier le code Le code est le suivant :

wx.onMenuShareAppMessage({
Titre : '', // Partager le titre
desc : '', // Partager la description
Lien : '', // Partager le lien
imgUrl : '', // Icône de partage
Tapez : '', // Type de partage, musique, vidéo ou lien, si laissé vide, la valeur par défaut est lien
dataUrl : '', // Si le type est musique ou vidéo, un lien de données doit être fourni, qui est vide par défaut
succès : fonction () {
//Fonction de rappel exécutée après que l'utilisateur confirme le partage
},
annuler : fonction () {
//Fonction de rappel exécutée après que l'utilisateur a annulé le partage
>
});

Obtenez l'état du clic sur le bouton "Partager sur QQ" et personnalisez l'interface de partage de contenu

Copier le code Le code est le suivant :

wx.onMenuShareQQ({
Titre : '', // Partager le titre
desc : '', // Partager la description
Lien : '', // Partager le lien
imgUrl : '' // Icône de partage
succès : fonction () {
//Fonction de rappel exécutée après que l'utilisateur confirme le partage
},
annuler : fonction () {
//Fonction de rappel exécutée après que l'utilisateur a annulé le partage
>
});

Obtenez l'état du clic du bouton "Partager sur Tencent Weibo" et personnalisez l'interface de partage de contenu

Copier le code Le code est le suivant :

wx.onMenuShareWeibo({
Titre : '', // Partager le titre
desc : '', // Partager la description
Lien : '', // Partager le lien
imgUrl : '' // Icône de partage
succès : fonction () {
//Fonction de rappel exécutée après que l'utilisateur confirme le partage
},
annuler : fonction () {
//Fonction de rappel exécutée après que l'utilisateur a annulé le partage
>
});

Interface d'images

Interface pour prendre des photos ou sélectionner des photos dans l'album du téléphone portable

Copier le code Le code est le suivant :

wx.chooseImage({
Succès : fonction (res) {
            var localIds = res.localIds; // Renvoie la liste d'identifiants locaux de la photo sélectionnée, localId peut être utilisé comme attribut src de la balise img pour afficher l'image
>
});

Aperçu de l'interface d'image

Copier le code Le code est le suivant :

wx.previewImage({
Actuel : '', // Lien de l'image actuellement affichée
urls : [] // Liste des liens d'images qui doivent être prévisualisés
});

Interface de téléchargement d'images

Copier le code Le code est le suivant :

wx.uploadImage({
localId: '', // L'ID local de l'image à télécharger, obtenu via l'interface ChooseImage
isShowProgressTips : 1// La valeur par défaut est 1, affichant les conseils de progression
Succès : fonction (res) {
          var serverId = res.serverId; // Renvoie l'ID du serveur de l'image
>
});

Remarque : vous pouvez utiliser l'interface de téléchargement de fichiers multimédia WeChat pour télécharger les images téléchargées. L'ID de serveur obtenu ici est media_id. Reportez-vous au document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

.

Télécharger l'interface d'image

Copier le code Le code est le suivant :

wx.downloadImage({
serverId : '', // L'ID du serveur de l'image à télécharger, obtenu via l'interface uploadImage
isShowProgressTips : 1// La valeur par défaut est 1, affichant les conseils de progression
Succès : fonction (res) {
          var localId = res.localId; // Renvoie l'ID local après avoir téléchargé l'image
>
});

Interface audio

Démarrer l'interface d'enregistrement

Copier le code Le code est le suivant :

wx.startRecord();

Arrêter l'interface d'enregistrement

Copier le code Le code est le suivant :

wx.stopRecord({
Succès : fonction (res) {
      var localId = res.localId;
>
});

Interface d'arrêt automatique de l'enregistrement de surveillance

Copier le code Le code est le suivant :

wx.onVoiceRecordEnd({
// Le rappel complet sera exécuté lorsque la durée d'enregistrement dépasse une minute sans arrêt
complet : fonction (res) {
var localId = res.localId;
>
});

Jouer l'interface vocale

Copier le code Le code est le suivant :

wx.playVoice({
LocalId : '' // L'ID local de l'audio à lire, obtenu via l'interface stopRecord
});

Interface de lecture en pause

Copier le code Le code est le suivant :

wx.pauseVoice({
LocalId : '' // L'ID local de l'audio qui doit être mis en pause, obtenu via l'interface stopRecord
});

Arrêter l'interface de lecture

Copier le code Le code est le suivant :

wx.stopVoice({
LocalId : '' // L'ID local de l'audio qui doit être arrêté, obtenu via l'interface stopRecord
});

Interface pour surveiller l'achèvement de la lecture vocale

Copier le code Le code est le suivant :

wx.onVoicePlayEnd({
ServerId : '', // L'ID du serveur de l'audio à télécharger est obtenu via l'interface uploadVoice
Succès : fonction (res) {
          var localId = res.localId; // Renvoie l'ID local de l'audio
>
});

Télécharger l'interface vocale

Copier le code Le code est le suivant :

wx.uploadVoice({
localId : '', // L'ID local de l'audio à télécharger, obtenu via l'interface stopRecord
isShowProgressTips : 1// La valeur par défaut est 1, affichant les conseils de progression
Succès : fonction (res) {
          var serverId = res.serverId; // Renvoie l'ID du serveur de l'audio
>
});

Remarque : la voix téléchargée peut être téléchargée via l'interface de téléchargement de fichiers multimédia WeChat. L'ID de serveur obtenu ici est media_id, reportez-vous au document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

Télécharger l'interface vocale

Copier le code Le code est le suivant :

wx.downloadVoice({
serverId : '', // L'ID côté serveur de l'audio à télécharger, obtenu via l'interface uploadVoice
isShowProgressTips : 1// La valeur par défaut est 1, affichant les conseils de progression
Succès : fonction (res) {
          var localId = res.localId; // Renvoie l'ID local de l'audio
>
});

Interface intelligente

Reconnaître l'audio et renvoyer l'interface du résultat de la reconnaissance

Copier le code Le code est le suivant :

wx.translateVoice({
localId : '', // L'ID local de l'audio qui doit être reconnu, obtenu à partir de l'interface associée à l'enregistrement
isShowProgressTips : 1, //La valeur par défaut est 1, affichant les conseils de progression
succès : fonction (res) {
alert(res.translateResult); // Résultats de la reconnaissance vocale
>
});

Informations sur l'appareil

Obtenir l'interface d'état du réseau

Copier le code Le code est le suivant :

wx.getNetworkType({
Succès : fonction (res) {
           var networkType = res.networkType; // Renvoie le type de réseau 2g, 3g, 4g, wifi
>
});

Localisation géographique

Utilisez la carte intégrée de WeChat pour afficher l'interface de localisation

Copier le code Le code est le suivant :

wx.openLocation({
Latitude : 0, // Latitude, nombre à virgule flottante, la plage est de 90 ~ -90
Longitude : 0, // Longitude, nombre à virgule flottante, plage comprise entre 180 et -180.
nom : '', // nom du lieu
Adresse : '', // Détails de l'adresse
Échelle : 1, // Niveau de zoom de la carte, valeur de mise en forme, allant de 1 à 28. La valeur par défaut est max
infoUrl : '' // Le lien hypertexte affiché en bas de l'interface de visualisation de l'emplacement peut être cliqué pour sauter
});

Obtenir l'interface de localisation géographique

Copier le code Le code est le suivant :

wx.getLocation({
Horodatage : 0, // Horodatage de la signature de localisation, fourni uniquement lorsque compatible avec les versions antérieures à 6.0.2
nonceStr : '', // Chaîne aléatoire de signature de position, fournie uniquement lorsque compatible avec les versions antérieures à 6.0.2
​​ addrSign : '', // Signature de localisation, fournie uniquement en cas de compatibilité avec les versions antérieures à 6.0.2, voir Annexe 4
pour plus de détails Succès : fonction (res) {
           var longitude = res.longitude; // Latitude, nombre à virgule flottante, la plage est de 90 ~ -90
        var latitude = res.latitude; // Longitude, nombre à virgule flottante, plage comprise entre 180 et -180.
           var speed = res.speed; // Vitesse, en mètres/seconde
        var précision = res.accuracy ; // Précision de la position
>
});

Fonctionnement de l'interface

Copier le code Le code est le suivant :

Masquer l'interface du menu dans le coin supérieur droit
wx.hideOptionMenu();
Afficher l'interface du menu dans le coin supérieur droit
wx.showOptionMenu();
Fermez l'interface de la fenêtre Web actuelle
wx.closeWindow();
Interface des boutons de fonction cachés par lots
wx.hideMenuItems({
menuList : [] // Éléments de menu à masquer, voir l'Annexe 3 pour tous les éléments de menu
});
Interface du bouton de fonction d'affichage par lots
wx.showMenuItems({
menuList : [] // Éléments de menu à afficher, voir l'Annexe 3
pour tous les éléments de menu });
Masquer toutes les interfaces de boutons non basiques
wx.hideAllNonBaseMenuItem();
Afficher toutes les interfaces des boutons de fonction
wx.showAllNonBaseMenuItem();
Scannez sur WeChat
Ouvrez l'interface d'analyse WeChat
wx.scanQRCode({
desc : 'scanQRCode desc',
needResult : 0, // La valeur par défaut est 0, le résultat de l'analyse est traité par WeChat, 1 renvoie directement le résultat de l'analyse,
scanType: ["qrCode","barCode"], // Vous pouvez spécifier s'il faut scanner un code QR ou un code 1D, les deux sont disponibles par défaut
succès : fonction () {
var result = res.resultStr; // Lorsque needResult vaut 1, le résultat renvoyé en scannant le code QR
>
});

Adresse de récolte

Modifier l'interface de l'adresse de livraison

Copier le code Le code est le suivant :

wx.editAddress(
Horodatage : 0, // Horodatage de la signature de localisation, fourni uniquement lorsque compatible avec les versions antérieures à 6.0.2
nonceStr : '', // Chaîne aléatoire de signature de position, fournie uniquement lorsque compatible avec les versions antérieures à 6.0.2
​​ addrSign : '', // Signature de localisation, fournie uniquement en cas de compatibilité avec les versions antérieures à 6.0.2, voir Annexe 4
pour plus de détails Succès : fonction (res) {
          var userName = res.userName; // Nom du destinataire
        var telNumber = res.telNumber ; ​​// Numéro de téléphone du destinataire
        var postalCode = res.postalCode; // Code postal
           var provinceName = res.provinceName ; // Adresse de premier niveau de l'adresse de livraison standard nationale
          var cityName = res.cityName ; // Adresse de livraison standard nationale, adresse de deuxième niveau
           var countryName = res.countryName ; // Adresse de livraison standard nationale, adresse de troisième niveau
          var address = res.address; // Informations détaillées sur l'adresse de livraison
          var nationalCode = res.nationalCode; // Code du pays de l'adresse de livraison
>
});

Obtenez l'interface d'adresse de livraison la plus proche

Copier le code Le code est le suivant :

wx.getLatestAddress({
Horodatage : 0, // Horodatage de la signature de localisation, fourni uniquement lorsque compatible avec les versions antérieures à 6.0.2
nonceStr : '', // Chaîne aléatoire de signature de position, fournie uniquement lorsque compatible avec les versions antérieures à 6.0.2
​​ addrSign : '', // Signature de localisation, fournie uniquement en cas de compatibilité avec les versions antérieures à 6.0.2, voir Annexe 4
pour plus de détails Succès : fonction (res) {
          var userName = res.userName; // Nom du destinataire
        var telNumber = res.telNumber ; ​​// Numéro de téléphone du destinataire
        var postalCode = res.postalCode; // Code postal
           var provinceName = res.provinceName ; // Adresse de premier niveau de l'adresse de livraison standard nationale
          var cityName = res.cityName ; // Adresse de livraison standard nationale, adresse de deuxième niveau
           var countryName = res.countryName ; // Adresse de livraison standard nationale, adresse de troisième niveau
          var address = res.address; // Informations détaillées sur l'adresse de livraison
          var nationalCode = res.nationalCode; // Code du pays de l'adresse de livraison
>
});

Magasin WeChat

Accéder à l'interface de la page produit WeChat

Copier le code Le code est le suivant :

wx.openProductSpecificView({
productId : '', // identifiant du produit
viewType : '' // 0. Valeur par défaut, page de détails du produit ordinaire 1. Scanner la page de détails du produit 2. Store page de détails du produit
});

Coupon de carte WeChat

Appel de la liste des cartes et coupons applicables au magasin et obtention de la liste de sélection des utilisateurs

Copier le code Le code est le suivant :

wx.chooseCard({
identifiant de la boutique : '', // ID du magasin
CardType : '', // Type de carte
CardId : '', // Identifiant du coupon de carte
timeStamp : 0, // Horodatage de la signature de la carte
nonceStr : '', // Chaîne aléatoire de signature de carte
cardSign : '', //Signature de la carte et du coupon, voir l'annexe 6
pour plus de détails Succès : fonction (res) {
        var cardList= res.cardList; // Informations sur la liste des cartes sélectionnées par l'utilisateur
>
});

Ajout par lots d'une interface pour les cartes et les coupons

Copier le code Le code est le suivant :

wx.addCard({
liste de cartes : [{
ID de carte : '',
cardExt : ''
}], // Liste des cartes et coupons à ajouter
Succès : fonction (res) {
          var cardList = res.cardList; // Ajout d'informations sur la carte et la liste de coupons
>
});

Afficher l'interface de la carte et du coupon dans le package de cartes WeChat

Copier le code Le code est le suivant :

wx.openCard({
liste de cartes : [{
ID de carte : '',
code : ''
}]// Liste des cartes et coupons à ouvrir
});

WeChat Pay

Initier une demande de paiement WeChat

Copier le code Le code est le suivant :

wx.choisissezWXPay({
horodatage : 0, // Horodatage de la signature du paiement
noncestr : '', // Chaîne aléatoire de signature de paiement
package : '', // Chaîne d'extension des détails de la commande, voir l'annexe 5
pour plus de détails paySign : ', // Signature du paiement, voir l'annexe 5 pour plus de détails
});