融云小程序IMSDK发送图文消息

---

多读多写多记录，多学多练多思考。----------- Banana • Banuit Gang(BUG香柚帮)

---

前边已经说了利用融云小程序的demo发起单聊，这次说说怎么实现在聊天的时候发送图文消息。其实这个和它demo里边的发送音乐是类似的，只需要在聊天框里添加一个发送图文消息的点击按钮，然后添加一个发送图文消息的方法就行了。

上一篇地址：https://blog.csdn.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);
  }
})

修改成功之后的样子就是这样了