アプレットでのマイクロチャンネル内のチャットルーム

まず小さなプログラムに従事する、上司は私がチャットルーム機能、圧力アレクサンダーああを実感しました。
これは、リングのアプレットSDKの最後の文字に基づいてプログラムは、チャットルームを開発しました比較研究する数日の時間を要しました。

準備

中央手紙ダウンロードアプレットのデモ+ SDK
git clone https://github.com/easemob/webim-weixin-xcx
ファイルカンプデモにフォルダを作成し、画像、SDK、新しいファイル、ディレクトリの説明にコピーutilsの：
- | -カスタムコンポーネントディレクトリをカンプ
  | -チャットチャットページ
  | -swipedelete測定スリップが削除
  | -toastトースト
- |そこ式で使用-imagesデモ画像
- |機能ページは-pages
  -loginログインページ（デモでは、ファイルを直接コピーログイン）|
  -roomlistチャットルームリスト（自分自身を変更し、コピーしたデモファイルの後にグループ）|
  | -chatroomチャットルームの会話ページ
- | -SdkリングレターSDK
- | -Utils SDKツールと、いくつかの設定
- |ルートインスタンスは、アプレット、保存されたいくつかのグローバル変数を-app.js、イベントをリッスンするように登録
- | -App.json登録ページだけでなく、グローバルコンフィギュレーションの一部
- | -App.wxssいくつかのグローバルスタイル
- |同じのいくつかの設定-project.config.jsonプロジェクト、および開発者向けツール「詳細」を設定します

統合されました

ログインリングの手紙何も言うことはありません、この選択は使用することがあるusername/password同じ文書にログインし、デモを任意の変更を加えていません
中app.jsに登録WebIM.conn.listenして、コールバックで正常に上陸onOpenedジャンプページのセット、および着陸がusername割り当てられmyName、使用中の新しいページに到達しました
```
wx.navigateTo({
      url: '../roomlist/roomlist?myName=' + WebIM.conn.context.userId,
});
```

修正roomlist.jsチャットルームのリストを取得し、ページングが最初の怠惰は、最初のページに20のチャットルームを取得する場合には、得られます

listChatrooms() {
   	var me = this;
   	var option = {
 		apiUrl: 'https://a1.easemob.com',
 		pagenum: 1,                                 // 页数
 		pagesize: 20,                               // 每页个数
 		success: function (rooms) {
   		me.setData({
     		groupList: rooms.data.data
   		});
   	getApp().globalData.groupList = rooms || [];
 		},
 		error: function () {
   	console.log('List chat room error');
 		}
   	};
   	WebIM.conn.getChatRooms(option);
   },

その後listChatrooms()、それぞれonLoad、onShow次の変更以内に、オリジナルはlistGroups()置き換え

その後、roomlist.wxml変数は、対応するバンドル名を変更します

<view class="contain">
	<view wx:for="{{ groupList }}" class="groupList" wx:key="">
		<view class="nbr_header"></view>
		<view class="info" bindtap="into_info">
			<image src="../../images/number.png"  data-username="{{ item.name }}"></image>
		</view>
		<view class="nbr_body" data-username="{{ item.name }}" data-roomid="{{ item.id }}" bindtap="into_room">
			<text data-username="{{ item.name }}">{{ item.name }}</text>
		</view>
		<view class="edit" bind:tap="edit_group" data-username="{{ item.name }}" data-roomid="{{ item.id }}">
			<image src="../../images/cell_groups.png"  data-username="{{ item.name }}"></image>
		</view>
	</view>
</view>

デモgroup.js、現在のログインIDになりますが、グループに参加している、我々はやるチャット機能であるため、結合操作の必要性は、探してroomlist.js見つけることがinto_room: function (event)、その後、チャットルームを追加する方法を記入し、私が直接ました内部の現在のプラスのチャットページや現在の着陸IDにジャンプmyNameチャットルームのID、groupIDチャットルーム名yourに新しいページに渡さ
例：でチャットルームのモニターのコールバックに参加するかどうかが成功するとonPresence、type:memberJoinChatRoomSuccess通常のコールバックがジャンプを聞いていますページ、トラブルのビットをオンにするので、それを直接すること
```
into_room: function (event) {
	var nameList = {
  		myName: this.data.myName,
  		your: event.currentTarget.dataset.username,
  		groupId: event.currentTarget.dataset.roomid
	};
	WebIM.conn.joinChatRoom({
  		roomId: nameList.groupId, // 聊天室id
	});
	wx.navigateTo({
  		url: '../chatroom/chatroom?username=' + JSON.stringify(nameList)
	});
}	
```
セッションページの後、あなたはに、対応するメッセージの形式を変更する必要があるcomps/chat/suitディレクトリ、文書に対応するJSファイル内のファイルには、チャットルームにメッセージを送信する形式、異なるチャットルームやニュースグループメッセージを変更するので、私は直接、現在午前うgetSendToParam()、isGroupChat()注釈、これに次のように、ここで使用される以下のデモコードがある……の代わりには、
```
sendMessage(){
	if(!this.data.userMessage.trim()){
		return;
	}
	let id = WebIM.conn.getUniqueId();
	let msg = new WebIM.message(msgType.TEXT, id);
	msg.set({
		msg: this.data.userMessage,
		from: this.data.username.myName,
    	to: this.data.username.groupId,
		roomType: true,
		chatType: this.data.chatType,
		success(id, serverMsgId){
		}
	});
  	msg.setGroup("groupchat");
	WebIM.conn.send(msg.body);
	……
}
```

このように、簡単に統合チャットルーム機能は、UIのデモは、あなたが自分のニーズに応じて変更することができ、オープンソースです -

以下は、特定の実装プロセスです。コードはgithubの上に置かれ、そして兄弟の自己作成を必要としています。
ダウンロードデモ：https://github.com/lizgDonkey/room-xcx

アプレットでのマイクロチャンネル内のチャットルーム

準備

統合されました

おすすめ