小程序解析富文本（支持视频，支持微信编辑器，支持135编辑器富文本样式）

小程序的富文本插件rich-text不支持135等富文本，所以考虑wxParse解析富文本，但是wxParse不支持iframe标签，所以首先要
1.增加对iframe标签的解析：
在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中，增加视频模板：

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

3.在wxParse.wxml的循环模板中增加：

<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>

4.添加腾讯视频插件
在小程序管理后台的“设置-第三方服务-插件管理”中添加“腾讯视频”插件

// 在你们的wxml上这样插入视频元素
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

// 在你们的json里面插入
"usingComponents": {"txv-video": "plugin://tencentvideo/video"
}

// 在app.json里面引入插件，注意插件版本号填最新的版本号
"plugins": {"tencentvideo": {"version": "1.2.4","provider": "wxa75efa648b60994b"}
}

小程序解析富文本（支持视频，支持微信编辑器，支持135编辑器富文本样式）相关推荐

iOS富文本解析html图片,小程序解析html和富文本编辑内容【亲测有效】
首先去 https://github.com/icindy/wxParse 下载wxParse,只拷贝wxParse文件夹即可. 1.引入wxss @import "../../util/w ...
微信小程序解析并展示富文本编辑器保存后的内容
最近有个产品需求:在PC端里用富文本编辑器里编写自定义内容,然后保存后需要在小程序端展示,了解过的朋友就知道了,富文本编辑器输出的内容都是基于HTML标签的,比如:div.p.br这些常用的,而小程序 ...
小程序（二十六）微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...
强大新UI装逼神器微信小程序源码下载用不完的模板支持多种流量主模式
大家好这是一款装逼制作的一款微信小程序源码标题为什么说用不完的模板呢,因为小编原本想数一下有多少个模板但是小编一直翻呀翻,翻了多久都忘记了,都还没到底所以说可以想象模板有多少,另外呢里面的模板还 ...
小程序源码：炫酷恶趣制作神器,支持装逼,姓氏头像等强大的制作小程序
这是一款强大的恶趣制作小程序源码内包含了N种模板制作,另外并有大分类另外新增加了姓氏头像的制作另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner ...
【小程序源码】圣诞节头像框制作生成支持多模板
提前给大家发一款可以制作圣诞帽头像的一款小程序里面有多种模板选择,当然啦里面不只是可以制作圣诞帽还可以制作贴图头像框,各种卡通,卡哇伊,男神女神标等等模板可以制作的另外还支持检测你的手机型号,自 ...
小程序源码：最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题-多玩法安装简单
这是一款题库微信小程序源码支持积分商城.自定义试题及导入.知识点分类.模式试题考试.流量主等首页模块:专项刷题 .题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背另外还有更多 ...
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
这是一款战力查询的微信小程序源码源码内自带了接口目前支持了微信,QQ,苹果,安卓全区都可以查询支持流量主收益,而且搭建安装简单使用微信开发者工具打开源码然后设置一下合法域名上传审核即可该小程 ...
最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题
这是一款题库微信小程序源码支持积分商城.自定义试题及导入.知识点分类.模式试题考试等首页模块:专项刷题.题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背另外还有更多功能就不一 ...
微信小程序PHP文件建在哪里,微信小程序解析H5文件方法
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的: 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index. ...

小程序解析富文本（支持视频，支持微信编辑器，支持135编辑器富文本样式）

小程序解析富文本（支持视频，支持微信编辑器，支持135编辑器富文本样式）相关推荐

最新文章

热门文章