微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本
Posted 苦夏木禾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本相关的知识，希望对你有一定的参考价值。
小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致
//richtext为富文本
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"') //图片自适应
如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将<br>标签替换掉
//richtext为后端传过来的富文本
dealRichText(richtext)
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\\/>/g, '');
return content;
渲染视频
网上也有不少方法，但是我的富文本是用百度富文本编辑器生成的，有些复杂，是这样的：
<p>
随便的文字
</p>
<p>
<img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
</p>
<p style="white-space: normal;">
随便的文字
</p>
<p style="white-space: normal;">
<img src="https://xxx.xxx.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p style="white-space: normal;">
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="">
<source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/>
</video>
</p>
<p>
<br/>
</p>
这是我随便打的，视频链接也更改了（项目保密），结构上每一个p标签是一个段落，视频可能在一个段落中存在多个，处理方案：
1、处理
dealRichText(richtext)
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\\/>/g, ''); // 替换图片宽高
let textArr = content.split(/<p/); //按照段落分割字符串
let contentArr = [];
// 防止一段多个视频，进行切割
textArr.forEach(val =>
let arr = val.split(/<video/)
contentArr.push(...arr)
)
let newArr = []; //处理后的数组
contentArr.forEach((val, i) =>
if (val != '' && val != ">") //防止为空字符串
let matchResult = val.match(/(?<= class=\\"edui-upload-video).+(?=\\<\\/video\\>)/); //匹配字符串中是否有视频
if (matchResult)
let a = matchResult[0].match(/(?<=src=\\").+(?=\\" data)/); //匹配视频链接
newArr.push(
type: 'video',
content: a[0]
)
else
newArr.push(
type: 'text',
content: "<p" + val
)
)
return newArr;
,
最后的结果（数组）：
0: type: "text", content: "<p>随便的文字</p>"
1: type: "text", content: "<p><img style="max-width:100%;height:auto" src="ht…f227c88c7c89737836814c.png" title="" alt=""/></p>"
2: type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"
3: type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"
4: type: "text", content: "<p style="white-space: normal;">随便的文字</p>"
5: type: "text", content: "<p style="white-space: normal;"><img style="max-wi…f227c88c7c89737836814c.png" title="" alt=""/></p>"
6: type: "text", content: "<p style="white-space: normal;">"
7: type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"
8: type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"
9: type: "text", content: "<p></p>"
数据上还是有点小瑕疵的，不过不影响使用了
2、渲染
<!-- config.remark是最后的数据，也就是上面的数组 -->
<view wx:for="config.remark" wx:key="index">
<rich-text nodes="item.content" wx:if="item.type == 'text'"></rich-text>
<video src="item.content" wx:if="item.type == 'video'" style="width: 100%;" controls></video>
</view>
微信小程序 富文本插件 循环渲染方式
感谢GitHub
https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95
介绍
介绍如何使用wxParse在回复等多条HTML共同渲染的方法
方法介绍
/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1，reply2...则bindNameReg = ‘reply‘
* 3.total为reply的个数
*/
var that = this;
WxParse.wxParseTemArray("replyTemArray",‘reply‘, replyArr.length, that)
使用方式
- 循环绑定数据
var replyHtml0 = `<div style="margin-top:10px;height:50px;">
<p class="reply">
wxParse回复0:不错，喜欢[03][04]
</p>
</div>`;
var replyHtml1 = `<div style="margin-top:10px;height:50px;">
<p class="reply">
wxParse回复1:不错，喜欢[03][04]
</p>
</div>`;
var replyHtml2 = `<div style="margin-top:10px;height:50px;">
<p class="reply">
wxParse回复2:不错，喜欢[05][07]
</p>
</div>`;
var replyHtml3 = `<div style="margin-top:10px;height:50px;">
<p class="reply">
wxParse回复3:不错，喜欢[06][08]
</p>
</div>`;
var replyHtml4 = `<div style="margin-top:10px; height:50px;">
<p class="reply">
wxParse回复4:不错，喜欢[09][08]
</p>
</div>`;
var replyHtml5 = `<div style="margin-top:10px;height:50px;">
<p class="reply">
wxParse回复5:不错，喜欢[07][08]
</p>
</div>`;
var replyArr = [];
replyArr.push(replyHtml0);
replyArr.push(replyHtml1);
replyArr.push(replyHtml2);
replyArr.push(replyHtml3);
replyArr.push(replyHtml4);
replyArr.push(replyHtml5);
for (let i = 0; i < replyArr.length; i++) {
WxParse.wxParse(‘reply‘ + i, ‘html‘, replyArr[i], that);
if (i === replyArr.length - 1) {
WxParse.wxParseTemArray("replyTemArray",‘reply‘, replyArr.length, that)
}
}
- 模版使用
<block wx:for="{{replyTemArray}}" wx:key="">
回复{{index}}:<template is="wxParse" data="{{wxParseData:item}}"/>
</block>
以上是关于微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本的主要内容，如果未能解决你的问题，请参考以下文章