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 への接続に関する問題が発生する

推薦する

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...

Centos7 に Zabbix3.0 をインストールするための非常に詳細な手順

序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...

きちんとしたHTMLマークアップを使用してページを構築します

インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...

2つのNode.jsプロセスがどのように通信するかの詳細な説明

目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...

MySQLの基本的な共通コマンドの概要

目次MySQL の基本的な共通コマンド1. SQL文2. テーブルを作成する3. フィールドのプロパ...

HTML ではスペースはどのように表現されますか (どのような意味ですか)?

Web 開発では、次のような文字によく遭遇します: &nbsp;これは実際には HTML が...

デザイン理論:計画、リソース、コミュニケーションの問題について

<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...

Reactはルーティングを使用してログインインターフェースにリダイレクトします

前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...

js を使用してファイルが UTF-8 でエンコードされているかどうかを判断する方法

従来の解決策FileReader を使用して UTF-8 形式のファイルを読み取り、ファイルの内容に...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...

MySQL マルチテーブル結合入門チュートリアル

接続は、実際の外部キー(人工的に作成された 2 つのテーブル間の対応関係を指します。対照的に、FOR...

CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...