この記事では、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 への接続に関する問題が発生する
方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...
序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...
インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...
マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...
mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...
CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...
目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...
目次MySQL の基本的な共通コマンド1. SQL文2. テーブルを作成する3. フィールドのプロパ...
Web 開発では、次のような文字によく遭遇します: これは実際には HTML が...
<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...
前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...
従来の解決策FileReader を使用して UTF-8 形式のファイルを読み取り、ファイルの内容に...
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...
接続は、実際の外部キー(人工的に作成された 2 つのテーブル間の対応関係を指します。対照的に、FOR...
面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...