在wxc-rich-text以及wxc-special-rich
先上效果图:
image
wxc-rich-text和wxc-special-rich-text的实现思路
weex-ui中为我们提供了wxc-rich-text和wxc-special-rich-text两种富文本控件，其中，wxc-rich-text 只支持单行富文本显示,而wxc-special-rich-text只能支持最多两行特定种类的图文混排(标签+文本以及图标+文本)
首先我们来分析wxc-rich-text的源码来看看为什么这个控件不支持多行的样式
在wxc-rich-text.vue的代码中，我们找到这样一段css的样式,下图红色箭头所指处
image
这个样式中并没有指定flex-wrap属性，而在flex布局中，flex-wrap的默认属性就是nowrap不换行。
是不是就是这个原因导致`wxc-rich-text`不支持换行呢？
如果真是这样，那么weex-ui的开发者为什么不把flex-wrap属性设置为wrap而提供一个支持多行的`wxc-rich-text`控件呢？
带着这个疑问，我们手动在wxc-rich-text.vue中将flex-wrap属性加上，这段css样式改为:
.wxc-rich-text {
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
好了，我们尝试输入一个多行的文本来看看效果:
image
在上图中我们发现，虽然整个控件的内容虽然确实有两行了，但是并不是我们想要的效果，文字部分并没有紧接着前面一个文字或者图片的后面，我想这也是为什么weex-ui的开发者在wxc-rich-text控件中不将flex-wrap属性设置为wrap的原因了。
好了，分析完wxc-rich-text不支持多行的原因，我们再来看看为什么wxc-special-rich-text可以支持两行的富文本呢？
当然还是先看源码,在wxc-special-rich-text.vue中，有下面一段代码:
image
代码当中有两个text控件，且两个text控件分别读取了newList[0]和newList[1]中的数据,为什么要如此呢，我们来看下面的js代码，在vue的computed当中，我们找到了名为newList的计算属性，代码有点长，我分别截了两张图
image
image
如果你不想看上面的代码，可以直接看下面的结论：
这个newList中，就是将configLis中有的text文本内容切割成了两段文本分别放进两个text控件当中（依据前面已有的icon或者tag控件来计算第一行可以塞下的字符长度，其余字符就是第二行的文本内容）
好了，这下知道为什么wxc-special-rich-text.vue只能显示不超过两行的的富文本了吧，而且该富文本还必须要是icon+text或者tag+text的格式。
我的多行富文本实现思路
既然wxc-special-rich-text通过将文本内容切割成两段文本来实现两行富文本的功能，那我能否通过将文本切割成粒度更小的的内容来解决多行富文本呢，这个粒度又是多少才最合适呢，我想，作为程序员，粒度为1应该是很容易想出来的一个数字，我也是如此。在粒度为1的情况下是不会存在wxc-rich-text中出现的因为第一行排列不下而将自己移至第二行从而导致第一行末端出现大量空白的情况。
那我们就在这个思路下实现我们自己的多行富文本
首先第一步，在wxc-rich-text.vue当中设置flex-wrap为wrap值，如上面文章所示。
如果你是用npm包的方式引入的weex-ui，那你可能就需要将wxc-rich-text.vue的代码拷贝一份，重新起个别的名字的控件了，然后再将flex-wrap属性设置成wrap。
第二步，由于是需要将整段文本切割成一个一个小的text控件，所以，我们还需要将wxc-rich-text.vue当中的text组件的左间距和右间距设置为0,参见下图箭头处
image
第三步，将你的富文本内容切割成最小粒度的config，塞入wxc-rich-text的configList当中，我的实现如下:
addNormalMessage:function(msg_id,sender,sender_level,title,message){
console.log("normal message:",msg_id,sender,sender_level,title,message)
var configList = []
var config = this.addGrade(sender_level,title)
if (config != {}){
configList.push(config)
}
configList.push( {
type: 'text',
value: sender+":",
theme: 'blue'
})
var message_list = this.addMessage(message)
message_list.forEach(config => {
configList.push(config)
})
this.messages.push(configList)
this.messagesDict[msg_id] = this.messages.length - 1
this.scroolToEnd()
},
代码当中有三个部分的内容，addGrade是增加徽标的config，此处代码有点啰嗦，因为当时应该是直接复制拷贝的，可以通过设置value，color等等一些变量让代码精简很多。
addGrade(sender_level,title){
console.log("grade:",sender_level,title)
var config = {}
if (sender_level == 500){
config = {
type: 'tag',
value: '讲师',
style: {
fontSize: 30,
color: '#ffffff',
borderColor: '#2d9b3a',
backgroundColor: '#2d9b3a',
height: 40
}
}
}else if(sender_level == 900){
config = {
type:'tag',
value:'管理',
style: {
fontSize: 30,
color: '#ffffff',
borderColor: '#ec24dd',
backgroundColor: '#ec24dd',
height: 40
}
}
}else if(sender_level == 2000){
config = {
type:'tag',
value:'室主',
style:{
fontSize:30,
color: '#ffffff',
borderColor: '#e80c19',
backgroundColor: '#e80c19',
height: 40
}
}
}else{
if(title >= 0){
config = {
type:'icon',
src:"bmlocal://assets/grade/Grade_"+title+".png",
style: {
width: 90,
height: 40
}
}
}
}
return config
},
然后加上发送人的姓名，最后加上聊天的内容addMessage,在addMessage当中我实现了QQ表情的匹配已经文本内容的切割
addMessage(message){
var char_list = []
var chars = message.split('')
var startIndex = -1
chars.forEach((char,index,array) => {
if(char == '['){
startIndex = index
}else if(char == ']'){
if(startIndex != -1){
var emotionStr = array.slice(startIndex,index+1).join("")
if (emotionStr.indexOf("http") > -1){ //图文消息
var imageUrl = emotionStr.slice(1,index)
char_list.push(this.oneImageConfig(imageUrl))
}else{//表情文字
char_list.push(this.oneEmojConfig(emotionStr))
}
startIndex = -1
}else{
char_list.push(this.oneCharConfig(char))
}
}else{
if (startIndex == -1){
char_list.push(this.oneCharConfig(char))
}
}
});
return char_list
},
我们的业务当中，和大部分公司类似，我们的QQ表情是类似于[微笑][害羞]这种格式的。其中在查找表情的代码中，也许你们会疑问，为什么我不使用正则去匹配QQ表情，其实在我之前未重构之前的项目中（使用swift的作为开发语言），此处业务逻辑就是通过正则将QQ表情替换出来，但是在此处，由于要切割字符串为每个字符串返回一个配置，字符串的逐个遍历已经不可避免，如果在加上正则匹配，时间负责度反而会增加一倍，所以我直接在遍历循环中加入了查找QQ表情的代码，希望能减轻少许我这种投机取巧的方法实现多行富文本样式带来的性能损耗。
oneEmojConfig(emojName){
var localPath = emotion.emojLocalPath(emojName)
console.log("localpath:",localPath)
if( localPath != null){
return {
type:'icon',
src:localPath,
style:{
width:40,
height:40
}
}
}else{
return {
type:'text',
value:emojName,
theme:"yellow"
}
}
},
在设置QQ表情的config当中，我写了一个emotion.js的工具函数，用来返回QQ表情名字所对应的本地图片的路径
emotion.js
/**
* 表情转换工具类
* @authors Root (root@mylonly.com)
* @date 2018-03-30 08:48:19
* @version 1.0.0
*/
let emotionFunc = {
emotionArray : ["[微笑]","[撇嘴]","[色]","[发呆]","[得意]","[流泪]","[害羞]","[闭嘴]","[睡]","[大哭]","[尴尬]","[发怒]","[调皮]","[呲牙]","[惊讶]","[难过]","[酷]","[冷汗]","[抓狂]","[吐]","[偷笑]","[可爱]",
"[白眼]","[傲慢]","[饥饿]","[困]","[惊恐]","[流汗]","[憨笑]","[大兵]","[奋斗]","[咒骂]","[疑问]","[嘘]","[晕]","[折磨]","[衰]","[骷髅]","[敲打]","[再见]","[擦汗]","[抠鼻]","[鼓掌]","[糗大了]","[坏笑]","[左哼哼]","[右哼哼]","[哈欠]",
"[鄙视]","[委屈]","[快哭了]","[阴险]","[亲亲]","[吓]","[可怜]","[菜刀]","[西瓜]","[啤酒]","[篮球]","[乒乓]","[咖啡]","[饭]","[猪头]","[玫瑰]","[凋谢]","[示爱]","[爱心]","[心碎]","[蛋糕]","[闪电]","[炸弹]","[刀]","[握手]","[胜利]",
"[便便]","[NO]","[OK]","[抱拳]","[弱]","[强]"],
emojLocalPath:function(emoj_name){
var index = this.emotionArray.indexOf(emoj_name)
if (index > -1){
return "bmlocal://assets/emotions/"+index+"@2x.png"
}
return null
},
emojName:function(index){
if (index < this.emotionArray.length){
return this.emotionArray[index]
}
return null
}
}
export default emotionFunc;
至此，我的整个实现已经完全呈现出来了，如果你能看懂我上面所写，正好你也正好有和我类似的需求，相信你也能在我的思路下实现自己的业务代码。
最后，愿世界和平！！！
