Methodencode zum Erstellen einer WeChat-WEB-Anwendung mit jQuery.wechat-WeChat-Entwicklung-php.cn

Methodencode zum Erstellen einer WeChat-WEB-Anwendung mit jQuery.wechat

高洛峰

Freigeben： 2017-03-14 14:54:04

Original

2059 Leute haben es durchsucht

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 basierend auf jQuery.promise, das eine einheitliche API. Ich hoffe, das hilft allen.

Da meine Produkte seit kurzem im offiziellen 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 kommerziellen Erfolg haben, aber die Dokumentation ist wirklich schwer zu loben. Ich kann in Nuo Da keine echte offizielle Plattform für die Kontoentwicklung finden. Ja, einige der offiziellen Dokumente zur Webentwicklung sind nur einzelne Beispiele, und der Rest ... Haha, es gibt so etwas wie Entwickleraustausch und gegenseitige Unterstützung.

Methodencode zum Erstellen einer WeChat-WEB-Anwendung mit jQuery.wechat

Haben Sie dieses Gefühl, nachdem Sie das Bild oben gelesen haben? Viele Menschen versuchen verzweifelt herauszufinden, was passiert ist, aber es gibt keine offizielle Stellungnahme! o(∩_∩)o Haha

Nachdem ich so viel gesagt habe, 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 basiert auf jQuery und bietet eine einheitliche API für .promise. Ich hoffe, das hilft allen.

Zuallererst

InstallationEs ist ganz einfach

Der Code lautet wie folgt:

bower install --save jquery-wechat

Nach dem Login kopieren

Falls nicht Verwenden Sie Bower, Sie können mit dem

Herunterladen und Dekomprimieren auf GitHub beginnen, das ist dasselbe!
Laden ist so natürlich wie Wasser

Der Code lautet wie folgt:

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-wechat/dist/jquery-wechat.min.js"></script>

Nach dem Login kopieren

Wenn Sie Lazy-Loading-Technologien wie AMD und CMD verwenden, müssen Sie dies tun Da Sie auch ein Experte sind, muss ich Ihnen nicht beibringen, wie man es konfiguriert, oder?

Verwendung – einfach, leicht, einheitlich und unterhaltsam!

jQuery.wechat-Funktion aktivieren

$.wechat.enable(); //So einfach!

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

Der Code lautet wie folgt:

$.wechat.enable().done(function(){
    alert(&#39;已经启用成功&#39;);
}).fail(function(){
    alert(&#39;启用失败&#39;);
});

Nach dem Login kopieren

Angesichts der derzeit weit verbreiteten Anwendung der Single-Page-Technologie (SPA) muss beim Entwurf von Werkzeugklassen das Aktivieren/Deaktivieren berücksichtigt werden Andernfalls kann es zu einem unbekannten Fehler kommen.

Menü ausblenden/anzeigen

Der Code lautet wie folgt:

$.wechat.hideMenu(); //隐藏菜单
$.wechat.showMenu(); //显示菜单

Nach dem Login kopieren

Nachdem Sie jQuery.wechat aktiviert haben, können Sie Methoden wie hideMenu nach Belieben aufrufen. Es ist nicht erforderlich, andere Methoden in den done-Rückruf von enable 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.

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

Öffnen Sie die QR-Code-Scan-Schnittstelle

$.wechat.scanQRcode();

Öffnen Sie das

BildVorschautool

Der Code lautet wie folgt :

$.wechat.preview({
    current: &#39;http://xxx/img/pic001.jpg&#39;,  //进入预览模式后，直接显示这张图片
    urls: [
        &#39;http://xxx/img/pic001.jpg&#39;,
        &#39;http://xxx/img/pic002.jpg&#39;,
        &#39;http://xxx/img/pic003.jpg&#39;,
        &#39;http://xxx/img/pic004.jpg&#39;,
        &#39;http://xxx/img/pic005.jpg&#39;,
        &#39;http://xxx/img/pic006.jpg&#39;
    ]                                      //所有要在预览模式下显示的图片
});

Nach dem Login kopieren

Netzwerkstatus

abrufen

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Das Antwortformat lautet wie folgt :

Code wie folgt:

network_type:wifi    wifi网络
network_type:edge    非wifi,包含3G/2G
network_type:fail    网络断开连接
network_type:wwan    (2g或者3g)

Nach dem Login kopieren

Ändern Sie das Freigabeformat

Jedes Mal, wenn Sie eine Nachricht sehen, die von der App einer anderen Person geteilt wird, wird sie wunderschön angezeigt

Miniaturansicht, passender Titel und Beschreibung. Darüber hinaus befindet sich unter der Nachricht eine Zeile mit kleinen Wörtern, die angeben, wer die Nachricht gesendet hat; ein blaues Standard-Leerbild mit einem nicht übereinstimmenden Titel fragt sich, in welche Logik sie geraten sind?

Glücklicherweise lösen wir dieses Problem jetzt:

Der Code lautet wie folgt:

$.wechat.setShareOption({
    appid: &#39;xxxx&#39;,                                               //小标appid
    img_width: &#39;60&#39;,
    img_height: &#39;60&#39;,
    img_url: window.location.toString() + &#39;img/demo.jpg&#39;,        //缩略图
    title: &#39;DEMO&#39;,                                               //标题
    desc: &#39;The description is set from $.wechat.setShareOption&#39;, //描述
    link: function() {
        return window.location.toString();                       //消息分享出去后，用户点击消息打开的链接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回调函数，常见的有成功和取消
    }
});

Nach dem Login kopieren

Einzelheiten finden Sie im Screenshot unten:

Methodencode zum Erstellen einer WeChat-WEB-Anwendung mit jQuery.wechat

Diese Änderung des Freigabeformats wirkt sich auf die vier Funktionen Senden an Freunde, Teilen auf Moments, Teilen auf Weibo und Senden von E-Mails aus. Klicken Sie nach der Einstellung auf die Menüschaltfläche in der oberen rechten Ecke, um das Menü zu öffnen, wählen Sie eines der vier oben genannten Elemente aus und Sie werden den geänderten Effekt sehen

Aktuelle Seite schließen

Der Code lautet wie folgt:

$.wechat.closeWindow();

Nach dem Login kopieren

jQuery.wechat-Mechanismus deaktivieren

Der Code lautet wie folgt:

$.wechat.destroy();

Nach dem Login kopieren

Nach der Deaktivierung alle Funktionen werden automatisch auf den Ausgangszustand zurückgesetzt. Status

Diese Funktion wird häufig in Single-Page-Anwendungen (SPA) verwendet

Das obige ist der detaillierte Inhalt vonMethodencode zum Erstellen einer WeChat-WEB-Anwendung mit jQuery.wechat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!