微信小程序wxparse解析iframe中视频办法

发布时间：2020-12-14 19:08:53 所属栏目：资源来源：网络整理

导读：微信小程序里面，对于富文本标签，我们通常使用wxparse这个插件来进行解析，可以说非常的方便。但是今天在使用的时候，遇到了iframe中是视频地址的问题。如果是标准的视频标签。wxparse是可以正常解析的，但是如果是下面这样的形式的话，小程序是无法显示视

微信小程序里面，对于富文本标签，我们通常使用wxparse这个插件来进行解析，可以说非常的方便。但是今天在使用的时候，遇到了iframe中是视频地址的问题。

如果是标准的视频标签。wxparse是可以正常解析的，但是如果是下面这样的形式的话，小程序是无法显示视频的。

问题的原因就是wxparse没有对iframe标签进行解析匹配，我们需要自己修改wxparse来使它可以解析iframe标签。解决过程如下：

修改wxparse中的html2json.js文件，添加对iframe标签的解析。

function html2json(html,bindName) {
   
    HTMLParser(html,{
        start: function (tag,attrs,unary) {
           ...
            //对img添加额外数据
            if (node.tag === 'img') {
                node.imgIndex = results.images.length;
                var imgUrl = node.attr.src;
                if(!imgUrl) {
                  return
                }
                if (imgUrl[0] == '') {
                    imgUrl.splice(0,1);
                }
                imgUrl = wxDiscode.urlToHttpUrl(imgUrl,__placeImgeUrlHttps);
                node.attr.src = imgUrl;
                node.from = bindName;
                results.images.push(node);
                results.imageUrls.push(imgUrl);
            }
           
            // 处理iframe的地址
            if(node.tag === 'iframe') {
                
                node.src= node.attr.src;
            }
        .....};

2. 在wxParse.wxml添加iframe视频模板

<template name="wxPraseIframe">
<video id="myVideo" src="{{item.src}}"  enable-danmu danmu-btn controls></video>
</template>

3.在wxParse.wxml中，对循环模板添加处理。

<!--循环模版-->
<"wxParse0">
<!--<template is="wxParse1" data="{{item}}" />-->
<!--判断是否是标签节点-->
<block wx:if={{item.node == 'element'}}">
<{{item.tag == 'button'}button type="default" size="mini">
<block wx:for={{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse1" data={{item}}" />
</block>
</button>
</block>
<!--li类型-->
<block wx:elif={{item.tag == 'li'}view class={{item.classStr}} wxParse-li" style={{item.styleStr}} wxParse-li-inner">
<} wxParse-li-text">
<} wxParse-li-circle"></view>
</view>
<<!--video类型-->
<{{item.tag == 'video'}"wxParseVideo" data=<!--iframe插件（这个是我们添加的）-->
<{{item.tag == 'iframe'}"wxPraseIframe" data=block>

需要注意的是，循环模板可能会有很多个，比如

<"wxParse1">