Kürzlich hat das Unternehmen eine H5-Seite für Studenten erstellt, die hauptsächlich auf WeChat verwendet wird und die WeChat-Freigabefunktion hinzufügen muss.
In diesem Artikel werden hauptsächlich die Dinge beschrieben, die beim Aufrufen der WeChat-Freigabeschnittstelle beachtet werden müssen.
1. Für das im Front-End verwendete Angular1-Framework müssen Sie zunächst die WeChat-Schnittstellendatei auf der Indexseite einführen.
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Schreiben Sie die WeChat-Freigabefunktion in die Datei myApp.run. Beachten Sie, dass diese Funktion die URL der aktuellen Seite abrufen und analysieren und sie dann an das Backend senden muss, um die entsprechende Signatur zu generieren und den Code direkt hochzuladen.
// WeChat-Freigabefunktion function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. code == 0) { var respanse = res.data.data({ debug: false, // Wenn der Debugging-Modus aktiviert ist, werden die Rückgabewerte aller API-Aufrufe auf der Clientseite angezeigt. Wenn Sie die eingehenden Parameter anzeigen möchten, können Sie sie auf der PC-Seite öffnen log und appId werden nur auf der PC-Seite gedruckt. respanse.appId, Zeitstempel: respanse.timestamp, // Erforderlich, generiert den Zeitstempel der Signatur. nonceStr: respanse.nonceStr, // Erforderlich, generiert die zufällige Zeichenfolgensignatur Unterschrift: respanse.signature,//Erforderlich, Signatur jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']//Erforderlich, Liste der JS-Schnittstellen, die verwendet werden müssen}); } } ) }Senden Sie die aktuelle URL nach dem Parsen an die Back-End-Schnittstelle. Das Back-End muss die App-ID, den Zeitstempel, die Zufallszeichenfolge und die Signatur zurückgeben und dann bei Bedarf die Schnittstellenliste (jsApiList) manuell hinzufügen Die Form eines Arrays muss hier nur aufgerufen werden.
Beim Debuggen können Sie debug auf true ändern, sodass bei jedem Aufruf der WeChat-Schnittstelle die Schnittstelleninformationen benachrichtigt werden, sodass leicht überprüft werden kann, ob der Schnittstellenaufruf normal ist.
3. Passen Sie nach dieser Funktion den Freigabeinhalt an. Der Code lautet wie folgt:
wx.ready(function () { var obj = { title: 'SPBCN-Teamwettbewerb hat mit der Abstimmung begonnen!', // Share title desc: 'SPBCN-Teamwettbewerb hat mit der Abstimmung begonnen, kommen Sie und feuern Sie uns an!', // Teilen Sie die Beschreibung Link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Link teilen, der Link-Domänenname oder -Pfad muss mit dem aktuellen JS-Sicherheitsdomänennamen des öffentlichen Kontos übereinstimmen Seite // Bei diesem Link handelt es sich um einen Weiterleitungslink, da der Benutzercode abgerufen werden muss. Dieser Link kann den Link jedoch nicht direkt an WeChat schreiben, um den Code abzurufen. // Daher müssen Sie auf die neue Seite klicken und sie erneut laden, um die Umleitung zu implementieren und erneut zu öffnen WeChat-Link zum Abrufen des Codes, um die Funktion zum Abrufen von Benutzerinformationen zu implementieren; imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // Share-Symbol fail: function (res) { alarm(JSON.stringify(res)) ; }; // 2.1 Überwachen Sie das Teilen mit Freunden, Schaltflächenklicks, angepasste Freigabeinhalte und die Freigabeergebnisschnittstelle wx.onMenuShareAppMessage(obj); ; // 2.3 Share-to-QQ-Button-Klicks überwachen, Sharing-Inhalte und Sharing-Ergebnisschnittstelle anpassen wx.onMenuShareQQ(obj); 2.4 Überwachen Sie den Klick auf die Share-Schaltfläche auf Weibo, passen Sie den Sharing-Inhalt und die Sharing-Ergebnisschnittstelle an wx.onMenuShareWeibo(obj); // 2.5 Überwachen Sie den Klick auf die Share-Schaltfläche auf QZone, passen Sie den Sharing-Inhalt und die Sharing-Schnittstelle an wx. onMenuShareQZone(obj });wx.ready wird automatisch nach wx.config ausgeführt und ruft es dann direkt auf. Sie können bei Bedarf auch andere Inhalte zum Teilen von Freunden, Freunden, Weibo usw. definieren Weitere Informationen finden Sie in der Dokumentation zur WeChat-Schnittstelle.
Der Schwerpunkt liegt auf dem Freigabelink. Der Link muss unter dem von Ihrem offiziellen Konto festgelegten JS-Sicherheitsdomänennamen liegen, andernfalls kann die Freigabe nicht erfolgreich sein.
Die Symptome eines Freigabefehlers bestehen darin, dass das Bild des Freigabelinks Ihr benutzerdefiniertes Bild nicht laden kann und der Freigabetitel falsch ist.
5. Mein Projekt dient der Abstimmung, daher muss ich jedes Mal, wenn ich hineinklicke, den Benutzercode abrufen. Wenn Sie nur einen Artikel teilen und keine Benutzerinformationen benötigen, ändern Sie einfach den Link in Ihren Artikellink.
6. Für die Abstimmungskategorie habe ich hier eine Sonderbehandlung vorgenommen, nämlich die Umleitung des Links. Jeder weiß, dass es für H5 zwei Möglichkeiten gibt, WeChat-Benutzerinformationen zu erhalten Benutzer, um die öffentlichen Informationen des Benutzers abzurufen. Der Benutzer klickt auf OK. Beide müssen jedoch gemäß den Anforderungen von WeChat in einen speziellen WeChat-Link eingebunden werden. Daher ist der Domänenname bei WeChat enthalten und nicht der JS-sichere Domänenname unseres eigenen öffentlichen Kontos.
7. Wenn Sie also für den freigegebenen Link noch den Benutzercode benötigen, müssen Sie andere Methoden verwenden, um ihn zu erreichen. Ich habe eine leere Seite hinzugefügt und nach dem Laden der Seite zu WeChat gesprungen, um ihn abzurufen der Code-Link, http://dev.spbcn.org/wechat-vote-phone/redirect.html. Dieser Link ist eine leere Seite. Der Code für diese Seite lautet wie folgt;
window.onload = function () { // Der Weiterleitungslink ist derselbe wie der Link zum Abrufen des Benutzercodes im offiziellen WeChat-Konto window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. Diese Methode hat Nachteile, das heißt, sie fügt eine zusätzliche leere Seite hinzu. Ich habe noch keine gute Möglichkeit gefunden, eine Nachricht zu hinterlassen.
9. Wenn dieser Schritt nicht hinzugefügt wird, wird der freigegebene Link normal angezeigt, der Code kann jedoch nicht abgerufen werden und das Backend kann den Benutzer nicht ermitteln, was dazu führt, dass Benutzer nicht an der Abstimmung gehindert werden können.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.