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

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

この記事では、WeChatアプレットの具体的なコードを共有し、簡単なチャットルームを実装します。具体的な内容は次のとおりです。

チャ.js

// ページ/チャット/チャット.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: 関数 () {

  }
})

チャット.wxml

<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>
</ビュー>

チャット.css

/* ページ/チャット/チャット.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;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがチャットルーム機能を実現
  • WeChatアプレットがチャットルームを実装
  • WeChatアプレット開発チャットルームの詳細な説明 - リアルタイムチャット、画像プレビューのサポート
  • WeChatアプレットWebSocketチャットルームを実装するためのサンプルコード
  • WeChatアプレットチャットルームの簡単な実装

<<:  Centos に PHP7.4 と Nginx をインストールする方法

>>:  Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

推薦する

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシン クラスタの構築)

目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...

IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォント ソリューションを表示します。

数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...

js 学習ノート: class、super、extends キーワード

目次序文1. es6の前にオブジェクトを作成する2. es6 後のクラス宣言3. クラスの継承4. ...

Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

ポップアップ効果を実現するにはjsを使用します

この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...

モバイル端末のジャンプ問題を解決する(CSS遷移、ターゲット疑似クラス)

序文モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特にVueルーティングを...

Linux viコマンドの知識ポイントと使い方のまとめ

Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...

MySQL レプリケーション メカニズムの原理の説明

背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...

JavaScript の setTimeout() の使用法の概要

目次1. はじめに2. setIntervalとsetTimeoutの違い3.タイムアウトを設定する...