微信小程序使用 wxparse 解析 iframe腾讯视频

因为需要有播放视频的需求，所以小程序的官方组件 rich-text就不能用。所以只能使用wxparse，但是即便是wxparse本身也是不支持iframe标签的。

修改wxparse的源码过程：

1.支持iframe的转化

首先在html2json.js文件中支持iframe的转化，因为小程序默认就不支持iframe所以在源码中并没有iframe的转化，需要我们自己添加

可以看到之前源码对于img标签的处理，我们就照猫画虎对于iframe进行处理

并取出有效的vid以便之后的程序视频插件使用。

html2json.js文件修改：

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的地址，取出vid并放入数据中，if(node.tag === 'iframe') {// safeGetValue 只是一个取值的函数，可自行编写自己的取值函数。node.vid = safeGetValue([1], node.attr.src.match(/https:\/\/v\.qq\.com.*vid=(\w*)/))}.....
};// 此函数作用类似于ramda的path和pathOr，用于安全取值。function safeGetValue() {const argsLength = arguments.lengthif (argsLength !== 2 && argsLength !== 3) {throw '必须为两个或者三个参数'}var defaultValueif (argsLength === 3) {var [_defaultValue, keys, item] = argumentsdefaultValue = _defaultValue} else {var [keys, item] = arguments}if (!Array.isArray(keys)) {throw '参数有误，取值的keys必须为数组'}try {keys.forEach(key => {item = item[key]})} catch (e) {return defaultValue}return item
}

2.在wxParse.wxml添加腾讯视频插件的模板

在html2json中保存的vid属性，在这时有了用处

<template name="wxPraseIframe2TencentVideoPlugin"><view style="margin: 20rpx 0"><txv-videowidth="100%"height="600rpx"playerid="txv1"vid="{{item.vid}}"autoplay="{{false}}"></txv-video></view>
</template>

3.修改wxParse.wxml的循环模板,添加视频插件的模板

中间的腾讯视频插件正是我们需要添加的。

ps: 循环模板在源码中有10个，甚至更多，所以需要我们把每一个循环模板中都添加插件，也就是说在wxParse1-11中都要添加，这样才能保证你的视频能够正常播放。

<template name="wxParse0"><!--video类型--><block wx:elif="{{item.tag == 'video'}}"><template is="wxParseVideo" data="{{item}}" /></block><!--腾讯视频插件--><block wx:elif="{{item.tag == 'iframe'}}"><template is="wxPraseIframe2TencentVideoPlugin" data="{{item}}" /></block><!--img类型--><block wx:elif="{{item.tag == 'img'}}"><template is="wxParseImg" data="{{item}}" /></block></template>

3.添加腾讯视频插件

https://mp.weixin.qq.com/

添加后里面设置小程序源码

到此结束就可以打开了

tips：如果一个页面有好几个视频，则需要把第二步中 playerid的值改成当前页面唯一值，可以用视频的vid

微信小程序使用 wxparse 解析 iframe腾讯视频相关推荐

微信小程序使用wxParse解析渲染html代码片段
最近项目中一个遇到需求,就是在微信小程序里,需要显示html代码片段内容,内容是通过接口读取的服务器中的富文本内容,是html代码片段,小程序默认是不支持html格式的内容显示的,会被认为是Objec ...
微信小程序使用wxParse解析html
最近项目上遇到在微信小程序里需要渲染文章,后台返回的是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们在gith ...
小程序在wxml里转数字_小程序html转wxml，微信小程序用wxParse解析html
1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...
wxparse的使用php返回数组输出,微信小程序中WxParse循环解析返回的富文本数据
WxParse循环解析一.遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...
微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记
微信小程序使用wxParse插件读取富文本,解析html标记发布时间:2018-04-07 作者:Admin 标签: 微信小程序微信小程序解析HTML标记访问量:1203 使用wxParse可以 ...
微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
微信小程序使用wxparse插件，渲染文章不换行问题
微信小程序使用wxParse插件渲染富文本内容,不换行显示,影响阅读,我的解决方法:在wxParse.wxss中加上如下样式:(在我的小程序里面是有效的) view{/* word-break:bre ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...

微信小程序使用 wxparse 解析 iframe腾讯视频

修改wxparse的源码过程：

微信小程序使用 wxparse 解析 iframe腾讯视频相关推荐

最新文章

热门文章