前端，小程序通过view显示带 emoji 的复合文本

首先每个emoji 表情有保存到服务器，可以通过 URL 访问，如

http://....../em001

1.将带 emoji 标签复合文本字符串（如：你好，em001），分割成纯文本和 emoji 标签文本，并装进数组。方法如下

/**

  根据说说内容，将文本、表情切分为数组

  @param {string} content 说说源内容

*/

function messageContentArray  (content) {

  const reg = /\[em[2-4]+\d{3}\]/g

  const emRegArr = content.match(reg)

  // 没有表情，直接返回文本内容

  if (!emRegArr) return [{type: 'text', content}]

  const indexArr = []

  const contentArr = []

  // 递增取得所有表情index

  let pos = content.indexOf(emRegArr[0])

  for (let i = 1i <emRegArr.lengthi++) {

    indexArr.push(pos)

    pos = content.indexOf(emRegArr[i], pos + 1)

  }

  indexArr.push(pos)

  indexArr.map((emIndex, i) =>{

    // 首个为表情

    if (emIndex === 0) {

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    } else {

      if (i === 0) {

        // TODO：临时的处理方式，待观察内存占用情况

        for (let index = 0index <emIndexindex++) {

          contentArr.push({type: 'text', content: content[index]})

        }

        // contentArr.push({type: 'text', content: content.substr(0, emIndex)})

      } else {

        // 两个表情之间夹杂了文本

        const preEmoLocation = indexArr[i - 1] + emRegArr[i - 1].length

        const locationDiff = emIndex - preEmoLocation

        if (locationDiff >0) {

          for (let index = preEmoLocationindex <locationDiffindex++) {

            contentArr.push({type: 'text', content: content[index]})

          }

          // contentArr.push({type: 'text', content: content.substr(preEmoLocation, locationDiff)})

        }

      }

      contentArr.push({type: 'emotion', source: emRegArr[i]})

    }

  })

  const lastLocation = indexArr[indexArr.length - 1] + emRegArr[emRegArr.length - 1].length

  if (content.length >lastLocation) {

    // contentArr.push({type: 'text', content: content.substr(lastLocation, content.length - lastLocation)})

    for (let index = lastLocationindex <content.lengthindex++) {

      contentArr.push({type: 'text', content: content[index]})

    }

  }

  return contentArr

}

2.然后在 view 标签，遍历数组

    <View className="talk-content">

            {contentArr.map((Citem, index) =>{

              if (Citem.type === 'emotion') {

              const str = Citem.source.substr(1, Citem.source.length-2)

              return <Image key={`Emotion_${index}`} className="emoji" src={'http://'+str+'.jpg'} />

              }

              const isEnter = Citem.content === '\n'

              if (isEnter) {

              // hack Text 显示单个 \n 时，会有样式问题

              return <View key={`Text_${index}`}  />

              }

              return <Text key={`Text_${index}`} className="txt" >{Citem.content}</Text>

          })}

        </View>

之前我也遇到这样的问题，具体原因是因为emoji表情大小为四个字节，但一般的utf8编码下的mysql只能存储2到3个字节，具体的解决办法是把要存储的emoji表情的那个字段类型改为longtext，要是不行把utf8编码改为utf8mb4

我当时好像就是这么解决的，你试试

---