Chat rooms in a micro channel in the applet

First engage in small programs, the boss made me realize a chat room feature, the pressure Alexander ah.
It took a few days time to study compared the program, based on the last letter of the ring applet SDK has developed a chat room.

Ready to work

1. Central letter download applet demo + sdk
   git clone https://github.com/easemob/webim-weixin-xcx
2. Create a folder in the file comps demo, images, sdk, utils copied to the new files, directories description:
   • | - comps custom component directory
     | -chat chat page
     | -swipedelete measured slip delete
     | -toast toast
   • | -Images demo images used in the expression there
   • | -pages features page
     | -login login page (login direct copy of the file in the demo)
     (the group after the demo file copied, changed his own) -roomlist chat room list |
     | -chatroom chat room conversations page
   • | -Sdk ring letter sdk
   • | -Utils sdk tools and some configuration
   • | Root instance -app.js applets, stored some global variables, register to listen to events
   • | -App.json registration page as well as some of the global configuration
   • | -App.wxss some global style
   • | Setting some configuration -project.config.json project, and developer tools "details" of the same

integrated

3. Login ring letter have nothing to say, this choice is to use a username/passwordlogin and demo in the same document does not make any changes
4. Registered in app.js in WebIM.conn.listen, and then landed successfully in the callback onOpenedset of jump page, and landing usernameassigned myName, reached a new page in use

   wx.navigateTo({
         url: '../roomlist/roomlist?myName=' + WebIM.conn.context.userId,
   });
   

5. Modify roomlist.jsobtain a list of chat rooms, paging is obtained, where the first lazy, get a first page 20 chat rooms

   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);
      },
   

Then listChatrooms(), respectively onLoad, onShowwithin the next change, the original listGroups()replaced

6. Then roomlist.wxmlvariables modify the corresponding bundle name

   <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>
   

   
7. The demo group.js, gets to the current login ID has joined the group, we do is chat function, so the need for a join operation, looking roomlist.jsto find into_room: function (event), and then fill out the method of adding a chat room, I was directly in the current inside plus jump to the chat page and current landing ID myName, chat room ID groupID, chat room name yourpassed to the new page
   Ex: whether to join the chat room monitor callback is successful in onPresence, the type:memberJoinChatRoomSuccessnormal callback is listening jump turn the page, a bit of trouble, so be it directly

   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)
   	});
   }	
   

8. After the session page, you need to modify the corresponding message format, in comps/chat/suitthe directory, the file inside the js file corresponding to the document sends a message to the chat room to modify the format, different chat rooms and news groups messages, so I am currently directly will getSendToParam(), isGroupChat()annotation, the following into this, there are the following Demo code, used here ……in place of

   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);
   	……
   }
   

   

In this way, the simple integration chat room feature, demo of the UI is open source, you can change according to their needs -

The following is a specific implementation process. Code is also placed on github, and brothers in need of self-created.
Download demo: https://github.com/lizgDonkey/room-xcx