详情页支持视频了,感谢群友solver

This commit is contained in:
shengliang 2020-04-29 15:05:38 +08:00
parent 6f8f88a7b5
commit 08062d5436
3 changed files with 307 additions and 250 deletions

View File

@ -1,242 +1,247 @@
/** /**
* author: Di (微信小程序开发工程师) * author: Di (微信小程序开发工程师)
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
* 垂直微信小程序开发交流社区 * 垂直微信小程序开发交流社区
* *
* github地址: https://github.com/icindy/wxParse * github地址: https://github.com/icindy/wxParse
* *
* for: 微信小程序富文本解析 * for: 微信小程序富文本解析
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
*/ */
var __placeImgeUrlHttps = "https"; var __placeImgeUrlHttps = "https";
var __emojisReg = ''; var __emojisReg = '';
var __emojisBaseSrc = ''; var __emojisBaseSrc = '';
var __emojis = {}; var __emojis = {};
var wxDiscode = require('wxDiscode.js'); var wxDiscode = require('wxDiscode.js');
var HTMLParser = require('htmlparser.js'); var HTMLParser = require('htmlparser.js');
// Empty Elements - HTML 5 // Empty Elements - HTML 5
var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr"); var empty = makeMap(
// Block Elements - HTML 5 "area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
var block = makeMap("br,a,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video"); // Block Elements - HTML 5
var block = makeMap(
// Inline Elements - HTML 5 "br,a,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video"
var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var"); );
// Elements that you can, intentionally, leave open // Inline Elements - HTML 5
// (and which close themselves) var inline = makeMap(
var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr"); "abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var"
);
// Attributes that have their values filled in disabled="disabled"
var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected"); // Elements that you can, intentionally, leave open
// (and which close themselves)
// Special Elements (can contain anything) var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
function makeMap(str) { // Attributes that have their values filled in disabled="disabled"
var obj = {}, items = str.split(","); var fillAttrs = makeMap(
for (var i = 0; i < items.length; i++) "checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
obj[items[i]] = true;
return obj; // Special Elements (can contain anything)
var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
function makeMap(str) {
var obj = {},
items = str.split(",");
for (var i = 0; i < items.length; i++)
obj[items[i]] = true;
return obj;
}
function q(v) {
return '"' + v + '"';
}
function removeDOCTYPE(html) {
return html
.replace(/<\?xml.*\?>\n/, '')
.replace(/<!doctype.*\>\n/, '')
.replace(/<!DOCTYPE.*\>\n/, '');
} }
function q(v) { function html2json(html, bindName) {
return '"' + v + '"';
} //处理字符串
html = removeDOCTYPE(html);
function removeDOCTYPE(html) { html = wxDiscode.strDiscode(html);
return html //生成node节点
.replace(/<\?xml.*\?>\n/, '') var bufArray = [];
.replace(/<!doctype.*\>\n/, '') var results = {
.replace(/<!DOCTYPE.*\>\n/, ''); node: bindName,
} nodes: [],
images: [],
imageUrls: []
function html2json(html, bindName) { };
//处理字符串 HTMLParser(html, {
html = removeDOCTYPE(html); start: function(tag, attrs, unary) {
html = wxDiscode.strDiscode(html); //debug(tag, attrs, unary);
//生成node节点 // node for this element
var bufArray = []; var node = {
var results = { node: 'element',
node: bindName, tag: tag,
nodes: [], };
images:[], if (block[tag]) {
imageUrls:[] node.tagType = "block";
}; } else if (inline[tag]) {
HTMLParser(html, { node.tagType = "inline";
start: function (tag, attrs, unary) { } else if (closeSelf[tag]) {
//debug(tag, attrs, unary); node.tagType = "closeSelf";
// node for this element }
var node = { if (attrs.length !== 0) {
node: 'element', node.attr = attrs.reduce(function(pre, attr) {
tag: tag, var name = attr.name;
}; var value = attr.value;
if (name == 'class') {
if (block[tag]) { // console.dir(value);
node.tagType = "block"; // value = value.join("")
} else if (inline[tag]) { node.classStr = value;
node.tagType = "inline"; }
} else if (closeSelf[tag]) { // has multi attibutes
node.tagType = "closeSelf"; // make it array of attribute
} if (name == 'style') {
// console.dir(value);
if (attrs.length !== 0) { // value = value.join("")
node.attr = attrs.reduce(function (pre, attr) { node.styleStr = value;
var name = attr.name; }
var value = attr.value; if (value.match(/ /)) {
if (name == 'class') { value = value.split(' ');
// console.dir(value); }
// value = value.join("") // if attr already exists
node.classStr = value; // merge it
} if (pre[name]) {
// has multi attibutes if (Array.isArray(pre[name])) {
// make it array of attribute // already array, push to last
if (name == 'style') { pre[name].push(value);
// console.dir(value); } else {
// value = value.join("") // single value, make it array
node.styleStr = value; pre[name] = [pre[name], value];
} }
if (value.match(/ /)) { } else {
value = value.split(' '); // not exist, put it
} pre[name] = value;
}
// if attr already exists return pre;
// merge it }, {});
if (pre[name]) { }
if (Array.isArray(pre[name])) { //对img添加额外数据
// already array, push to last if (node.tag === 'img') {
pre[name].push(value); node.imgIndex = results.images.length;
} else { var imgUrl = node.attr.src;
// single value, make it array imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
pre[name] = [pre[name], value]; node.attr.src = imgUrl;
} node.from = bindName;
} else { results.images.push(node);
// not exist, put it results.imageUrls.push(imgUrl);
pre[name] = value; }
}
// 处理iframe的地址
return pre; if (node.tag === 'iframe') {
}, {}); node.src = node.attr.src;
} }
if (unary) {
//对img添加额外数据 // if this tag dosen't have end tag
if (node.tag === 'img') { // like <img src="hoge.png"/>
node.imgIndex = results.images.length; // add to parents
var imgUrl = node.attr.src; var parent = bufArray[0] || results;
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps); if (parent.nodes === undefined) {
node.attr.src = imgUrl; parent.nodes = [];
node.from = bindName; }
results.images.push(node); parent.nodes.push(node);
results.imageUrls.push(imgUrl); } else {
} bufArray.unshift(node);
}
if (unary) { },
// if this tag dosen't have end tag end: function(tag) {
// like <img src="hoge.png"/> //debug(tag);
// add to parents // merge into parent tag
var parent = bufArray[0] || results; var node = bufArray.shift();
if (parent.nodes === undefined) { if (node.tag !== tag) console.error('invalid state: mismatch end tag');
parent.nodes = [];
} if (bufArray.length === 0) {
parent.nodes.push(node); results.nodes.push(node);
} else { } else {
bufArray.unshift(node); var parent = bufArray[0];
} if (parent.nodes === undefined) {
}, parent.nodes = [];
end: function (tag) { }
//debug(tag); parent.nodes.push(node);
// merge into parent tag }
var node = bufArray.shift(); },
if (node.tag !== tag) console.error('invalid state: mismatch end tag'); chars: function(text) {
//debug(text);
if (bufArray.length === 0) { var node = {
results.nodes.push(node); node: 'text',
} else { text: text,
var parent = bufArray[0]; textArray: transEmojiStr(text)
if (parent.nodes === undefined) { };
parent.nodes = [];
} if (bufArray.length === 0) {
parent.nodes.push(node); results.nodes.push(node);
} } else {
}, var parent = bufArray[0];
chars: function (text) { if (parent.nodes === undefined) {
//debug(text); parent.nodes = [];
var node = { }
node: 'text', parent.nodes.push(node);
text: text, }
textArray:transEmojiStr(text) },
}; comment: function(text) {
//debug(text);
if (bufArray.length === 0) { var node = {
results.nodes.push(node); node: 'comment',
} else { text: text,
var parent = bufArray[0]; };
if (parent.nodes === undefined) { var parent = bufArray[0];
parent.nodes = []; if (parent.nodes === undefined) {
} parent.nodes = [];
parent.nodes.push(node); }
} parent.nodes.push(node);
}, },
comment: function (text) { });
//debug(text); return results;
var node = { };
node: 'comment',
text: text, function transEmojiStr(str) {
}; // var eReg = new RegExp("["+__reg+' '+"]");
var parent = bufArray[0]; // str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
if (parent.nodes === undefined) {
parent.nodes = []; var emojiObjs = [];
} //如果正则表达式为空
parent.nodes.push(node); if (__emojisReg.length == 0 || !__emojis) {
}, var emojiObj = {}
}); emojiObj.node = "text";
return results; emojiObj.text = str;
array = [emojiObj];
return array;
}
//这个地方需要调整
str = str.replace(/\[([^\[\]]+)\]/g, ':$1:')
var eReg = new RegExp("[:]");
var array = str.split(eReg);
for (var i = 0; i < array.length; i++) {
var ele = array[i];
var emojiObj = {};
if (__emojis[ele]) {
emojiObj.node = "element";
emojiObj.tag = "emoji";
emojiObj.text = __emojis[ele];
emojiObj.baseSrc = __emojisBaseSrc;
} else {
emojiObj.node = "text";
emojiObj.text = ele;
}
emojiObjs.push(emojiObj);
}
return emojiObjs;
}
function emojisInit(reg = '', baseSrc = "/wxParse/emojis/", emojis) {
__emojisReg = reg;
__emojisBaseSrc = baseSrc;
__emojis = emojis;
}
module.exports = {
html2json: html2json,
emojisInit: emojisInit
}; };
function transEmojiStr(str){
// var eReg = new RegExp("["+__reg+' '+"]");
// str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
var emojiObjs = [];
//如果正则表达式为空
if(__emojisReg.length == 0 || !__emojis){
var emojiObj = {}
emojiObj.node = "text";
emojiObj.text = str;
array = [emojiObj];
return array;
}
//这个地方需要调整
str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
var eReg = new RegExp("[:]");
var array = str.split(eReg);
for(var i = 0; i < array.length; i++){
var ele = array[i];
var emojiObj = {};
if(__emojis[ele]){
emojiObj.node = "element";
emojiObj.tag = "emoji";
emojiObj.text = __emojis[ele];
emojiObj.baseSrc= __emojisBaseSrc;
}else{
emojiObj.node = "text";
emojiObj.text = ele;
}
emojiObjs.push(emojiObj);
}
return emojiObjs;
}
function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
__emojisReg = reg;
__emojisBaseSrc=baseSrc;
__emojis=emojis;
}
module.exports = {
html2json: html2json,
emojisInit:emojisInit
};

