Zusammenfassung der WeChat JS-Schnittstelle und detaillierte Erklärung der Verwendung_Javascript-Fähigkeiten

Grundlegende Anleitung

Gebrauchsanweisung

1. JS-Dateien importieren
Fügen Sie die folgende JS-Datei in die Seite ein, die die JS-Schnittstelle aufrufen muss (unterstützt https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

Hinweis: Unterstützt das Laden mit der AMD/CMD-Standard-Modullademethode

2. Fügen Sie die Konfigurationsschnittstelle ein
Alle Seiten, die JSSDK verwenden müssen, müssen zuerst Konfigurationsinformationen einfügen, andernfalls werden sie nicht aufgerufen (dieselbe URL muss nur einmal aufgerufen werden, und die SPA-Webanwendung, die die URL ändert, kann bei jeder URL-Änderung aufgerufen werden).

Code kopieren Der Code lautet wie folgt:

wx.config({
debug: true, // Die Rückgabewerte aller API-Aufrufe werden auf der Clientseite angezeigt. Wenn Sie die eingehenden Parameter anzeigen möchten, können Sie sie auf der PC-Seite anzeigen über das Protokoll ausgedruckt werden, nur auf der PC-Seite wird gedruckt.
appId: '', // Erforderlich, die eindeutige Kennung des offiziellen Kontos
Zeitstempel: , // Erforderlich, Zeitstempel zum Generieren der Signatur
nonceStr: '', // Erforderlich, generiert eine zufällige Signaturzeichenfolge
Signatur: '',//Erforderlich, Signatur, siehe Anhang 1
jsApiList: [] // Erforderlich, eine Liste aller JS-Schnittstellen, die verwendet werden müssen. Eine Liste aller JS-Schnittstellen finden Sie in Anhang 2
});

3. Überprüfen Sie über die fertige Schnittstelle

Code kopieren Der Code lautet wie folgt:

wx.ready(function(){

// Die Ready-Methode wird ausgeführt, nachdem die Konfigurationsinformationen überprüft wurden. Nachdem die Konfigurationsschnittstelle das Ergebnis erhalten hat, handelt es sich bei der Konfiguration um einen asynchronen Vorgang Wenn die Seite geladen wird, müssen Sie die entsprechende Schnittstelle in die Ready-Funktion einfügen, um eine korrekte Ausführung sicherzustellen. Bei Schnittstellen, die nur aufgerufen werden, wenn sie vom Benutzer ausgelöst werden, können sie direkt aufgerufen werden und müssen nicht in der Ready-Funktion platziert werden.
});

4. Verifizierungsfehler-Fehlerschnittstelle

Code kopieren Der Code lautet wie folgt:

wx.error(function(res){
// Wenn die Überprüfung der Konfigurationsinformationen fehlschlägt, wird die Fehlerfunktion ausgeführt. Wenn die Signatur abläuft und die Überprüfung fehlschlägt, können die spezifischen Fehlerinformationen durch Öffnen des Debug-Modus der Konfiguration oder im zurückgegebenen res-Parameter angezeigt werden. Die Signatur kann hier aktualisiert werden.
});

Anweisungen zum Aufrufen der Schnittstelle
Alle Schnittstellen werden über wx-Objekte aufgerufen (es können auch jWeixin-Objekte verwendet werden). Zusätzlich zu den Parametern, die von jeder Schnittstelle selbst übergeben werden müssen, gibt es auch die folgenden allgemeinen Parameter:

Erfolg: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf erfolgreich ist.
fail: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf fehlschlägt.
abgeschlossen: Die Rückruffunktion wird ausgeführt, wenn der Schnittstellenaufruf abgeschlossen ist, unabhängig von Erfolg oder Misserfolg.
Abbrechen: Die Rückruffunktion, wenn der Benutzer auf Abbrechen klickt. Sie wird nur von einigen APIs verwendet, bei denen der Benutzer den Vorgang abbricht.
Trigger: Eine Methode, die ausgelöst wird, wenn auf eine Schaltfläche im Menü geklickt wird. Diese Methode unterstützt nur verwandte Schnittstellen im Menü.

Die oben genannten Funktionen verfügen alle über einen Parameter vom Typ Objekt. Zusätzlich zu den von jeder Schnittstelle selbst zurückgegebenen Daten gibt es auch ein allgemeines Attribut errMsg, dessen Wertformat wie folgt lautet:

Wenn der Aufruf erfolgreich ist: „xxx:ok“, wobei xxx der Name der aufgerufenen Schnittstelle ist
Wenn der Benutzer abbricht: „xxx:cancel“, wobei xxx der Name der aufgerufenen Schnittstelle
ist Wenn der Aufruf fehlschlägt: Sein Wert ist die spezifische Fehlermeldung

Grundlegende Benutzeroberfläche
Bestimmen Sie, ob die aktuelle Clientversion die angegebene JS-Schnittstelle

unterstützt

Code kopieren Der Code lautet wie folgt:

wx.checkJsApi({
jsApiList: ['chooseImage'] // Liste der JS-Schnittstellen, die erkannt werden müssen. Die Liste aller JS-Schnittstellen finden Sie in Anhang 2,
Erfolg: Funktion(res) {
//In Form von Schlüssel-Wert-Paaren zurückgeben, der verfügbare API-Wert ist wahr und der nicht verfügbare API-Wert ist falsch
// Zum Beispiel: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

});

Freigabeschnittstelle

Erhalten Sie den Klickstatus der Schaltfläche „Teilen in Momenten“ und passen Sie die Benutzeroberfläche zum Teilen von Inhalten an

Code kopieren Der Code lautet wie folgt:

wx.onMenuShareTimeline({
Titel: '', // Titel teilen
Link: '', // Link teilen
imgUrl: '', // Teilen-Symbol
Erfolg: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe bestätigt
},
Abbrechen: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe abgebrochen hat
}
});

