Cet article a partagé une version détaillée de l'interface JS WeChat pour votre référence. Le contenu spécifique est le suivant
Instructions de base
Instructions pour une utilisation
1. introduce les fichiers JS
Présentez le fichier JS suivant sur la page qui doit appeler l'interface JS (prendre en charge https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Remarque: Prise en charge du chargement à l'aide de la méthode de chargement du module standard AMD / CMD
2. Injecter et configurer 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 du spa qui change l'URL peut être appelée chaque fois que l'URL change).
wx.config ({debug: true, // activer le mode de débogage, les valeurs de retour de toutes les API appelées seront alertées sur le client. Pour afficher les paramètres passés, vous pouvez les ouvrir côté PC. Noncestr: '', // requis, la chaîne aléatoire générée pour la signature de signature: '', // requise, la signature est affichée dans l'annexe 1 jsapilist: [] // requise, la liste des interfaces JS à utiliser et toutes les interfaces JS sont répertoriées en annexe 2});3. Vérifiez l'interface prête
wx.ready (function () {// Une fois les informations de configuration vérifiées, la méthode prête sera exécutée. Tous les appels d'interface doivent être obtenus après que l'interface de configuration obtient le résultat. La configuration est un fonctionnement asynchrone d'un client. et n'ont pas besoin d'être placés dans la fonction prête.4. Interface d'erreur d'échec de la vérification
WX.Error (fonction (res) {// Si les informations de configuration ne parviennent pas à vérifier, la fonction d'erreur sera exécutée. Si la signature expire, la vérification échouera. Pour des messages d'erreur spécifiques, vous pouvez ouvrir le mode de débogage de la configuration à afficher, ou vous pouvez le voir dans le paramètre RES renvoyé. Pour les spas, vous pouvez mettre à jour la signature ici.});Instructions d'appel d'interface
Toutes les interfaces sont appelées via des objets WX (peuvent également être utilisés avec les objets Jweixin). Les paramètres sont un objet. En plus des paramètres que chaque interface elle-même doit passer, il existe également les paramètres généraux suivants:
1. Succès: La fonction de rappel exécutée lorsque l'interface est appelée avec succès.
2. Échec: une fonction de rappel exécutée lorsque les appels d'interface échouent.
3. Complete: la fonction de rappel exécutée lorsque l'appel d'interface est terminé et sera exécuté indépendamment du succès ou de l'échec.
4. Annuler: la fonction de rappel lorsque l'utilisateur clique pour annuler, seules certaines API qui ont des opérations d'annulation des utilisateurs seront utilisées.
5. Trig Chug: Une méthode qui écoute le déclencheur lorsqu'un bouton est cliqué dans le menu. Cette méthode ne prend en charge que les interfaces connexes dans le menu.
Les fonctions ci-dessus ont toutes un paramètre, l'objet de type, en plus des données renvoyées par chaque interface elle-même, il existe également une propriété commune ERRMSG, dont le format de valeur est le suivant:
1. Lorsque l'appel réussit: "xxx: ok", où xxx est le nom de l'interface de l'appel
2. Lorsque l'utilisateur annule: "xxx: annuler", où xxx est le nom de l'interface appelé
3. Lorsque l'appel échoue: sa valeur est un message d'erreur spécifique
Interface de base
Déterminez si la version client actuelle prend en charge l'interface JS spécifiée
wx.checkjsapi ({jsapilist: ['ChooseMage'] // La liste des interfaces JS qui doivent être détectées, toutes les interfaces JS sont répertoriées dans l'annexe 2, Success: Function (RES) {// RETOUR comme paires de valeurs clés, la valeur de l'API disponible est vraie, et non disponible // par exemple: ?Interface de partage
Obtenez l'état de clic du bouton "Partage vers les moments" et personnalisez l'interface de contenu de partage
wx.onmenushareTimeLine ({title: '', // Partager le lien de titre: '', // lien de partage imgurl: '', // partager l'icône Success: function () {// La fonction de rappel exécutée après le partage de l'utilisateur a confirmé le partage}});Obtenez l'état de clic du bouton "Partage vers les amis" et personnalisez l'interface de contenu de partage
wx.OnMenushAreAppMessage ({Title: '', // Partager Title Desc: '', // Partager Description Lien: '', // Lien partager imgurl: '', // Type d'icône par défaut: '', // Type de partage, musique, vidéo ou lien, ne remplit pas le lien de données par défaut: '', // Le type est de la musique ou de la vidéo, vous avez besoin // Fonction de rappel exécutée après que l'utilisateur confirme le partage}, annuler: function () {// Fonction de rappel exécutée après que l'utilisateur annule le partage}});Obtenez l'état de clic du bouton "Partage vers QQ" et personnalisez l'interface de contenu de partage
wx.onmenushareqq ({title: '', // Partager title desc: '', // partager description lien: '', // lien partager imgurl: '' // icône partager le succès: function () {// la fonction de rappel exécutée après que l'utilisateur a confirmé le partage}, annuter: function () {// la fonction de rappel exécutée après que l'utilisateur a cancé le partage}});Obtenez l'état de clic du bouton "Partage sur Tencent Weibo" et personnalisez l'interface de contenu de partage
wx.onmenushareweibo ({title: '', // partager title desc: '', // partager description lien: '', // lien de partage imgurl: '' //) Success: function () {// La fonction de rappel exécutée après que l'utilisateur a confirmé le partage}, annuler: function () {// la fonction de rappel exécutée après que l'utilisateur a caché le partage}});Interface d'image
Prenez une photo ou sélectionnez une image dans l'interface de l'album de téléphone mobile
wx.chooseImage ({Success: function (res) {var localId = res.localids; // renvoie la liste d'ID locale de la photo sélectionnée. LocalId peut afficher des images comme l'attribut SRC de la balise IMG}});Aperçu de l'interface d'image
wx.preViewImage ({actuel: '', // Les URL des liens d'image actuellement affichés: [] // la liste des liens d'image qui doivent être prévisualités});Télécharger l'interface d'image
wx.uploadImage ({localId: '', // L'ID local de l'image à télécharger, obtenu à partir de l'interface de choix IsShowProgresstips: 1 // La valeur par défaut est 1, et l'invite de progression est affichée Success: Function (Res) {var Serverrid = Res.serverID; // Renvoie l'ID du serveur de l'image}});Remarque: vous pouvez télécharger l'image téléchargée par WeChat à l'aide de l'interface de fichier multimédia. Le serverid obtenu ici est Media_id. Document de référence ./ 12 / 58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Télécharger l'interface de l'image
wx.DownloadImage ({serverId: '', // L'ID côté serveur de l'image à télécharger, obtenu à partir de l'interface uploadimage iSShowProgresstips: 1 // La valeur par défaut est 1, et l'invite de progression s'affiche: la fonction (res) {var localId = res.loalid; // retour à l'ID local après l'image est téléchargée}});Interface audio
Démarrer l'interface d'enregistrement
wx.startRecord ();
Arrêter l'interface d'enregistrement
wx.stoprecord ({Success: function (res) {var localId = res.localid;}});Interface d'arrêt automatique pour surveiller l'enregistrement
wx.onvoiceCeReDend ({// Le rappel complet sera exécuté lorsque l'heure d'enregistrement dépasse une minute et ne s'arrête pas. Complete: fonction (res) {var localId = res.localid;}});Jouer à l'interface vocale
wx.playVoice ({localId: '' // L'ID local de l'audio à lire, obtenu par l'interface StopRecord});Interface de lecture en pause
wx.pausevoice ({localId: '' // L'ID local de l'audio qui doit être mis en pause, obtenu par l'interface StopRecord});Interface de lecture d'arrêt
wx.stopvoice ({localId: '' // L'ID local de l'audio doit être arrêté, obtenu par l'interface stopRecord});Surveillance de l'interface de lecture vocale
wx.onvoicePlayend ({serverId: '', // L'ID côté serveur de l'audio qui doit être téléchargé, obtenez le succès: fonction (res) {var localId = res.localid; // renvoie l'ID local de l'audio}});Télécharger l'interface vocale
wx.uploadVoice ({localId: '', // L'ID local de l'audio qui doit être téléchargé, obtenu à partir de l'interface stopRecord IsShowProgresstips: 1 // la valeur par défaut est 1, affichant le succès de l'invite de progression: fonction (res) {var ServerId = res.serverID; / RETTAGNER L'ID Server-Side de l'Audio}}});Remarque: vous pouvez télécharger la voix téléchargée par l'interface de fichier multimédia de WeChat. Le serverid obtenu ici est Media_id. Document de référence ./ 12 / 58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Télécharger l'interface vocale
wx.downloadVoice ({serverId: '', // L'ID côté serveur de l'audio qui doit être téléchargé, obtenu à partir de l'interface UploadVoice IsShowProgresstips: 1 // La valeur par défaut est 1, et l'invite de progression est affichée le succès: fonction (res) {var localId = res.localid; // renvoie l'ID local de l'audio}});Interface intelligente
Identifiez l'audio et retournez à l'interface de résultat de reconnaissance
wx.translateVoice ({localId: '', // L'ID local de l'audio qui doit être reconnu, IsShowProgresstips: 1, // La valeur par défaut est 1, affichant le succès de la progression: fonction (res) {alert (res.translatereSult); // le résultat de la reconnaissance vocale}});Informations sur l'équipement
Obtenez l'interface d'état du réseau
wx.getNetWorkType ({Success: function (res) {var NetworkType = res.networkType; // return Network Types 2G, 3G, 4G, wifi}});Emplacement géographique
Utilisez la carte intégrée de WeChat pour afficher l'interface d'emplacement
WX.OpenLocation ({latitude: 0, // latitude, numéro de point flottant, la plage est de 90 ~ -90 Longitude: 0, // longitude, numéro de point flottant, la plage est de 180 ~ -180. Nom: '', // Nom de l'emplacement Adresse: '', // Détails de l'adresse Échelle: 1, // Map au niveau du zoom, dans la plage de 1 ~ 28. affiché en bas de l'interface de position de visualisation, vous pouvez cliquer pour sauter});Obtenez l'interface de géolocalisation
WX.GetLocation ({horodatage: 0, // Position Signature horodatage, fourni non-claire: '', // Signature de position chaîne aléatoire, fournie uniquement lorsqu'elle est compatible avec la version 6.0.2, addRsign: '', // Signature de position, fourni uniquement lorsqu'il est compatible avec la version 6.0.2, voir APPENDICE 4 pour les détails. 90 ~ -90 Var Latitude = Res.Latitude;Opération d'interface
Masquer l'interface de menu wx.hideOptionMenu () dans le coin supérieur droit;
Afficher l'interface de menu wx.showoptionMenu () dans le coin supérieur droit;
Fermez l'interface de fenêtre Web actuelle wx.closewindow ();
Interface du bouton Fonction Masquer le lot
wx.hideMenuItems ({Menulist: [] // Pour masquer les éléments du menu, voir l'annexe 3});Interface du bouton de fonction d'affichage par lots
wx.showMenuems ({Menulist: [] // Tous les éléments de menu à afficher sont affichés dans l'annexe 3});Masquez toutes les interfaces de bouton non-base wx.hideallnonBasEmeMiUtem ();
Afficher l'interface du bouton de fonction WX.ShowallNonBasEmeMiUtem ();
Scannez le WeChat
Cliquez sur l'interface de numérisation WeChat
wx.scanqrcode ({desc: 'scanqrcode desc', NeedResult: 0, // La valeur par défaut est 0, le résultat de la numérisation est traité par WeChat, et 1 renvoie directement le résultat de la numérisation, Scantype: ["Qrcode", "Barcode"], // Vous pouvez spécifier si le code QR ou le code 1r; Lorsque NeedResult est 1, le résultat renvoyé en scannant le code}});Adresse de récolte
Modifier l'interface d'adresse de livraison
WX.EditAddress (horodatage: 0, // Location Signature horodatage, uniquement s'il doit être compatible avec la version aléatoire de la version 6.0.2: '', // la signature de location, unique Username = Res.Username; Adresse de niveau VAR VAR ADRESSE = RES.Address;
Obtenez l'interface d'adresse de livraison la plus proche
wx.getLatestAddress ({horodat: 0, // l'emplacement de la signature horodat (res) {var username = res.Username; // Adresse de livraison standard nationale Adresse var Adresse var = Res.Address;Magasin de wechat
Interface de page de produit WeChat sur WeChat
wx.openProductSpecificView ({productId: '', // Product idViewType: '' // 0. Valeur par défaut, détails du produit ordinaire page 1. Analyser les détails du produit Page 2. Store Détails du produit Page});Coupon de carte WeChat
Libérez la liste des coupons de carte pour les magasins et obtenez la liste de sélection des utilisateurs
wx.choosecard ({shopid: '', // Store ID CardType: '', // Type de carte Cardid: '', // Card ID Timestamp: 0, // Card ID Timestamp: Noncestr: '', // Card Signature Signature Random String Cardsign: '', // Card Vouchers Signature, Rependix 6 pour plus de détails. Informations sur la liste des bons sélectionnées par l'utilisateur}});Ajouter une interface de coupon de carte en lots
wx.addcard ({cardlist: [{cardid: '', cardExt: ''}], // La liste des coupons de carte qui doit être ajoutée Succès: fonction (res) {var cardlist = res.cardlist; // Les informations de liste de coupons de la carte}});Vérifiez l'interface du coupon de la carte dans le package de carte WeChat
wx.opencard ({cardlist: [{cardid: '', code: ''}] // liste des coupons de carte à ouvrir});Paiement WeChat
Lancer une demande de paiement WeChat
wx.choosewxpay ({horodatage: 0, // Signature de paiement Timestamp NONCESTR: '', // PACKAT Signature Random String Package: '', // Les détails de commande sont des chaînes étendues, voir l'annexe 5, paysign: '', // Les signatures de paiement sont pour plus de détails, voir l'annexe 5});Annexe 1 - Algorithme de signature d'autorisation JSSDK
JSAPI_TICKET
Avant de générer une signature, vous devez d'abord comprendre JSAPI_TICKET. JSAPI_TICKET est un billet temporaire utilisé par le compte officiel pour appeler l'interface WeChat JS. Dans des circonstances normales, la période de validité de JSAPI_TICKET est de 7200 secondes, qui est obtenue via Access_token. Étant donné que le nombre d'appels API pour obtenir JSAPI_TICKET est très limité, un rafraîchissement fréquent de JSAPI_TICKET entraînera limité les appels d'API et affectera leur propre entreprise. Les développeurs doivent mettre en cache JSAPI_TICKET dans le monde dans leurs services.
1. Reportez-vous au document suivant pour obtenir Access_token (valide pendant 7200 secondes, les développeurs doivent mettre en cache Access_token à l'échelle mondiale dans leur service): ../12/4B08382E91217687730A2DFC71E9218C.HTML
2. Utilisez l'accès_token obtenu dans la première étape pour demander le jsapi_ticket (valide pendant 7200 secondes, le développeur doit mettre en cache JSAPI_TICKET dans le monde entier dans son service): https://api.weixin.qq.com/cgi-bin/ticket/getticket?ccess_token=Access_Token&type=jsapisi
Renvoie avec succès le JSON suivant:
{"errcode": 0, "errmsg": "ok", "ticket": "bxldikrxvbtpdhsm05e5u5suoxnkd8-41zo3mhkoyn5ofkwitdggnr2fwj0m9e8nyzwkvzvdvtaugwvsdshfka", "expire_in": 7200}Après avoir obtenu JSAPI_TICKET, vous pouvez générer une signature pour la vérification d'autorisation JSSDK.
Algorithme de signature
Les règles de génération de signature sont les suivantes: les champs participant à la signature incluent NONCESTR (chaîne aléatoire), JSAPI_TICKET valide, horodatage (horodatage), URL (l'URL de la page Web actuelle, sans compter # et ses parties suivantes). Après avoir trié tous les paramètres à signer du petit à grand (ordre du dictionnaire) en fonction du code ASCII du nom du champ, le format de la paire de valeurs de clé URL (c'est-à-dire, key1 = value1 & key2 = value2…) est utilisé pour épisser une chaîne String1. Il convient de noter ici que tous les noms de paramètres sont des caractères minuscules. String1 est chiffré et le nom de champ et la valeur du champ sont à la fois des valeurs d'origine et aucune évasion d'URL n'est effectuée.
C'est-à-dire, signature = sha1 (string1). Exemple:
• Noncestr = wm3wzytpz0wzccnw
4
• horodatage = 1414587457
• url = http: //mp.weixin.qq.com
Étape 1. Après avoir trié tous les paramètres à signer du petit à grand (ordre du dictionnaire) en fonction du code ASCII du nom du champ, épissez-les dans String String1 en utilisant le format de la paire de valeurs de clé URL (c'est-à-dire, key1 = value1 & key2 = value2…):
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSlyY3-SL-HHTDFL 2FZFY1AOCHKP7QG & NONCESTR = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com
Étape 2. Signe String1 avec Sha1 et obtenez la signature:
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
Choses à noter
1. Le non-claim et l'horodatage utilisé pour la signature doivent être les mêmes que le non-claire et l'horodatage dans wx.config.
2. L'URL utilisée pour la signature doit être l'URL complète de la page appelant l'interface JS.
3. Pour des raisons de sécurité, les développeurs doivent implémenter la logique de signature du côté du serveur.
Annexe 2 - Liste de toutes les interfaces JS
• OnMenushareTimeline
• OnMenushareAppMessage
• Onmenushareqq
• Onmenushareweibo
• StartreCord
• StopRecord
• OnvoiceCordendend
• Playvoice
• Pause
• VOIGNEMENT
• OnVoicePlayend
• UploadVoice
• TéléchargerVoice
• Choisonimage
• Aperçu de l'image
• UploadImage
• Téléchargement Image
• traduire
• GetNetWorkType
• OpenLocation
• GetLocation
• HideoptionMenu
• ShowoptionMenu
• HidemeMiUtems
• showmeniuitems
• HideallnonBasemeniuitem
• ShowallNonBaseMeUtem
• Closewindow
• scanqrcode
• choisirwxpay
• getlatestaddress
• Editaddress
• OpenProductSpecificView
• AddCard
• Choosecard
• OpenCard
Annexe 3 - Liste de tous les boutons
Catégories de base
• Rapport: "Menuem: Exposearticule"
• Ajustez la police: "Menuem: Setfont"
• Mode diurne: "MENUITIEM: MODE DE DAYING"
• Mode nocturne: "Menuem: cauchemode"
• Actualiser: "Menuem: actualiser"
• Afficher le compte officiel (ajouté): "MENUITEM: Profil"
• Afficher le compte officiel (non ajouté): "Menuitem: AddContact"
Catégorie de communication
• Envoyez à un ami: "Menuem: Partager: AppMessage"
• Partager avec des moments: "Menuem: Partager: chronologie"
• Partager avec QQ: "Menuem: Partage: QQ"
• Partager avec Weibo: "Menuitem: Partager: Weiboapp"
• Collection: "Menuem: favori"
• Partager avec FB: "MenuItem: Partager: Facebook"
Classe de protection
• Débogage: "Menuitem: jsdebug"
• Tag édition: "Menuitem: edittag"
• Supprimer: "Menuitem: Supprimer"
• Copier le lien: "Menuem: Copyurl"
• Page Web d'origine: "Menuitem: Originpage"
• Mode de lecture: "Menuem: ReadMode"
• Ouvert dans le navigateur QQ: "MENUITEM: OpenWithqqBrowser"
• Ouvert en safari: "Menuitem: OpenWithsafari"
• Courriel: "Menuem: Partager: e-mail"
• Quelques comptes publics spéciaux: "Menuem: Partager: marque"
Annexe 4 - Algorithme de génération d'emplacement et d'adresse
Les règles de génération d'AddRSign sont les mêmes que celles de la vérification de l'autorisation JSSDK (voir l'annexe 1), mais les paramètres de signature participants sont différents. Les paramètres de signature participant à AddRSign sont: appid, URL (URL Web actuel), horodatage, non-closer, AccessoKer (références d'autorisation utilisateur, veuillez vous référer au protocole OAuth2.0 à obtenir).
Annexe 5 - Champ d'extension de paiement et algorithme de génération de signature
Détails de la commande (package) Définition de la chaîne d'extension
Lorsque le marchand redirige l'API JS, le marchand doit déterminer les détails de la commande à l'heure actuelle et combiner les détails de la commande dans le package d'une certaine manière. Une fois l'API JS appelé, WeChat générera une commande de remboursement anticipé via le contenu du package. Les éléments suivants définiront la liste de champs requise et la méthode de signature du package. L'interface doit être notée: tous les paramètres entrants sont des types de chaînes!
Cet article a été compilé dans "Résumé des compétences de développement de JavaScript WeChat", et tout le monde est le bienvenu pour apprendre et lire.
Je voudrais recommander un didacticiel sur le programme WECHAT MINI qui est fortement inquiet: "WECHAT Mini Program Development Tutorial" a été soigneusement compilé par le rédacteur en chef de tout le monde, j'espère que vous l'aimez.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.