View File

@ -14,7 +14,15 @@
<template name="wxParseVideo"> <template name="wxParseVideo">
<!--增加video标签支持并循环添加--> <!--增加video标签支持并循环添加-->
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}"> <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
<video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video> <video show-mute-btn="{{true}}" muted="{{true}}" class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
</view>
</template>
<!--基础元素-->
<template name="wxPraseIframe">
<!--增加Iframe标签支持并循环添加-->
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
<video show-mute-btn="{{true}}" muted="{{true}}" class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
</view> </view>
</template> </template>
@ -69,6 +77,11 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
@ -151,7 +164,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -225,7 +241,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -298,7 +317,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -371,6 +393,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
@ -445,6 +471,11 @@
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -517,7 +548,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -589,7 +623,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -662,7 +699,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -735,7 +775,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -808,7 +851,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>
@ -881,7 +927,10 @@
</view> </view>
</view> </view>
</block> </block>
<!--iframe插件这个是我们添加的-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe" data="{{item}}" />
</block>
<!--video类型--> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}"> <block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}"/> <template is="wxParseVideo" data="{{item}}"/>

View File

@ -137,6 +137,9 @@ view {
.wxParse-video-video { .wxParse-video-video {
width: 100%; width: 100%;
} }
.wxParse-iframe-video {
width: 100%;
}
.ql-align-center { .ql-align-center {
text-align: center; text-align: center;