Erhalten Sie den Klickstatus der Schaltfläche „An Freunde teilen“ und passen Sie die Benutzeroberfläche zum Teilen von Inhalten an

Code kopieren Der Code lautet wie folgt:

wx.onMenuShareAppMessage({
Titel: '', // Titel teilen
desc: '', // Beschreibung teilen
Link: '', // Link teilen
imgUrl: '', // Teilen-Symbol
Typ: '', // Freigabetyp, Musik, Video oder Link, wenn leer gelassen, ist die Standardeinstellung Link
dataUrl: '', // Wenn der Typ Musik oder Video ist, muss ein Datenlink bereitgestellt werden, der standardmäßig leer ist
Erfolg: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe bestätigt
},
Abbrechen: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe abgebrochen hat
}
});

Erhalten Sie den Klickstatus der Schaltfläche „An QQ teilen“ und passen Sie die Benutzeroberfläche zum Teilen von Inhalten an

Code kopieren Der Code lautet wie folgt:

wx.onMenuShareQQ({
Titel: '', // Titel teilen
desc: '', // Beschreibung teilen
Link: '', // Link teilen
imgUrl: '' // Teilen-Symbol
Erfolg: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe bestätigt
},
Abbrechen: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe abgebrochen hat
}
});

Erhalten Sie den Klickstatus der Schaltfläche „Auf Tencent Weibo teilen“ und passen Sie die Benutzeroberfläche zum Teilen von Inhalten an

Code kopieren Der Code lautet wie folgt:

wx.onMenuShareWeibo({
Titel: '', // Titel teilen
desc: '', // Beschreibung teilen
Link: '', // Link teilen
imgUrl: '' // Teilen-Symbol
Erfolg: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe bestätigt
},
Abbrechen: Funktion () {
//Rückruffunktion wird ausgeführt, nachdem der Benutzer die Freigabe abgebrochen hat
}
});

Bildoberfläche

Schnittstelle zum Fotografieren oder Auswählen von Bildern aus dem Handyalbum

Code kopieren Der Code lautet wie folgt:

wx.chooseImage({
Erfolg: Funktion (res) {
            var localIds = res.localIds; // Gibt die lokale ID-Liste des ausgewählten Fotos zurück. localId kann als src-Attribut des img-Tags verwendet werden, um das Bild anzuzeigen
}
});

Vorschaubildoberfläche

Code kopieren Der Code lautet wie folgt:

wx.previewImage({
Aktuell: '', // Aktuell angezeigter Bildlink
URLs: [] // Liste der Bildlinks, die in der Vorschau angezeigt werden müssen
});

Bildoberfläche hochladen

