An H5 page that imitates WeChat group chat

Start

When Xiaomi Max was released in the first half of the year, we made a group chat interface H5 page that imitated WeChat and spread in WeChat Moments: a group of big guys from the company were chatting about Xiaomi Max in the group, and users could ask questions to the big guys. Learn about the product.

The main body of the page is the group chat conversation, and the conversation also contains a lot of interactions: pictures, videos, animations, translations, etc. If the user opens the link using WeChat, the user name and avatar will also be obtained, and the user can chat as "I" on the page. The effect is a bit realistic ~

Without further ado, let's take a look at the page effect first. Page address (mobile phone browsing is better). Visit this link on WeChat. There are "Easter eggs" on the page, and you can also ask for red envelopes~

Picture description

The original page has a lot of dialogue and interactions. I selected the main logic and interactions and put them on codepen for interested students. Reference~ At the same time, I briefly analyzed my own thoughts and ideas, which can be regarded as a summary~

Codepen link click to preview

Overall layout

The overall layout is still very simple: one scrollable div, carrying all the dialogue; one fixed at the bottom The "input box" contains all options.

Character & Conversation Data

All characters in the group chat are saved in the js object _members, including the character's id, name, and avatar.

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

All conversation content is saved in a js object _dialog. Each conversation is saved in _dialog (the user does not need to do any operations, a group of automatically played, several messages), and each conversation contains several messages. , by setting the type, author, content, and special events for each message, the chat content is displayed one by one as metadata.

Each message includes:

type (five types) - plain, picture, video, system, animation;

author - a character in _member;

content - message content;

pause time - message appearance How long to pause before continuing to play the next dialogue (if not set, the pause time will be random);

Special flag (will trigger special events) - represented by the flag field;

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
}

Move!

It’s very simple once you have metadata~ Loop through a conversation, splice the message data inside into HTML one by one, and then add it to the page. When the user clicks on a question in the "input box", the corresponding dialogue is triggered. If the message contains flag, different special events are triggered by the content of the flag.

Then~ Dang Dang Dang~ At this point our page has begun to take shape~

Is it really that simple?

Although the page has begun to take shape, the basic dialogue effect is still very good... Imagine that an additional message suddenly appears on the page every few seconds, the effect is very strange. Why doesn’t it feel so stiff when chatting on WeChat? The author silently observed WeChat and found that when each message appeared, it had a slight upward effect~ At the same time, the above messages would scroll upward together.

This kind of simple effect should not be too easy for the author who tries not to write js for things that can be solved with css.

So I added a css animation goup to each message, so that when the DOM element of the message is added to the page, the message will automatically have an upward popping effect. At the same time, every time a message is added, the conversation area will be smoothly scrolled to the bottom (to facilitate the display of the latest messages). Of course, this requires writing js... so that the previous messages will scroll up together.

Then

then add various interactions, sound effects, perfect animations, dialogues, etc. (You won’t want to know how much work this involves...) Then Dangdang~ This H5 page is completed.

Finally

I want to say that the completion of this page is inseparable from our reliable designers and planners. Everyone has improved it again and again. I can’t remember how many times it has been modified... Watching the page slowly change from one The prototype, until the moment it finally went online (although I changed it many times after it went online...)~ I was still very happy~