美文网首页
小程序聊天表情包文字混排处理

小程序聊天表情包文字混排处理

作者: 在下高姓 | 来源:发表于2020-07-14 10:23 被阅读0次
1.使用rich-text解析富文本
 <rich-text nodes="{{item.msg}}"></rich-text>
2.数据处理
messageA(){//聊天数据
    let that=this;
    let data={
      room_id:this.data.roomid//房间id
    }
    app.GR('GET','api/chat/get_room_chat',data,function(res){
      let alldata=[];
      let times=[];
      let http=app.globalData.http;
      let reg=/\[(.+?)\]/g;//正则匹配表情包[]
      let dataA=res.data.data;
      let matcha=[];
      let bb=[];//存放聊天记录表情遍历的对应id
      let reg1;
      for(let i=0;i<res.data.data.length;i++){//整体遍历数据
        alldata[i]=JSON.parse(dataA[i]);
        times[i]=that.timestampToTime(alldata[i].sendtime);//时间戳转换
        matcha[i]=alldata[i].msg.match(reg);//匹配到的每条数据的表情--数组
        reg1=JSON.parse(dataA[i]).msg.match(reg);//匹配规则
          if(matcha[i]!=null){//判断有表情的聊天记录数组
              for(let p=0;p<matcha[i].length;p++){//遍历每条数据表情个数
                for(let o=0;o<that.data.array.length;o++){//遍历所有表情的数组
                if(matcha[i][p]==that.data.array[o]){//对应匹配相应的表情
                  bb[i]=[];//数组字串定义成数组
                  bb[i][p]=[o]//存放下标--相当于表情的id
                  matcha[i][p]=`<img style="width:4vw;height: 4vw;vertical-align: middle;" src="${http}uploads/face/${bb[i][p]}.gif" />`;//每条数据表情包对应的图片资源
                }
                alldata[i].msg= alldata[i].msg.replace(reg1[p],matcha[i][p]);//整体赋值
              }
            }
          }
      }
      that.setData({
          alldata:alldata,
          times:times,
          toView: "msg-" + (alldata.length - 1)
      })
     
    }) 
  },

相关文章

网友评论

      本文标题:小程序聊天表情包文字混排处理

      本文链接:https://www.haomeiwen.com/subject/ybgjqktx.html