Code kopieren Der Code lautet wie folgt:

wx.uploadImage({
localId: '', // Die lokale ID des hochzuladenden Bildes, erhalten über die ChooseImage-Schnittstelle
isShowProgressTips: 1// Der Standardwert ist 1 und zeigt Fortschrittstipps an
Erfolg: Funktion (res) {
          var serverId = res.serverId; // Gibt die Server-ID des Bildes zurück
}
});

Hinweis: Sie können die WeChat-Schnittstelle zum Herunterladen von Multimediadateien verwenden, um hochgeladene Bilder herunterzuladen. Weitere Informationen finden Sie im Dokument./12/58bfcfabbd501c7cd77c19bd9cfa8354.html

Bildschnittstelle herunterladen

Code kopieren Der Code lautet wie folgt:

wx.downloadImage({
serverId: '', // Die Server-ID des herunterzuladenden Bildes, abgerufen über die uploadImage-Schnittstelle
isShowProgressTips: 1// Der Standardwert ist 1 und zeigt Fortschrittstipps an
Erfolg: Funktion (res) {
          var localId = res.localId; // Nach dem Herunterladen des Bildes die lokale ID zurückgeben
}
});

Audio-Interface

Aufnahmeschnittstelle starten

Code kopieren Der Code lautet wie folgt:

wx.startRecord();

Aufnahmeschnittstelle stoppen

Code kopieren Der Code lautet wie folgt:

wx.stopRecord({
Erfolg: Funktion (res) {
      var localId = res.localId;
}
});

Schnittstelle zum automatischen Stoppen der Aufzeichnung

Code kopieren Der Code lautet wie folgt:

wx.onVoiceRecordEnd({
// Der vollständige Rückruf wird ausgeführt, wenn die Aufnahmezeit eine Minute überschreitet, ohne anzuhalten
vollständig: Funktion (res) {
var localId = res.localId; }
});

Sprachschnittstelle abspielen

Code kopieren Der Code lautet wie folgt:

wx.playVoice({

LocalId: '' // Die lokale ID des abzuspielenden Audios, erhalten über die stopRecord-Schnittstelle
});

Interface für Wiedergabe pausieren

Code kopieren Der Code lautet wie folgt:

wx.pauseVoice({

LocalId: '' // Die lokale ID des Audios, das angehalten werden muss, erhalten über die stopRecord-Schnittstelle
});

Wiedergabeschnittstelle stoppen

Code kopieren Der Code lautet wie folgt:

wx.stopVoice({

LocalId: '' // Die lokale ID des Audios, das gestoppt werden muss, erhalten über die stopRecord-Schnittstelle
});

Schnittstelle zur Überwachung des Abschlusses der Sprachwiedergabe

Code kopieren Der Code lautet wie folgt:

wx.onVoicePlayEnd({

ServerId: '', // Die Server-ID des herunterzuladenden Audios wird über die uploadVoice-Schnittstelle
abgerufen Erfolg: Funktion (res) {
          var localId = res.localId; // Gibt die lokale ID des Audios zurück
}
});

Sprachschnittstelle hochladen

Code kopieren Der Code lautet wie folgt:

wx.uploadVoice({

localId: '', // Die lokale ID des hochzuladenden Audios, erhalten über die stopRecord-Schnittstelle
isShowProgressTips: 1// Der Standardwert ist 1 und zeigt Fortschrittstipps an
Erfolg: Funktion (res) {
          var serverId = res.serverId; // Gibt die Server-ID des Audios zurück
}
});

Hinweis: Die hochgeladene Stimme kann über die WeChat-Schnittstelle zum Herunterladen von Multimediadateien heruntergeladen werden. Die hier erhaltene Server-ID ist media_id, siehe Dokument../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

Sprachschnittstelle herunterladen

Code kopieren Der Code lautet wie folgt:

wx.downloadVoice({
serverId: '', // Die serverseitige ID des herunterzuladenden Audios, abgerufen über die uploadVoice-Schnittstelle
isShowProgressTips: 1// Der Standardwert ist 1 und zeigt Fortschrittstipps an
Erfolg: Funktion (res) {
          var localId = res.localId; // Gibt die lokale ID des Audios zurück
}
});

Intelligente Schnittstelle

