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
- Central letter download applet demo + sdk
git clone https://github.com/easemob/webim-weixin-xcx
- 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
- | - comps custom component directory
integrated
- Login ring letter have nothing to say, this choice is to use a
username/password
login and demo in the same document does not make any changes - Registered in app.js in
WebIM.conn.listen
, and then landed successfully in the callbackonOpened
set of jump page, and landingusername
assignedmyName
, reached a new page in usewx.navigateTo({ url: '../roomlist/roomlist?myName=' + WebIM.conn.context.userId, });
- Modify
roomlist.js
obtain a list of chat rooms, paging is obtained, where the first lazy, get a first page 20 chat roomslistChatrooms() { 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
, onShow
within the next change, the original listGroups()
replaced
- Then
roomlist.wxml
variables 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>
- 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, lookingroomlist.js
to findinto_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 IDmyName
, chat room IDgroupID
, chat room nameyour
passed to the new page
Ex: whether to join the chat room monitor callback is successful inonPresence
, thetype:memberJoinChatRoomSuccess
normal callback is listening jump turn the page, a bit of trouble, so be it directlyinto_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) }); }
- After the session page, you need to modify the corresponding message format, in
comps/chat/suit
the 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 willgetSendToParam()
,isGroupChat()
annotation, the following into this, there are the following Demo code, used here……
in place ofsendMessage(){ 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