WeChat 그룹 채팅을 모방한 H5 페이지

시작

상반기 샤오미 맥스 출시 당시 위챗을 모방한 그룹 채팅 인터페이스 H5 페이지를 만들어 위챗에서 돌렸다. 모멘트: 회사 거물들이 모여 채팅을 하고 있었다. 그룹 내 Xiaomi Max에 대해 알아보고 사용자는 제품에 대해 알아보기 위해 질문을 할 수 있습니다.

페이지의 본문은 그룹 채팅 대화이며 대화에는 사진, 비디오, 애니메이션, 번역 등 많은 상호 작용도 포함됩니다. 사용자가 WeChat을 사용하여 링크를 열면 사용자 이름과 아바타도 얻을 수 있으며 사용자는 페이지에서 "나"로 채팅할 수 있습니다. 효과는 약간 현실적입니다~

더 이상 고민하지 않겠습니다. 먼저 페이지 효과를 살펴보세요. 페이지 주소(휴대폰으로 검색하는 것이 더 좋습니다). WeChat에서 이 링크를 방문하세요. 페이지에 "부활절 달걀"이 있고 빨간 봉투도 요청할 수 있습니다~

이미지 설명

원본 페이지에는 많은 대화와 상호 작용이 있습니다. 그래서 관심있는 학생들의 참고를 위해 Codepen에 넣을 메인 로직과 인터랙션을 선택했습니다~ 동시에 요약이라고 할 수 있는 제 생각과 아이디어를 간략하게 분석해봤습니다~

Codepen 링크를 클릭하세요 미리보기

전체 레이아웃

전체 레이아웃은 여전히 ​​매우 간단합니다. 모든 대화를 호스팅하는 스크롤 가능한 div, 모든 옵션이 포함된 하단의 고정된 "입력 상자"입니다.

캐릭터 및 대화 데이터

그룹 채팅의 모든 캐릭터는 캐릭터 ID, 이름, 아바타를 포함하여 js 개체 _members에 저장됩니다.

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

모든 대화 내용은 js 객체 _dialog에 저장됩니다. 각 대화는 _dialog에 저장됩니다(사용자는 어떤 작업도 수행할 필요가 없으며 자동으로 재생되는 그룹, 여러 메시지). 대화에는 여러 메시지가 포함되어 있습니다. 각 메시지에 대한 유형, 작성자, 내용 및 특별 이벤트를 설정하면 채팅 내용을 하나씩 메타데이터로 표시할 수 있습니다.

각 메시지에는 다음이 포함됩니다.

유형(5개) - 일반, 사진, 비디오, 시스템, 애니메이션

작성자 -

내용 - 메시지 내용;

일시 중지 시간 - 다음 대화를 계속 재생하기 위해 메시지가 나타난 후 일시 중지할 시간(설정하지 않은 경우 일시 중지 시간은 무작위입니다); 특별 이벤트를 트리거합니다) - 플래그 필드로 표시됩니다.

Move!

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
}

메타데이터가 있으면 매우 간단합니다. 대화를 반복하고 내부의 메시지 데이터를 HTML로 하나씩 연결한 다음 페이지에 추가합니다. 사용자가 "입력 상자"에서 질문을 클릭하면 해당 대화 상자가 트리거됩니다. 메시지에 플래그가 포함되어 있으면 플래그 내용에 따라 다양한 특수 이벤트가 트리거됩니다.

그럼~ 댕댕댕~ 이제 페이지가 구체화되기 시작했어요~

정말 간단하죠?

페이지가 구체화되기 시작했지만 기본 대화 효과는 여전히 매우 좋습니다... 몇 초마다 페이지에 갑자기 메시지가 나타나는 것을 상상해 보십시오. 효과가 매우 이상합니다. 위챗으로 채팅할 때 왜 이렇게 뻣뻣한 느낌이 안 드나요? 저자는 위챗을 조용히 관찰한 결과 각 메시지가 나타날 때 약간의 상승 효과가 있음을 발견했습니다~ 동시에 위의 메시지는 함께 위로 스크롤됩니다.

CSS로 해결할 수 있는 일을 js를 쓰지 않으려는 작성자에게는 이 간단한 효과가 너무 쉬울 것 같지는 않습니다.

그래서 각 메시지에 CSS 애니메이션 그룹이 추가되어 메시지의 DOM 요소가 페이지에 추가되면 메시지가 자동으로 위로 튀는 효과를 갖게 됩니다. 동시에 메시지가 추가될 때마다 대화 영역이 아래쪽으로 부드럽게 스크롤됩니다(최신 메시지 표시를 용이하게 하기 위해). 물론 이전 메시지가 모두 스크롤되도록 하려면 js를 작성해야 합니다. 함께 위로.

그런 다음

그런 다음 다양한 상호 작용, 음향 효과, 완벽한 애니메이션, 대화 등을 추가합니다. (얼마나 많은 작업이 필요한지 알고 싶지 않을 것입니다...) 그런 다음 Dang Dang Dang ~ 이 H5 페이지 완료되었습니다.

드디어

이 페이지의 완성은 우리의 믿음직한 디자이너들과 기획자들과 불가분의 관계에 있다고 말하고 싶습니다. . 프로토타입에서 드디어 온라인에 올라오는 순간까지 페이지가 서서히 발전하는 모습을 지켜보고 있습니다(온라인에 올라온 후 여러번 페이지를 바꿨지만..)~ 그래도 너무 행복했어요~