Audio erkennen und die Erkennungsergebnisschnittstelle zurückgeben

Code kopieren Der Code lautet wie folgt:

wx.translateVoice({
localId: '', // Die lokale ID des Audios, das erkannt werden muss, erhalten von der aufnahmebezogenen Schnittstelle
isShowProgressTips: 1, // Der Standardwert ist 1 und zeigt Fortschrittstipps an
Erfolg: Funktion (res) {
Alert(res.translateResult); // Ergebnisse der Spracherkennung
}
});

Geräteinformationen

Netzwerkstatusschnittstelle abrufen

Code kopieren Der Code lautet wie folgt:

wx.getNetworkType({
Erfolg: Funktion (res) {
           var networkType = res.networkType; // Netzwerktyp 2g, 3g, 4g, wifi zurückgeben
}
});

Geografischer Standort

Verwenden Sie die integrierte Karte von WeChat, um die Standortschnittstelle anzuzeigen

Code kopieren Der Code lautet wie folgt:

wx.openLocation({
Breitengrad: 0, // Breitengrad, Gleitkommazahl, Bereich ist 90 ~ -90
Längengrad: 0, // Längengrad, Gleitkommazahl, Bereich ist 180 ~ -180.
Name: '', // Standortname
Adresse: '', // Adressdetails
Maßstab: 1, // Kartenzoomstufe, Formwert im Bereich von 1 bis 28. Der Standardwert ist max
infoUrl: '' // Der am unteren Rand der Anzeigeortoberfläche angezeigte Hyperlink kann zum Springen angeklickt werden
});

Geografische Standortschnittstelle abrufen

Code kopieren Der Code lautet wie folgt:

wx.getLocation({
Zeitstempel: 0, // Ortssignatur-Zeitstempel, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
nonceStr: '', // Positionssignatur-Zufallszeichenfolge, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
​​ addrSign: '', // Standortsignatur, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2, siehe Anhang 4
für Details Erfolg: Funktion (res) {
           var longitude = res.longitude; // Breitengrad, Gleitkommazahl, Bereich ist 90 ~ -90
        var width = res.latitude; // Längengrad, Gleitkommazahl, Bereich ist 180 ~ -180.
           var speed = res.speed; // Geschwindigkeit, in Metern/Sekunde
        var precision = res.accuracy; // Positionsgenauigkeit
}
});

Schnittstellenbetrieb

Code kopieren Der Code lautet wie folgt:

Blenden Sie die Menüoberfläche in der oberen rechten Ecke aus
wx.hideOptionMenu();
Zeigen Sie die Menüoberfläche in der oberen rechten Ecke an
wx.showOptionMenu();
Schließen Sie die aktuelle Webfensteroberfläche
wx.closeWindow();
Batch-Schnittstelle mit versteckten Funktionstasten
wx.hideMenuItems({
menuList: [] // Auszublendende Menüelemente, alle Menüelemente finden Sie in Anhang 3
});
Funktionstastenschnittstelle für die Stapelanzeige
wx.showMenuItems({
menuList: [] // Anzuzeigende Menüpunkte, siehe Anhang 3
für alle Menüpunkte });
Blenden Sie alle nicht grundlegenden Tastenschnittstellen aus
wx.hideAllNonBaseMenuItem();
Alle Funktionstastenschnittstellen anzeigen
wx.showAllNonBaseMenuItem();
Scannen Sie auf WeChat
Öffnen Sie die WeChat-Scanoberfläche
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // Der Standardwert ist 0, das Scanergebnis wird von WeChat verarbeitet, 1 gibt das Scanergebnis direkt zurück,
scanType: ["qrCode", "barCode"], // Sie können angeben, ob ein QR-Code oder ein 1D-Code gescannt werden soll, beide sind standardmäßig verfügbar
Erfolg: Funktion () {
var result = res.resultStr; // Wenn needResult 1 ist, wird das durch das Scannen des QR-Codes zurückgegebene Ergebnis
}
});

Ernteadresse

Schnittstelle zur Versandadresse bearbeiten

Code kopieren Der Code lautet wie folgt:

