小程序使用环信
小程序使用环信
寒霜
1、小程序内引入环信文件
2、完善环信配置
3、环信登录
4、加载历史消息
5、发送消息
6、接收消息
需要注意的是：发送消息的时候，需要在本地的消息列表内手动添加信息
// 添加消息到消息列表，并自动滚动到该条消息
updateMessage(obj) {
let that = this
let chatRecordList = that.data.chatRecordList
chatRecordList.push(obj)
chatRecordList[chatRecordList.length - 1].idd = 'id' + chatRecordList[chatRecordList.length - 1].id
that.setData({
chatRecordList: chatRecordList,
toVview: 'id' + chatRecordList[chatRecordList.length - 1].id
})
}7、部分代码
<wxs src="../../utils/indexOf.wxs" module="str" />
<view style="padding-top: {{top}}px;height: {{top}}px;background: #fff;">
<view
class="top"
style="height: {{top1}}px;position: fixed;left: 0;width: 100vw;top: {{top}}px;z-index: 100;"
>
<view
class="topImageContaienr"
style="padding-left: 20rpx;box-sizing: border-box;height: 100%;position: relative;background: #fff;"
>
<view
style="width: 60rpx;height: 60rpx;position: absolute;left: 0%;top: 50%;transform: translate(40rpx,-50%);text-align: center;line-height: 72rpx;"
>
<image
src="/static/img/back2.png"
bindtap="backToIndex"
style="width: 20rpx;height: 28rpx;"
></image>
</view>
<!-- 由于该页使用了自定义导航，所以导航栏可以显示环信联系人昵称 -->
<view
style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"
>{{userInfo.userInfo.nickName}}</view
>
</view>
</view>
</view>
<view id="container">
<view>
<view>
<view> </view>
</view>
</view>
<scroll-view
class="chatViewContainer"
scroll-y="true"
scroll-into-view="{{toVview}}"
>
<!-- 环信历史消息 -->
<view
wx:for="{{chatRecordList}}"
wx:for-item="item"
wx:for-index="index"
wx:key="item"
class="itemitemitem"
id="{{item.idd}}"
>
<view wx:if="{{myemchatId==item.to}}" class="left">
<view>
<image
src="{{userInfo.userInfo.userIcon}}"
style="width: 80rpx;height: 80rpx;border-radius: 50%;"
></image>
<view class="text" wx:if="{{item.data}}">
<view
wx:if="{{item.data}}"
wx:for="{{item.data}}"
wx:for-item="item_"
wx:key="item_"
wx:for-index="index_"
class="cccc"
>
<text wx:if="{{str.indexOf11(item_,'./faces/ee_')?false:true}}"
>{{item_}}</text
>
<image src="{{item_}}" wx:else class="emoemoemo"></image>
</view>
</view>
<view class="imageEmchat" wx:if="{{item.url}}">
<image
src="{{item.url}}"
style="width: 400rpx;height: 400rpx;"
></image>
</view>
</view>
</view>
<view wx:else class="right">
<view>
<image
src="{{myAvatar}}"
style="width: 80rpx;height: 80rpx;border-radius: 50%;"
></image>
<view class="text">{{item.msg||item.data}}</view>
</view>
</view>
</view>
</scroll-view>
<!-- 发送消息 -->
<view class="inputContainer">
<input
type="text"
placeholder="请输入聊天内容"
bindconfirm="PrivateClick"
value="{{inputValue}}"
bindinput="getInputValue"
/>
<view bindtap="PrivateClick" class="sendView">发送</view>
</view>
</view>const app = getApp();
const WebIM = require("../../utils/WebIM/WebIM").WebIM;
Page({
data: {
userInfo: {},
chatRecordList: [],
myemchatId: "",
toVview: "",
myAvatar: app.globalData.userAvatarUrl,
navigationBar: "",
top: "",
top1: "",
inputValue: "",
},
// 发送消息，需要注意消息的组合格式
PrivateClick() {
let that = this;
let value = that.data.inputValue;
if (value == "") {
wx.showToast({
title: "请输入内容",
icon: "none",
});
return false;
} else {
let userInfo = that.data.userInfo;
let a = {
nickName: app.globalData.userInfoAll.userInfo.nickName,
userIcon: app.globalData.userInfoAll.userInfo.userIcon,
userId: app.globalData.userInfoAll.userInfo.userId,
emId: app.globalData.userInfoAll.emchat.emId,
};
let id = WebIM.conn.getUniqueId();
let msg = new WebIM.message("txt", id);
let set_options = {
msg: value,
data: value,
to: that.data.userInfo.emId,
chatType: "singleChat",
ext: {
userExt: JSON.stringify(a),
},
success: function () {},
};
msg.set(set_options);
WebIM.conn.send(msg.body);
msg.body.ext.userExt = JSON.parse(msg.body.ext.userExt);
that.updateMessage(msg.body);
that.setData({
inputValue: "",
});
}
},
// 输入框输入的时候，将值赋给inputValue
getInputValue(e) {
let that = this;
that.setData({
inputValue: e.detail.value,
});
},
// 更新消息，有最新消息时自动定位到最新消息
updateMessage(obj) {
let that = this;
let chatRecordList = that.data.chatRecordList;
chatRecordList.push(obj);
chatRecordList[chatRecordList.length - 1].idd =
"id" + chatRecordList[chatRecordList.length - 1].id;
that.setData({
chatRecordList: chatRecordList,
toVview: "id" + chatRecordList[chatRecordList.length - 1].id,
});
},
onLoad(options) {
let that = this;
that.setData({
userInfo: JSON.parse(options.userInfo),
myemchatId: app.globalData.emchat.emId,
});
wx.getSystemInfo({
success: (res) => {
that.system = res;
},
});
that.menu = wx.getMenuButtonBoundingClientRect();
that.systemBar = that.system.statusBarHeight;
that.navigationBar =
(that.menu.top - that.system.statusBarHeight) * 2 + that.menu.height;
const top = that.systemBar;
const top1 = that.navigationBar;
that.setData({
top: top,
top1: top1,
});
// 获取环信历史消息，需要注意的是历史记录保存时间和数量是和环信套餐有关的
WebIM.conn.mr_cache = [];
WebIM.conn.fetchHistoryMessages({
queue: that.data.userInfo.emId,
isGroup: false,
count: 20, //请求最近历史消息数
success: function (res) {
res.map((item) => {
if (typeof item.ext.userExt == "string") {
item.ext.userExt = JSON.parse(item.ext.userExt);
}
});
that.setData({
chatRecordList: res,
});
},
fail: function (err) {},
});
},
onReady() {},
onShow() {
let that = this;
// 消息监听
WebIM.conn.listen({
onOpened: function (res) {},
onClosed: function () {},
onTextMessage: function (message) {
let eObj = {
"[):]": "ee_1.png",
"[:D]": "ee_2.png",
"[;)]": "ee_3.png",
"[:-o]": "ee_4.png",
"[:p]": "ee_5.png",
"[(H)]": "ee_6.png",
"[:@]": "ee_7.png",
"[:s]": "ee_8.png",
"[:$]": "ee_9.png",
"[:(]": "ee_10.png",
"[:'(]": "ee_11.png",
"[<o)]": "ee_12.png",
"[(a)]": "ee_13.png",
"[8o|]": "ee_14.png",
"[8-|]": "ee_15.png",
"[+o(]": "ee_16.png",
"[|-)]": "ee_17.png",
"[:|]": "ee_18.png",
"[*-)]": "ee_19.png",
"[:-#]": "ee_20.png",
"[^o)]": "ee_21.png",
"[:-*]": "ee_22.png",
"[8-)]": "ee_23.png",
"[del]": "btn_del.png",
"[(|)]": "ee_24.png",
"[(u)]": "ee_25.png",
"[(S)]": "ee_26.png",
"[(*)]": "ee_27.png",
"[(#)]": "ee_28.png",
"[(R)]": "ee_29.png",
"[({)]": "ee_30.png",
"[(})]": "ee_31.png",
"[(k)]": "ee_32.png",
"[(F)]": "ee_33.png",
"[(W)]": "ee_34.png",
"[(D)]": "ee_35.png",
};
message.ext.userExt = JSON.parse(message.ext.userExt);
let emojs = message.data.replace(/\[(.+?)\]/g, function (arr) {
return (
"jfjjgajANFJJCMKNVBNNWXCM,,,,,;;oifejf" +
eObj[arr] +
"jfjjgajANFJJCMKNVBNNWXCM,,,,,;;oifejf"
);
});
emojs = emojs.split("jfjjgajANFJJCMKNVBNNWXCM,,,,,;;oifejf");
emojs = emojs.filter((item) => {
return item.length > 0;
});
let emojs_ = emojs.map((item) => {
if (item.indexOf(".png") > -1) {
return (item = "./faces/" + item);
} else {
return item;
}
});
message.data = emojs_;
that.updateMessage(message);
},
onEmojiMessage: function (message) {},
onPictureMessage: function (message) {
that.updateMessage(message);
},
onCmdMessage: function (message) {},
onAudioMessage: function (message) {},
onLocationMessage: function (message) {},
onFileMessage: function (message) {},
onCustomMessage: function (message) {},
onVideoMessage: function (message) {
var node = document.getElementById("privateVideo");
var option = {
url: message.url,
headers: {
Accept: "audio/mp4",
},
onFileDownloadComplete: function (response) {
var objectURL = WebIM.utils.parseDownloadResponse.call(
conn,
response
);
node.src = objectURL;
},
onFileDownloadError: function () {},
};
WebIM.utils.download.call(conn, option);
},
onPresence: function (message) {},
onRoster: function (message) {},
onInviteMessage: function (message) {},
onOnline: function () {},
onOffline: function () {},
onError: function (message) {},
onBlacklistUpdate: function (list) {},
onRecallMessage: function (message) {},
onReceivedMessage: function (message) {},
onDeliveredMessage: function (message) {},
onReadMessage: function (message) {},
onCreateGroup: function (message) {},
onMutedMessage: function (message) {},
onChannelMessage: function (message) {},
});
},
onHide() {},
onUnload() {
let that = this;
that.setData({
chatRecordList: [],
});
},
onPullDownRefresh() {},
onReachBottom() {},
onShareAppMessage() {},
});
