Verwenden Sie jQuery.wechat, um WeChat WEB application_jquery zu erstellen

Da meine Produkte in letzter Zeit im öffentlichen WeChat-Konto beworben werden müssen und einige sinnvolle Funktionen bieten müssen, war ich gezwungen, den Weg ohne Wiederkehr einzuschlagen und WeChat zu unterstützen.

Wie wir alle wissen, ist Tencent ein so magisches Unternehmen, dass seine Produkte großen Erfolg in der Wirtschaft haben, aber die Dokumentation zu Nodas öffentlicher Account-Entwicklungsplattform ist wirklich schwer zu loben Die offiziellen Dokumente zur Webentwicklung sind nur einzelne Beispiele, und der Rest ... Haha, es gibt so etwas wie Entwickleraustausch und gegenseitige Unterstützung.

Nachdem Sie das Bild oben gelesen haben, haben Sie das Gefühl, dass eine Menge Leute verzweifelt versuchen herauszufinden, was passiert ist, aber es gibt keine offizielle Stellungnahme! o(∩_∩)o Haha

Nachdem wir so viel gesagt haben, kommen wir schnell zum Punkt. Worüber ich in dieser Ausgabe sprechen möchte, ist jQuery.wechat, das ich geschrieben habe, nachdem ich mit Schmerzen zu kämpfen hatte, ein jQuery.plugin, das auf jQuery.promise basiert und eine einheitliche Lösung bietet API. Ich hoffe, das hilft allen.

Zuallererst ist die Installation ziemlich einfach

Code kopieren Der Code lautet wie folgt:

Bower Install --save jquery-wechat

Wenn Sie Bower nicht verwenden und es selbst von Github herunterladen und entpacken, ist es dasselbe!

Laden, es ist so natürlich wie Wasser

Code kopieren Der Code lautet wie folgt:

Wenn Sie Lazy-Loading-Technologien wie amd und cmd verwenden, müssen Sie ein Experte sein. Ich muss Ihnen nicht beibringen, wie man sie konfiguriert, oder?

Verwendung – einfach, leicht, einheitlich und unterhaltsam!

Aktivieren Sie die jQuery.wechat-Funktionalität
$.wechat.enable(); //So einfach!

Da das gesamte Plugin auf jQuery.promise basiert, können Sie ihm auch eine Kette geben:

Code kopieren Der Code lautet wie folgt:

$.wechat.enable().done(function(){
alarm('erfolgreich aktiviert');
}).fail(function(){
alarm('Aktivierung fehlgeschlagen');
});

Angesichts der derzeit weit verbreiteten Anwendung der Single-Page-Technologie (SPA) muss beim Entwurf von Toolklassen der Aktivierungs-/Deaktivierungsmechanismus berücksichtigt werden, da sonst unbekannte Fehler auftreten können.

Menü ein-/ausblenden

Code kopieren Der Code lautet wie folgt:

$.wechat.hideMenu(); //Menü ausblenden
$.wechat.showMenu(); //Menü anzeigen

Nachdem Sie jQuery.wechat aktiviert haben, können Sie Methoden wie hideMenu nach Belieben aufrufen, ohne andere Methoden in den aktivierten Done-Callback zu schreiben. Das Implementierungsprinzip von jQuery.wechat besteht darin, dass alle Vorgänge in die Warteschlange gestellt werden, wenn sie nicht erfolgreich aktiviert wurden. Wenn die Aktivierung fehlschlägt, werden sie nacheinander ausgeführt.

Untere Symbolleiste ein-/ausblenden
$.wechat.hideToolbar(); //Die untere Symbolleiste ausblenden
$.wechat.showToolbar(); //Untere Symbolleiste anzeigen

Öffnen Sie die QR-Code-Scanoberfläche
$.wechat.scanQRcode();

Öffnen Sie das Bildvorschau-Tool

Code kopieren Der Code lautet wie folgt:

$.wechat.preview({
Aktuell: 'http://xxx/img/pic001.jpg', // Nach Aufrufen des Vorschaumodus dieses Bild direkt anzeigen
URLs: [
         'http://xxx/img/pic001.jpg',
         'http://xxx/img/pic002.jpg',
         'http://xxx/img/pic003.jpg',
          'http://xxx/img/pic004.jpg',
         'http://xxx/img/pic005.jpg',
         'http://xxx/img/pic006.jpg'
] ]                                                                                                                                                                      });

Netzwerkstatus abrufen

Code kopieren Der Code lautet wie folgt:

$.wechat.getNetworkType().done(function(response) {
$('#network').text(response.split(':')[1]); });

Das Antwortformat lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

network_type:wifi wifi network

network_type:edge Nicht-WLAN, einschließlich 3G/2G
network_type:fail Netzwerkunterbrechung
network_type:wwan (2g oder 3g)

Ändern Sie das Freigabeformat

Jedes Mal, wenn ich eine Nachricht sehe, die von einer anderen App geteilt wird, wird sie mit einer schönen Miniaturansicht, einem passenden Titel und einer Beschreibung angezeigt. Außerdem gibt es unter der Nachricht eine kleine Textzeile, die angibt, wer die Nachricht gesendet hat Die von Ihnen geteilte Nachricht ist ein blaues, standardmäßig leeres Bild mit einem nicht übereinstimmenden Titel. Fragen Sie sich, in welche Logik sie eingefügt wurden?

Glücklicherweise lösen wir dieses Problem jetzt:

Code kopieren Der Code lautet wie folgt:

$.wechat.setShareOption({

appid: 'xxxx',                                                  img_width: '60',
img_height: '60',
img_url: window.location.toString() 'img/demo.jpg', //Thumbnail
Titel: 'DEMO', //Titel
Desc: 'Die Beschreibung wird von $.wechat.setShareOption festgelegt', //Description
Link: function() {
Return window.location.toString(); //Nachdem die Nachricht geteilt wurde, klickt der Benutzer auf die Linkadresse, die die Nachricht öffnet
},
​ Rückruf: Funktion(Antwort) {
warning(response); // Die Rückruffunktion nach dem Teilen, die häufigsten sind Erfolg und Abbruch
}
});

Veuillez vous référer aux captures d'écran suivantes pour plus de détails :

Ce changement de format de partage affectera les quatre fonctions d'envoi à des amis, de partage sur Moments, de partage sur Weibo et d'envoi d'e-mails. Après le réglage, cliquez sur le bouton de menu dans le coin supérieur droit pour ouvrir le menu, sélectionnez l'un des quatre éléments ci-dessus et vous verrez l'effet modifié

Fermer la page actuelle

Copier le code Le code est le suivant :

$.wechat.closeWindow();

Désactiver le mécanisme jQuery.wechat

Copier le code Le code est le suivant :

$.wechat.destroy();

Après la désactivation, toutes les fonctions seront automatiquement réinitialisées à leur état initial
Cette fonction est couramment utilisée dans les applications à page unique (SPA)