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

微信小程序里面，对于富文本标签，我们通常使用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中，对循环模板添加处理。

<!--循环模版-->
<template name="wxParse0">
<!--<template is="wxParse1" data="{{item}}" />-->
<!--判断是否是标签节点-->
<block wx:if="{{item.node == 'element'}}">
<block wx:if="{{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}}">
<view class="{{item.classStr}} wxParse-li-inner">
<view class="{{item.classStr}} wxParse-li-text">
<view class="{{item.classStr}} wxParse-li-circle"></view>
</view>
<view class="{{item.classStr}} wxParse-li-text">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse1" data="{{item}}" />
</block>
</view>
</view>
</view>
</block>

<!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block>

<!--iframe插件（这个是我们添加的）-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>

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

<template name="wxParse1">

<template name="wxParse2">

我们最好都添加上iframe的模板解析

推荐文章