一.wxParse的使用
1.先下载wxparse 然后放到你的项目中 （与pages同层级）
码云下载地址：gitee.com/likun_li/wx…
文件目录
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)
原文链接：blog.csdn.net/likun_li/ar…
*文件位置不要放错了，别放到pages文件里，放错了虽然能正常使用但是push不到git上面，会报错，好吧，都能猜到我踩坑了
给上个目录提示
2.在你的想用富文本的组件引入wxParse的相关js,wxss，wxml等，组件在pages/文件夹下
*wxss文件可能会影响到当前组件写的样式，建议按需引入，比如我想要video的样式 在文件对应的wxss文件粘贴，具体样式的布局自己按需增加修改，完善页面
/* 富文本样式start */
.wxParse-video {
text-align: center;
margin: 10px 0;
}
.wxParse-video-video {
width: 100%;
}
.wxParse-p {
padding: 0 30rpx !important;
}
.wxParse-img {
overflow: hidden;
width: 100%;
}
/* 富文本样式over */
3.js文件引入之后使用，调完接口在返回的富文本数据基础上使用和赋值
*这里的that，指的是page对象，在方法的顶级赋值，防止this指向问题
1. * WxParse.wxParse(bindName , type, data, target,imagePadding)
1. * 1.bindName绑定的数据名(必填)
1. * 2.type可以为html或者md(必填)
1. * 3.data为传入的具体数据(必填)
1. * 4.target为Page对象,一般为this(必填)
1. * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
1. */
4.然后wxml文件使用的地方直接渲染就可以了
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
二.富文本视频处理
*富文本视频播放不了的问题，视频格式如果是embed就需要将embed换成video，否则无法播放，wxParse文件夹里的html2json.js的HTMLParser方法里面添加
//处理embed换成video
if (node.tag == "embed") {
var embUrl = node.attr.src;
if (node.attr.src.indexOf('http:') == -1) {
embUrl = node.attr.src;
}
node.attr.src = embUrl;
node.tag = 'video';
}
三.播放当前视频时，关闭其他视频的播放
思路：使用实例wx.createVideoContext(‘唯一标识’)
需解决问题：这里的问题是发现又有个坑，因为你发现点击的时候视频无法自动停下来，导致他如果没有点击关闭视频，就点开下一个视频的话，就有两个一起播放，一旦视频多起来的话就会很吵，网页h5的可以自动关闭是因为浏览器做了限制，微信小程序好像没有，所以就需要另外处理，具体的底层问题我也不太明白
*解决问题:
- 找到视频的唯一标识并生成实例
- 找到上一个播放视频生成的实例
- 首个视频播放可以正常执行
- 连续点击同一个视频，播放-暂停-播放的时候正常执行
wxml代码
<scroll-view class="videoScroll" scroll-y>
<view class="videoItem" wx:for="{{videoList}}" wx:key="id" wx:for-item="video">
<video class="videoShow" src="{{video.data.urlInfo.url}}" loop="false" poster="{{video.data.coverUrl}}" loops="false" bindplay="handlePlay" id="{{video.data.vid}}"></video>
</view>
</scroll-view>
js代码
handlePlay (event) {
// 获取当前播放视频的唯一标识并赋值
let vid = event.currentTarget.id
// 判断this.videoContext有值且与当前点击播放视频不是同一个，并执行stop()
this.vid !== vid && this.videoContext && this.videoContext.stop()
// 通过当前视频唯一标识形成实例
this.videoContext = wx.createVideoContext(vid)
// 将唯一标识赋值方便判断
this.vid = vid
*在这里要注意，返回的是数组才有可能有标识给你停止，如果是以字符串返回，那你上传的什么样他后端就给你返回的什么样，后端没做处理的数据是办法做视频停止的,具体的请跟你对接的后端兄弟协商，但也不一定只有兄弟，或许还有姐妹（手动狗头）
注：第一次写博客，还有很多不足的地方，轻喷
