Dieser Artikel fasst die Verwendung von Wechat JSSDK zusammen und teilt ihn für Ihre Referenz mit. Der spezifische Inhalt ist wie folgt
1. Binden Sie den Domänennamen
2. JS -Datei einführen
Führen Sie die folgende JS-Datei auf der Seite ein, auf der die JS-Schnittstelle (Support https) aufgerufen werden muss: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Bitte beachten Sie, dass Sie, wenn Ihre Seite mit HTTPS aktiviert ist, https://res.wx.qq.com/open/js/jweixin-1.0.0.js vorstellen. Andernfalls können Sie JSSDK in iOS90 oder über Systemen nicht erfolgreich verwenden.
3. Überprüfen Sie die Konfiguration über die Konfigurationsschnittstelle
Dieser Schritt soll eine Reihe von Parametern erhalten, indem eine Anfrage mit der aktuellen URL an den Hintergrund gesendet wird. Das heißt, der Hintergrund verwendet meine URL, um sie auf WeChat zu überprüfen. Hier zu beachten sind Dinge, um die aktuelle URL -Schreibmethode zu überprüfen.
let url = location.href.split ('#') [0];
Schreiben Sie unbedingt die obige Situation. Andernfalls wird die Ungültige Signatur der Konfiguration Zeit durchgeführt.
Bestätigen Sie, dass die URL die vollständige URL der Seite ist (bitte bestätigen Sie in der aktuellen Seitenalarm (location.href.split ('#') [0])), einschließlich des Teils 'http (s): //' und '? "Der Parameter -Teil des Get -Parameters danach enthält aber nicht den Teil nach"#"Hash.
Stellen Sie sicher, dass die URL, an die Sie sich gewöhnt haben, dynamisch erhalten wird. Sie können sich auf die Implementierungsmethode von PHP im Beispielcode für die dynamische Seite beziehen. Wenn die statische Seite von HTML über Ajax am vorderen Ende an das Backend an die Signatur der URL übergeben wird, muss das vordere Ende JS verwenden, um die aktuelle Seite zu erhalten und den Link zum Hash -Hash -Teil "#" zu entfernen. Link. Wenn der aktuelle Link nicht dynamisch erhalten wird, schlägt die Seitensignatur nach der Freigabe fehl.
Achten Sie hier auf die Dynamik, spleißen Sie sie nicht selbst und codieren Sie gleichzeitig Harrizomponenten.
$ .ajax ({type: 'get', url: url: dataType: 'jsonp'}). Dann ((data) => {wx.config ({debug: true, true // Turn ein Debug -Modus ein. Debug -Modus einschalten. Seite.4. erfolgreich über die Verarbeitung von Ready -Schnittstellenverarbeitung verifiziert
Nachdem die Konfigurationsinformationen überprüft wurden, wird die Ready -Methode ausgeführt. Alle Schnittstellenaufrufe müssen erhalten werden, nachdem die Konfigurationsschnittstelle das Ergebnis erhalten hat. Config ist ein asynchroner Betrieb eines Clients. Wenn Sie also die relevante Schnittstelle aufrufen müssen, wenn die Seite geladen wird, müssen Sie die entsprechende Schnittstelle in die zu raditionelle Funktion einsetzen, um die korrekte Ausführung sicherzustellen. Für Schnittstellen, die nur dann aufgerufen werden, wenn der Benutzer ausgelöst wird, können sie direkt aufgerufen werden, ohne sie in die Bereitschaftsfunktion zu setzen.
wx.ready (() => {// alert ('Ready'); //$('#onMenushareAppMessage').on('click ', () => {// Mit Freunden teilen. Senden Sie an Freunde; // Teile an Momente wx.onmenusharetimeline ({title: '', // Title Link: Shareurl, // Link imgurl: '' User Cancels Sharing // alarm ('storniert'); });5. Fehlgeschlagene Überprüfung durch die Fehlerschnittstelle
Die Fehlerfunktion wird ausgeführt, wenn die Konfigurationsinformationen fehlschlagen. Wenn die Signatur abläuft, schlägt die Überprüfung fehl. Für bestimmte Fehlermeldungen können Sie den Debug -Modus der Konfiguration öffnen oder im Parameter zurückgegebene Res Ansicht.
wx.Error ((res) => {alert (res.errmsg);})6. Grundlegende Schnittstelle
• Teilen Sie die Schnittstelle zur Momente frei
wx.onmenusharetimeline ({title: '', // title link: '', // link imgurl: ''• Schnittstellen, die Sie mit Freunden teilen können
wx.onmenushAreAppMessage ({title: '', // title desc: '' // Rückruffunktion, die nach der Bestätigung des Benutzers die Freigabe}, abbrechen: function () {// Rückruffunktion, die nach dem Stornieren der Freigabe}} ausgeführt wurde, ausgeführt wird;Wenn Sie den gemeinsam genutzten Inhalt hier mit einer AJAX -Asynchronanforderung in den gemeinsam genutzten Inhalt hinzufügen müssen, muss die Sharing -Schnittstelle in der erfolgreichen Funktion erneut aufgerufen werden, nachdem die AJAX -Anforderung zurückgegeben wurde. Die Freigabe -Schnittstelle muss jedoch in der Funktion wx.ready platziert werden und können nicht separat aufgerufen werden. Da der Client -Sharing -Vorgang ein synchroner Vorgang ist, wurden die Daten mit AJAX noch nicht zurückgegeben.
7. Diese Schritte scheinen einfach zu sein, aber es gibt unweigerlich viele Probleme beim Debuggen , da die JSSDK -Schnittstelle immer noch viele Einschränkungen hat. Ich trat versehentlich auf die Grube.
8. Schließlich habe ich diese Schnittstelle eingekapselt .
"Strict"; lass wxDefaultoptions = {debug: true, appid: '', timestamp: 0, noncestern: "Showmenuitems", "hideAllnonbasemenuitems", "showallnonbasemuitems", "showallnonbasemuitems", "showallnonbasemeNuitems", "translateVoice", "Startrecord", "Pause", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "Stop "and 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseSecard', 'opencard']}; // lass ShareUrl = 'http: // xxx' + location.PathName; lass getwxparam = (url, wxoptions) => {let url = location.href.split ('#') [0]; URL = CODURIComponent (URL); lass versprechen = new Promise ((Resolve, ablehnen) => {$ .ajax ({type: 'get', url: 'http: // xxx/xxx? param ='+url, dataType: 'jsonp'}) .then ((data) => {let wxParam = data; console.log (wxParam); 'WXEB5C3F4A03B880F0'; Resolve (); return versprechen;} // Teile an Momente lass Sharesocial = (param) => {wx.onMenusharetimeline ({title: param.title, // title link: param.link, // link imgurl: param.imgurl, // icon erfolgreich teilen: function () {//). {// Rückruffunktion Param.FailCalback () ausgeführt, nachdem der Benutzer die Freigabe abgebrochen hat; Erfolg: function (res) {param.sucAllback (); wx.ready (() => {// an Momente teilen Sharesocial (param); Sharetofriends (param);})} Funktion CALLWX (param, wxoptions) {getwxparam (param.url, wxoptions) .then () => {jssdk (param);})} // // // Titel: '', Desc: '', Link: '', Imgurl: '', Sucallback: func, failCalback: func} module.exports = {wxDefaultOptions, // Ändern Sie die Konfiguration Callwx, // Default -Konfiguration, passen Sie den Inhalt der Konfiguration der Wechat -Freigabe nach Konfiguration an und bereit,}}}Dieser Artikel wurde in "Zusammenfassung von JavaScript Wechat Development Skills" zusammengestellt, und jeder kann gerne lernen und lesen.
Ich möchte ein Tutorial zum WeChat Mini -Programm empfehlen, das sehr besorgt ist: "WeChat Mini -Programmentwicklungs -Tutorial" wurde vom Herausgeber aller sorgfältig zusammengestellt. Ich hoffe, es gefällt Ihnen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.