WeChatアプレットはシンプルなチャットルームを実装します

// ページ/チャット/チャット.js
// ミニプログラムインスタンスを取得します。let app = getApp();
ページ（{

  /**
   * ページの初期データ */
  データ： {
    ニックネーム：''、
    アバター:''、
    チャットリスト:[
      {
        ニックネーム:「小林」,
        アバター:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg',
        内容:`こんにちは! `
      }
    ]、
    価値がない:''
  },
  送信メッセージ:関数(){
    _this = this とします。
    obj = {
      ニックネーム:_this.data.nickname,
      アバター:_this.data.avatar,
      コンテンツ:_this.data.invalue
    };
    arr = _this.data.chatlists とします。
    arr.push(オブジェクト)
    _this.setData({
      チャットリスト:arr,
      価値がない:''
    });

    // チャット内容をサーバーに送信し、処理後に返して、返されたデータをチャットリストに格納します},
  getInput:関数(e){
    console.log(e.detail.value);
    this.setData({invalue:e.detail.value});
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    console.log(app.globalData.userInfo.nickName);
    this.setData({
      ニックネーム:app.globalData.userInfo.nickName、
      アバター:app.globalData.userInfo.avatarUrl
    });
  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {

  },

  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {

  },

  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  }
})

<block wx:for="{{チャットリスト}}" wx:for-index="ind" wx:for-item="チャット" wx:key="ind">

<view class="chat self" wx:if="{{nickname == chat.nickname}}">
 <view class="right">
  <view class="content">
   {{チャットコンテンツ}}
  </ビュー>
 </ビュー>
 <view class="left">
  <image class="avatar" src="{{chat.avatar}}"></image>
 </ビュー>
</ビュー>

<view class="chat" wx:else>
 <view class="left">
  <image class="avatar" src="{{chat.avatar}}"></image>
 </ビュー>
 <view class="right">
  <view class="nickname">{{chat.nickname}}</view>
  <view class="content">
      {{チャットコンテンツ}}
  </ビュー>
 </ビュー>
</ビュー>

</ブロック>


<view class="form">
 <view class="weui-cell weui-cell_input">
  <input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="チャットの内容を入力してください" />
 </ビュー>
 <button type="primary" bindtap="sendMsg">送信</button>
</ビュー>

/* ページ/チャット/チャット.wxss */
.アバター{
  幅: 130rpx;
  高さ: 130rpx;
  境界線の半径: 50%;
}


。チャット{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  上マージン: 15px;
}
。自己{
  コンテンツの端揃え: flex-end;
  上マージン: 15px;
}

。左{
  パディング: 20rpx;
  align-self:flex-start;
}
.self .left{
  パディング上部: 0;
}

。右{
  左マージン: 10px;
}
.right .content{
  背景色: #eee;
  色: #123;
  フォントサイズ: 16px;
  /* 境界線:1px 実線 #ddd; */
  パディング: 10px;
  行の高さ: 26px;
  右マージン: 10px;
  境界線の半径: 3px;
  位置: 相対的;
  最小高さ: 20px;
}
.right .content::before{
  コンテンツ： ' ';
  表示: ブロック;
  幅: 0;
  高さ: 0;
  境界線: 12px 透明の実線;
  右境界線の色:#eee;
  位置: 絶対;
  上: 10px;
  左: -23px;
}
.self .right .content::before{
  境界線: 0;
}
.self .right .content::after{
  コンテンツ： ' ';
  表示: ブロック;
  幅: 0;
  高さ: 0;
  境界線: 12px 透明実線;
  左境界線の色:#1ad409;
  位置: 絶対;
  上: 10px;
  右: -23px;

}
.self .right .content{
  背景色: #1ad409;
}

。形状{
  位置: 固定;
  下部: 0;
  背景色: #eee;
  幅: 750rpx;
  ディスプレイ: フレックス;
  高さ: 39px;
  アイテムの位置を中央揃えにします。
}
.フォーム入力{
  幅: 600rpx;
  背景色: #fff;
  高さ: 36px;
  行の高さ: 36px;
  パディング: 0 5px;
}
ボタン{
  幅:65rpx;
  高さ:36px;
}