用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-9-23 00:08

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

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

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

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src=" ” _src=”https://lj-1251274653.cos.ap-chengdu.myqcloud.com/ljfl.mp4">”>https://lj-1251274653.cos.ap-chengdu.myqcloud.com/ljfl.mp4">

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

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

  2. 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的模板解析

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 梦回故里 来自: 80shihua