Eine H5-Seite, die den WeChat-Gruppenchat imitiert

Start

Als Xiaomi Max in der ersten Jahreshälfte veröffentlicht wurde, erstellten wir eine H5-Seite für die Gruppenchat-Schnittstelle, die WeChat imitierte und in WeChat Moments verbreitet wurde: Eine Gruppe hochrangiger Persönlichkeiten des Unternehmens unterhielt sich Über Xiaomi Max in der Gruppe, und Benutzer konnten großen Namen Fragen stellen, um mehr über das Produkt zu erfahren.

Der Hauptteil der Seite ist die Gruppenchat-Konversation, und die Konversation enthält auch viele Interaktionen: Bilder, Videos, Animationen, Übersetzungen usw. Wenn der Benutzer den Link über WeChat öffnet, erhält er auch den Benutzernamen und den Avatar und chattet als „Ich“ auf der Seite. Der Effekt ist etwas realistisch ~

Schauen wir uns das ohne weitere Umschweife an zuerst den Seiteneffekt. Seitenadresse (Mobiltelefon-Browsing ist besser). Besuchen Sie diesen Link in WeChat. Auf der Seite gibt es „Ostereier“, und Sie können auch nach roten Umschlägen fragen~

Bildbeschreibung

Die Originalseite bietet viel Dialog und Interaktion. Deshalb habe ich die Hauptlogik und Interaktion ausgewählt, die in Codepen eingefügt werden sollen, damit interessierte Schüler sie als Referenz nutzen können. Gleichzeitig habe ich kurz meine Gedanken und Ideen analysiert, die als Zusammenfassung betrachtet werden können.

Klicken Sie auf den Codepen-Link zur Vorschau

Gesamtlayout

Insgesamt ist das Layout immer noch sehr einfach: ein scrollbares Div, das alle Dialoge beherbergt, unten ein festes „Eingabefeld“, das alle Optionen enthält.

Charakter- und Konversationsdaten

Alle Charaktere im Gruppenchat werden im js-Objekt _members gespeichert, einschließlich der ID, des Namens und des Avatars des Charakters.

var _members = {
    lj: {
        id: 'lj',
        name: '雷军',
        avatar: _imgUrl + 'a-lj.png',
    },
}

Alle Dialoginhalte werden in einem js-Objekt _dialog gespeichert (der Benutzer muss keine Operation ausführen, eine Gruppe wird automatisch abgespielt, mehrere Nachrichten), jeder Dialog Jeder Eine Konversation enthält mehrere Nachrichten. Durch Festlegen von Typ, Autor, Inhalt und besonderen Ereignissen für jede Nachricht kann der Chat-Inhalt einzeln als Metadaten angezeigt werden.

Jede Nachricht enthält:

Typ (fünf) – einfach, Bild, Video, System, Animation;

Autor – ein Charakter in _member; Inhalt – Nachrichteninhalt;

Pausenzeit – wie lange nach dem Erscheinen der Nachricht pausiert werden soll, um mit der Wiedergabe des nächsten Dialogs fortzufahren (wenn nicht festgelegt, ist die Pausenzeit zufällig); löst besondere Ereignisse aus) – dargestellt durch das Flaggenfeld

Verschieben!

Sobald Sie Metadaten haben, ist es ganz einfach: Gehen Sie eine Konversation durch, fügen Sie die darin enthaltenen Nachrichtendaten einzeln in HTML ein und fügen Sie sie dann der Seite hinzu. Wenn der Benutzer auf eine Frage im „Eingabefeld“ klickt, wird der entsprechende Dialog ausgelöst. Wenn die Nachricht ein Flag enthält, werden durch den Inhalt des Flags verschiedene Sonderereignisse ausgelöst.

var _dialog = {
    d0: [{
        type: 'plain',
        author: _members.lj,
        content: userName + ' 你好，are you ok？',
        pause: 2000,
    }, {
        type: 'plain',
        author: _members.lwq,
        content: '欢迎 ' + userName + gif.welcome + gif.welcome + gif.welcome,
        flag: 'emoji-welcome',
    },]
    // ... more dialog
}

Dann~ Dang Dang Dang~ An diesem Punkt hat unsere Seite begonnen, Gestalt anzunehmen~

Ist es wirklich so einfach?

Obwohl die Seite begonnen hat, Gestalt anzunehmen, ist der grundlegende Dialogeffekt immer noch sehr gut ... Stellen Sie sich vor, dass alle paar Sekunden plötzlich eine Nachricht auf der Seite erscheint, der Effekt ist sehr seltsam. Warum fühlt es sich beim Chatten auf WeChat nicht so steif an? Der Autor beobachtete WeChat im Stillen und stellte fest, dass jede Nachricht beim Erscheinen einen leichten Aufwärtseffekt hatte. Gleichzeitig scrollten die oben genannten Nachrichten zusammen nach oben.

Dieser einfache Effekt sollte für den Autor, der versucht, kein js für Dinge zu schreiben, die mit CSS gelöst werden können, nicht zu einfach sein.

Daher wird jeder Nachricht eine CSS-Animationsgruppe hinzugefügt, sodass die Nachricht beim Hinzufügen des DOM-Elements der Nachricht zur Seite automatisch einen Aufwärts-Popup-Effekt hat. Gleichzeitig wird der Konversationsbereich jedes Mal, wenn eine Nachricht hinzugefügt wird, reibungslos nach unten gescrollt (um die Anzeige der neuesten Nachrichten zu erleichtern). Dies erfordert natürlich das Schreiben von js ..., damit die vorherigen Nachrichten gescrollt werden zusammen aufstehen.

Dann

Fügen Sie dann verschiedene Interaktionen, Soundeffekte, perfekte Animationen, Dialoge usw. hinzu. (Sie möchten nicht wissen, wie viel Arbeit das bedeutet ...) Dann Dang Dang Dang ~ Diese H5-Seite ist abgeschlossen.

Abschließend

Ich möchte sagen, dass die Fertigstellung dieser Seite untrennbar mit unseren zuverlässigen Designern und Planern verbunden ist. Jeder hat sie immer wieder verbessert, und ich kann mich nicht erinnern, wie oft Ich habe beobachtet, wie sich die Seite langsam von einem Prototyp bis zu dem Moment entwickelt hat, als sie endlich online ging >