wx.editAddress(
Zeitstempel: 0, // Ortssignatur-Zeitstempel, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
nonceStr: '', // Positionssignatur-Zufallszeichenfolge, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
​​ addrSign: '', // Standortsignatur, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2, siehe Anhang 4
für Details Erfolg: Funktion (res) {
          var userName = res.userName; // Name des Empfängers
        var telNumber = res.telNumber; // Telefonnummer des Empfängers
        var postalCode = res.postalCode; // Postleitzahl
           var ProvinceName = res.provinceName; // Adresse der ersten Ebene der nationalen Standardlieferadresse
          var cityName = res.cityName; // Nationale Standardlieferadresse, Adresse der zweiten Ebene
           var countryName = res.countryName; // Nationale Standardlieferadresse, Adresse der dritten Ebene
          var address = res.address; // Detaillierte Informationen zur Lieferadresse
          var nationalCode = res.nationalCode; // Ländercode der Lieferadresse
}
});

Ermitteln Sie die Schnittstelle zur nächstgelegenen Lieferadresse

Code kopieren Der Code lautet wie folgt:

wx.getLatestAddress({
Zeitstempel: 0, // Ortssignatur-Zeitstempel, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
nonceStr: '', // Positionssignatur-Zufallszeichenfolge, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2
​​ addrSign: '', // Standortsignatur, nur bereitgestellt, wenn kompatibel mit Versionen vor 6.0.2, siehe Anhang 4
für Details Erfolg: Funktion (res) {
          var userName = res.userName; // Name des Empfängers
        var telNumber = res.telNumber; // Telefonnummer des Empfängers
        var postalCode = res.postalCode; // Postleitzahl
           var ProvinceName = res.provinceName; // Adresse der ersten Ebene der nationalen Standardlieferadresse
          var cityName = res.cityName; // Nationale Standardlieferadresse, Adresse der zweiten Ebene
           var countryName = res.countryName; // Nationale Standardlieferadresse, Adresse der dritten Ebene
          var address = res.address; // Detaillierte Informationen zur Lieferadresse
          var nationalCode = res.nationalCode; // Ländercode der Lieferadresse
}
});

WeChat Store

Zur Benutzeroberfläche der WeChat-Produktseite springen

Code kopieren Der Code lautet wie folgt:

wx.openProductSpecificView({
Produkt-ID: '', // Produkt-ID
viewType: '' // 0. Standardwert, normale Produktdetailseite 1. Produktdetailseite scannen 2. Produktdetailseite speichern
});

WeChat-Kartengutschein

Aufrufen der Liste der für das Geschäft geltenden Karten und Coupons und Abrufen der Benutzerauswahlliste

Code kopieren Der Code lautet wie folgt:

wx.chooseCard({
shopId: '', // StoreId
CardType: '', // Kartentyp
CardId: '', // Kartencoupon-ID
timeStamp: 0, // Zeitstempel der Kartensignatur
nonceStr: '', // Zufallszeichenfolge der Kartensignatur
cardSign: '', //Karten- und Couponsignatur, siehe Anhang 6
für Details Erfolg: Funktion (res) {
        var cardList= res.cardList; // Vom Benutzer ausgewählte Kartenlisteninformationen
}
});

Batch-Hinzufügen-Schnittstelle für Karten und Coupons

Code kopieren Der Code lautet wie folgt:

wx.addCard({
Kartenliste: [{
Karten-ID: '',
cardExt: ''
}], // Liste der hinzuzufügenden Karten und Coupons
Erfolg: Funktion (res) {
          var cardList = res.cardList; // Karten- und Couponlisteninformationen hinzugefügt
}
});

Sehen Sie sich die Karten- und Coupon-Schnittstelle im WeChat-Kartenpaket an

Code kopieren Der Code lautet wie folgt:

wx.openCard({
Kartenliste: [{
Karten-ID: '',
Code: ''
}]// Liste der Karten und Coupons, die geöffnet werden müssen
});

WeChat Pay

Initiieren Sie eine WeChat-Zahlungsanfrage

Code kopieren Der Code lautet wie folgt:

wx.chooseWXPay({
Zeitstempel: 0, // Zeitstempel der Zahlungssignatur
noncestr: '', // Zufällige Zeichenfolge der Zahlungssignatur
Paket: '', // Bestelldetails-Erweiterungszeichenfolge, Einzelheiten finden Sie in Anhang 5
paySign: '', // Zahlungssignatur, Einzelheiten siehe Anhang 5
});