WeChatのグループチャットを模倣したH5ページ

スタート

今年上半期にXiaomi Maxがリリースされたとき、WeChatを模倣したグループチャットインターフェイスH5ページを作成し、WeChatモーメントで広めました。会社の偉い人たちのグループがグループ内でXiaomi Maxについてチャットしていました、ユーザーは偉い人に製品について質問することができます。

ページの本体はグループ チャットの会話であり、会話には写真、ビデオ、アニメーション、翻訳などの多くのインタラクションも含まれています。ユーザーが WeChat を使用してリンクを開くと、ユーザー名とアバターも取得され、ユーザーはページ上で「私」としてチャットできます。その効果は少し現実的です ~

早速、見てみましょう。最初にページ効果。ページのアドレス (携帯電話での閲覧が便利です)。 WeChat のこのリンクにアクセスしてください。ページには「イースターエッグ」があり、赤い封筒を求めることもできます~

画像の説明

元のページには、メインのロジックとインタラクションがたくさんあります。興味のある学生のためにコードペンに載せてください〜 同時に、私自身の考えやアイデアを簡単に分析しました。これは要約と見なすことができます〜

コードペンのリンクをクリックしてプレビューします

全体のレイアウト

全体のレイアウトはまだです非常にシンプル: スクロール可能な div で、すべてのダイアログが下部に固定されています。「入力ボックス」にはすべてのオプションが含まれています。

キャラクターと会話データ

グループチャット内のすべてのキャラクターは、キャラクターのID、名前、アバターを含めてjsオブジェクト_membersに保存されます。

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

すべての会話コンテンツは、js オブジェクト _dialog に保存されます (ユーザーは何も操作する必要がなく、自動的に再生される複数のメッセージのグループです)。各会話には複数のメッセージが含まれます。メッセージごとにタイプ、作成者、内容、特別なイベントを設定すると、チャットの内容が 1 つずつメタデータとして表示されます。

各メッセージには以下が含まれます:

タイプ (5 つのタイプ) - プレーン、画像、ビデオ、システム、アニメーション;

コンテンツ - メッセージの内容;

一時停止時間 - メッセージの表示時間次のダイアログの再生を続ける前に一時停止します (設定されていない場合、一時停止時間はランダムになります)。

特別なフラグ (特別なイベントをトリガーします) -

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
}

移動!

メタデータを取得したら、非常に簡単です~ 会話をループし、メッセージ データを 1 つずつ HTML につなぎ合わせて、ページに追加します。ユーザーが「入力ボックス」内の質問をクリックすると、対応するダイアログがトリガーされます。メッセージにフラグが含まれている場合、フラグの内容によってさまざまな特別なイベントがトリガーされます。

それでは〜ダンダンダン〜この時点で私たちのページは形になり始めています〜

本当にそんなに簡単ですか？

ページは形になり始めていますが、基本的な対話効果はまだ非常に優れています...追加のメッセージが数秒ごとに突然ページに表示されることを想像してください。その効果は非常に奇妙です。 WeChat でチャットするとき、なぜそれほど硬く感じないのでしょうか?著者は静かに WeChat を観察したところ、各メッセージが表示されると、わずかに上向きの効果があることがわかりました。同時に、上記のメッセージも一緒に上向きにスクロールします。

このような単純な効果は、CSS で解決できるものについては JS を書かないようにしている作者にとって、それほど簡単ではないはずです。

そこで、CSS アニメーション グループを各メッセージに追加して、メッセージの DOM 要素がページに追加されると、メッセージが自動的に上向きのポップ効果を持つようにしました。同時に、メッセージが追加されるたびに、会話エリアがスムーズに下にスクロールします (最新のメッセージを表示しやすくするため)。これには、以前のメッセージがスクロールするように js を記述する必要があります。一緒に起きて。

それから

その後、さまざまなインタラクション、サウンドエフェクト、完璧なアニメーション、ダイアログなどを追加します。(これにどれだけの作業が含まれるか知りたくないでしょう...) そして、Dangdang~ この H5 ページが完成します。

最後に

このページの完成には、信頼できるデザイナーとプランナーの協力が不可欠であることをお伝えしたいと思います。何度修正したか覚えていません。ページは1からゆっくりと変わります プロトタイプ、オンラインになる瞬間まで（オンラインになってから何度も変更しましたが...）〜それでもとても幸せでした〜