この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos に PHP7.4 と Nginx をインストールする方法
>>: Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する
序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...
序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...
背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...
目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...
数日前、Web ページのモジュールを調整していたとき、ページのフォント サイズを 13px に設定し...
目次序文1. es6の前にオブジェクトを作成する2. es6 後のクラス宣言3. クラスの継承4. ...
目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...
なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...
競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...
1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...
この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...
序文モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特にVueルーティングを...
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
背景レプリケーションはデータの完全なコピーです。レプリケーションが必要な理由として、まず思い浮かぶの...
目次1. はじめに2. setIntervalとsetTimeoutの違い3.タイムアウトを設定する...