拍拍尘土

html2json.js　 //将html每个标签转化成DOM对象的node
htmlparse.js //由html2json.js引用
showdown.js //由wxParse.js引用
wxDiscode.js //支持的符号库
wxParse.js //主入口的js，和处理各种标签的事件，如图片的onload
wxParse.wxml //不同标签template组件，内容会循环成HTML的DOM对象，每个都转化成template，显示出来
wxParse.wxss 　//样式

var WxParse = require('../../wxParse/wxParse.js');

//将需要转化的内容加上
/**
* WxParse.wxParse(bindName , type, data, target, imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var _this=this;
WxParse.wxParse('Content1', 'html', "文章内容", _this, 5); //这里数据名指定为Content1，wxml里用Content1.nodes

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:Content1.nodes}}"/>

@import "../../wxParse/wxParse.wxss";

//图片的onload事件
function wxParseImgLoad(e) {
     var that = this;
     var tagFrom = e.target.dataset.from;
     var idx = e.target.dataset.idx;
     if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
         calMoreImageInfo(e, idx, that, tagFrom)
     }
}

// 循环获取计算图片视觉最佳宽高
function calMoreImageInfo(e, idx, that, bindName) {
     var temData = that.data[bindName];
     if (!temData || temData.images.length == 0) {
         return;
     }

     //给图片真实宽高,通过styleStr 20191128 S
     var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName);
     var temImages = temData.images;//获取里面的images对象
     //给styleStr赋值
     var styleStr = (temImages[idx].styleStr!=undefined) ? temImages[idx].styleStr : '';
     var whStr = 'width:' + recal.imageWidth + 'px;height:' + recal.imageheight+'px;'
     styleStr = styleStr +whStr;
     temImages[idx].styleStr = styleStr;
     temData.images = temImages;//还回去
     var bindData={};
     bindData[bindName] = temData;
     that.setData(bindData);
     console.log(bindData)
     //styleStr需要在html2json插入node里。
     //给图片真实宽高,通过styleStr 20191128 E

}

<template name="wxParseImg">
         <image src="{{item.attr.src}}" class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="aspectFit" mode="widthFix" style="{{item.styleStr}}max-width:100%;" />
</template>