程序里的积分算法怎么实现_在微信小程序里实现聊天室

第一次搞小程序，老板让我实现一个聊天室功能，压力山大啊。

花了几天时间研究比较了一下方案，最后基于环信的小程序SDK 开发了一个聊天室。

准备工作

1. 下载环信小程序demo+sdk

git clone https://github.com/easemob/webim-weixin-xcx

2. 创建一个文件夹，将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件，文件目录说明：

comps 自定义组件目录

|-chat 聊天页面

|-swipedelete 测滑删除

|-toast toast

images demo中用到的图片 还有表情

pages 功能页面

|-login 登录页 （直接拷贝的demo中的login文件）

|-roomlist 聊天室列表 （将demo中的group文件拷贝过来后，自己更改的）

|-chatroom 聊天室会话页面

sdk 环信sdk

utils 工具类和sdk的一些配置

app.js 小程序根实例，存放一些全局变量，注册监听事件

app.json 注册页面以及全局的一些配置

app.wxss 一些全局样式

project.config.json工程的一些配置，和开发者工具 “详情” 中的设置一样

集成

1. 登录环信没什么可说的，这里选择的是使用username/password登录，和demo中的一样，文件没有进行任何更改

2. 在app.js 中注册的WebIM.conn.listen, 然后在 登陆成功的回调onOpened设置的跳转页面，并将登陆的username赋给myName，传到新的页面中使用

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

3. 修改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() 替换掉

4. 然后在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>

5. demo中的group.js 中，获取到的是当前登陆账号已加入的群组，咱们做的是聊天室功能，所以需要有一个加入的操作，找roomlist.js 中找到 into_room: function (event)，然后填写加入聊天室的方法， 我是直接在当前这个里面加的跳转到聊天页面，并将当前登陆的IDmyName，聊天室IDgroupID，聊天室名称your 传给新页面

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

Ex：监听是否加入聊天室成功的回调是在 onPresence 中，type:memberJoinChatRoomSuccess，正常是监听这个回调跳转页面，有点麻烦就直接这样吧

6. 到会话页面后，需要修改一下对应的消息格式，在comps/chat/suit 目录下，将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改，聊天室消息和群组消息不同，所以我目前是直接将getSendToParam()、isGroupChat() 注释，改成下面这样，demo 中下面还有代码的，这里就用 …… 代替了

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

就这样了，简单集成聊天室功能，demo中的UI 是开源的，可以根据自己的需求更改~

下面是具体实现过程。代码也放在github 上了，有需要的兄弟自取。
demo下载地址：https://github.com/lizgDonkey/room-xcx