详情页支持视频了,感谢群友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

@ -16,24 +16,32 @@ 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(
"area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
// Block Elements - HTML 5 // Block Elements - HTML 5
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"); 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"
);
// Inline Elements - HTML 5 // Inline Elements - HTML 5
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"); 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 // Elements that you can, intentionally, leave open
// (and which close themselves) // (and which close themselves)
var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr"); var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
// Attributes that have their values filled in disabled="disabled" // 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"); var fillAttrs = makeMap(
"checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
// Special Elements (can contain anything) // Special Elements (can contain anything)
var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block"); var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
function makeMap(str) { function makeMap(str) {
var obj = {}, items = str.split(","); var obj = {},
items = str.split(",");
for (var i = 0; i < items.length; i++) for (var i = 0; i < items.length; i++)
obj[items[i]] = true; obj[items[i]] = true;
return obj; return obj;
@ -50,8 +58,8 @@ function removeDOCTYPE(html) {
.replace(/<!DOCTYPE.*\>\n/, ''); .replace(/<!DOCTYPE.*\>\n/, '');
} }
function html2json(html, bindName) { function html2json(html, bindName) {
//处理字符串 //处理字符串
html = removeDOCTYPE(html); html = removeDOCTYPE(html);
html = wxDiscode.strDiscode(html); html = wxDiscode.strDiscode(html);
@ -71,7 +79,6 @@ function html2json(html, bindName) {
node: 'element', node: 'element',
tag: tag, tag: tag,
}; };
if (block[tag]) { if (block[tag]) {
node.tagType = "block"; node.tagType = "block";
} else if (inline[tag]) { } else if (inline[tag]) {
@ -79,7 +86,6 @@ function html2json(html, bindName) {
} else if (closeSelf[tag]) { } else if (closeSelf[tag]) {
node.tagType = "closeSelf"; node.tagType = "closeSelf";
} }
if (attrs.length !== 0) { if (attrs.length !== 0) {
node.attr = attrs.reduce(function(pre, attr) { node.attr = attrs.reduce(function(pre, attr) {
var name = attr.name; var name = attr.name;
@ -99,8 +105,6 @@ function html2json(html, bindName) {
if (value.match(/ /)) { if (value.match(/ /)) {
value = value.split(' '); value = value.split(' ');
} }
// if attr already exists // if attr already exists
// merge it // merge it
if (pre[name]) { if (pre[name]) {
@ -119,7 +123,6 @@ function html2json(html, bindName) {
return pre; return pre;
}, {}); }, {});
} }
//对img添加额外数据 //对img添加额外数据
if (node.tag === 'img') { if (node.tag === 'img') {
node.imgIndex = results.images.length; node.imgIndex = results.images.length;
@ -131,6 +134,10 @@ function html2json(html, bindName) {
results.imageUrls.push(imgUrl); results.imageUrls.push(imgUrl);
} }
// 处理iframe的地址
if (node.tag === 'iframe') {
node.src = node.attr.src;
}
if (unary) { if (unary) {
// if this tag dosen't have end tag // if this tag dosen't have end tag
// like <img src="hoge.png"/> // like <img src="hoge.png"/>
@ -225,7 +232,6 @@ function transEmojiStr(str){
} }
emojiObjs.push(emojiObj); emojiObjs.push(emojiObj);
} }
return emojiObjs; return emojiObjs;
} }
@ -239,4 +245,3 @@ module.exports = {
html2json: html2json, html2json: html2json,
emojisInit: emojisInit 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;