融云小程序IMSDK发送图文消息
多读多写多记录，多学多练多思考。----------- Banana • Banuit Gang(BUG香柚帮)
前边已经说了利用融云小程序的demo发起单聊，这次说说怎么实现在聊天的时候发送图文消息。其实这个和它demo里边的发送音乐是类似的，只需要在聊天框里添加一个发送图文消息的点击按钮，然后添加一个发送图文消息的方法就行了。
上一篇地址：https://blog.****.net/likun_li/article/details/89331080
1.首先添加一下发送图文的按钮和图文组件，直接复制发送音乐的就行。
chat.wxml
//部分代码
<view class='rong-editor-modules'>
<view class='rong-editor-module rong-editor-module-image' bindtap='sendImage'></view>
</view>
<!-- <view class='rong-editor-modules'>
<view class='rong-editor-module rong-editor-module-music' bindtap='sendMusic'></view>
</view> -->
//新增的发送图文按钮，可以自己修改样式，绑定sendImgtxt
<view class='rong-editor-modules'>
<view class='rong-editor-module rong-editor-module-imgtxt' bindtap='sendImgtxt'></view>
</view>components/message/下添加图文组件imgtxt.*，直接复制music.*
imgtxt.wxml
//绑定skip,skip中写了你图文消息要跳转的地址
<view class='rong-music' bindtap='skip'>
<view class='rong-music-player' style='background-image:url("{{message.content.imageUri}}")'></view>
<view class='rong-music-basic'>
<view class='rong-music-basic-name'>{{message.content.title}}</view>
<view class='rong-music-basic-author'>{{message.content.content}}</view>
</view>
</view>imgtxt.js
/**
* 组件的方法列表
*/
methods: {
skip: function(){
var url = this.properties.message.content.url;
console.log(url);
this.triggerEvent('onskip', url);
wx.navigateTo({
url: url,
})
}
}2,在components文件夹下的message.*中添加imgtxt组件
message.json
{
"component": true,
"usingComponents": {
"TextMessage": "./message/text",
"ImageMessage": "./message/image",
"VoiceMessage": "./message/voice",
"MusicMessage": "./message/music",
"RichContentMessage": "./message/imgtxt"//新增组件名字是RichContentMessage
}
}message.wxml
<view wx:else class='rong-message-content rong-message-content-{{message.direction}}'>
<TextMessage wx:if = '{{message.name == "TextMessage"}}' message='{{message}}'></TextMessage>
<VoiceMessage wx:if = '{{message.name == "VoiceMessage"}}' message='{{message}}' bindonplay='onPlayVoice'></VoiceMessage>
<MusicMessage wx:if = '{{message.name == "MusicMessage"}}' message='{{message}}' bindonplaymusic='onPlayMusic' bindonstopmusic='onMusicStop'></MusicMessage>
//新增的图文消息组件，绑定了onSkip
<RichContentMessage wx:if = '{{message.name == "RichContentMessage"}}' message='{{message}}' bindonskip ='onSkip'></RichContentMessage>
</view>message.js
// pages/conversation/components/message.js
Component({
options: {
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
message: Object
},
relations: {
'./message/image': {
type: 'child'
},
'./message/text': {
type: 'child'
},
'./message/voice': {
type: 'child'
},
'./message/imgtxt': {//新增图文
type: 'child'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onPlayVoice: function (event) {
this.triggerEvent('onplay', event.detail)
},
onPlayMusic: function(event){
this.triggerEvent('onplaymusic', event.detail)
},
onMusicStop: function (event){
this.triggerEvent('onmusicstop', event.detail)
},
onPreviewImage: function(event){
let {detail} = event;
this.triggerEvent('onpreviewimage', detail);
},
onSkip: function (event) {//新增
let { detail } = event;
this.triggerEvent('onskip', detail);
}
}
})组件配置好了，接下来就是写发送图文消息的方法了，首先去services.js里边添加图文相关的方法，直接复制音乐的就行
services.js
//services.js 中需要修改添加的内容
//发送消息
let sendMessage = (type, targetId, message) => {
let bindUser = (_msg, next) => {
bindSender(_msg);
next(_msg);
};
return new Promise((resolve, reject) => {
let { name, avatar } = currentUser;
let user = {
name,
avatar
};
let messageMap = {
text: () => {
let {content} = message;
return new RongIMLib.TextMessage({ content, user });
},
image: () => {
let { content, imageUri, extra } = message;
return new RongIMLib.ImageMessage({ content, imageUri, user, extra });
},
voice: () => {
let { content, duration } = message;
return new RongIMLib.VoiceMessage({ content, duration, user });
},
music: () => {
let {name, url, author, poster} = message;
return new RongIMClient.RegisterMessage.MusicMessage({ name, url, author, poster, user});
},
//图文消息构造方法，RongIMLib.RichContent({标题，内容，图片，跳转url}),注意RongIMLib别写成了RongIMClient否则会报错说not a constructor
imgtxt: () => {
let { title, content, imageUri, url } = message;
return new RongIMLib.RichContentMessage({ title, content, imageUri, url, user,});
}
};
let msg = messageMap[message.type]();
imInstance.sendMessage(+type, targetId, msg, {
onSuccess: result => {
console.warn('service promise sendmessage success: ', msg);//服务承诺发送消息成功
bindUser(result, resolve);
},
onError: (error, result) => {
console.warn('service promise sendmessage error: ', error);
//bindUser(message, reject);
}
});
});
};
//获取图文消息参数，这里我写在了mock.js假数据中，取最后一项
let getImgtxt = () => {
let len = ImgtxtList.length;
let index = len-1;
return ImgtxtList[index];
};
//发送图文消息
Message.sendImgtxt = (params) => {
let { type, targetId } = params;
let content = utils.extend({ type: 'imgtxt' }, getImgtxt());
return sendMessage(type, targetId, content);
};
let bindUserInfo = (list) => {
let unknowUser = {
name: '火星人',
avatar: 'https://rongcloud-image.cn.ronghub.com/FjGxbmdZ7wyIqMHvaa3SqOgSZGk_?e=2147483647&token=CddrKW5AbOMQaDRwc3ReDNvo3-sL_SO1fSUBKV3H:OCCilgLZtkK8G9AmayjUzP9J66w='
};
let unknowGroup = {
name: '火星群组',
avatar: 'https://rongcloud-image.cn.ronghub.com/FjGxbmdZ7wyIqMHvaa3SqOgSZGk_?e=2147483647&token=CddrKW5AbOMQaDRwc3ReDNvo3-sL_SO1fSUBKV3H:OCCilgLZtkK8G9AmayjUzP9J66w='
};
if (!utils.isArray(list)){
list = [list];
}
let infoMap = {
1: (conversation) => {
conversation.target = utils.find(UserList, (user) => {
return user.id == conversation.targetId
}) || unknowUser;
},
2: (conversation) => {
conversation.target = unknowUser;
},
3: (conversation) => {
conversation.target = utils.find(GroupList, (group) => {
return group.id == conversation.targetId
}) || unknowGroup;
},
10: (conversation) => {
conversation.target = unknowUser;
}
};
let formatMsg = (msg) => {
let {messageType} = msg;
let content = '[此消息类型未解析]';
if (messageType == 'TextMessage'){
content = msg.content.content;
}
if (messageType == 'VoiceMessage') {
content = '[语音]';
}
if (messageType == 'ImageMessage') {
content = '[图片]';
}
if (messageType == 'FileMessage') {
content = '[文件]';
}
if (messageType == 'MusicMessage') {
content = '[音乐]';
}
//添加会话列表显示内容
if (messageType == 'RichContentMessage') {
content = '[图文]';
}
return content;
};
utils.map(list, (conversation) => {
let {sentTime} = conversation;
conversation._sentTime = utils.getTime(sentTime);
conversation.unReadCount = conversation.unreadMessageCount;
let { latestMessage } = conversation;
conversation.content = formatMsg(latestMessage);
let _type = conversation.conversationType;
_type = _type > 3 ? 10 : _type;
infoMap[_type](conversation);
});
};mock.js
ImgtxtList: [{
title: "确认函",
content: "点击查看",
imageUri: "http://xxxxx/1.png",
url: "../pay/pay"
}],接下来就是写图文按钮的逻辑
chat.js
//发送图文消息
const sendImgtxt = (context) => {
let { content, type, targetId, messageList } = context.data;
Message.sendImgtxt({
type,
targetId
}).then(message => {
messageList.push(message);
context.setData({
messageList,
toView: message.uId
});
});
};
Page({
data: {
content: '',
messageList: [],
bottom: 0,
adapterHeight: 0,
display: {
emoji: 'none',
more: 'none'
},
emojis: formatEmojis(),
isShowEmojiSent: false,
isRecording: false,
isShowKeyboard: false,
hasMore: true,
toView: '',
playingVoice: null,
playingMusicComponent: null,
isAllowScroll: true,
scrollTop: 0,
isAdmin:true
},
hideKeyboard: function () {
hideKeyboard(this);
},
selectEmoji: function (event) {
selectEmoji(this, event);
},
sendText: function () {
sendText(this);
},
getMoreMessages: function (event) {
getMoreMessages(this);
},
sendImage: function () {
sendImage(this);
},
sendImgtxt: function () {//点击图文按钮之后，找到此方法
sendImgtxt(this);
},
sendMusic: function () {
sendMusic(this);
},
showVoice: function(){
showVoice(this);
},
showKeyboard: function(){
showKeyboard(this);
},
startRecording: function(){
startRecording(this);
},
stopRecording: function(){
stopRecording(this);
},
showEmojis: function(){
showEmojis(this);
},
showMore: function(){
showMore(this);
},
// 以下是事件
onLoad: function (query) {
},
onUnload: function () {
onUnload(this);
},
onInput: function(event){
this.setData({
content: event.detail.value
});
},
onFocus: function(event){
let { height} = event.detail;
let adapterHeight = 0;
setKeyboardPos(this, height, adapterHeight);
hideSoftKeyboard(this);
},
onPlayVoice: function(event){
playVoice(this, event);
},
onPlayMusic: function (event){
playMusic(this, event);
},
onMusicStop: function(event){
stopMusic(this, event);
},
onPreviewImage: function(event){
previewImage(this, event);
},
onHide: function(){
hideKeyboard(this);
stopPlayMusic(this);
}
})修改成功之后的样子就是这样了