【微信小程序开发】 wxParse组件

简单介绍:

wxParse是一个templet组件,Html代码转化成小程序的标签,目的是解决需要兼容手机端、小程序端的HTML内容。

 

文件有:

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

 

 

使用方法:
js页

//引用var WxParse = require(‘/wxParse/wxParse.js‘);//将需要转化的内容加上var that=this;WxParse.wxParse(‘Content1‘, ‘html‘, 内容, that, 0);

 

wxml页

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

 

wxss页

@import "/wxParse/wxParse.wxss";

 

下载文件:

https://github.com/icindy/wxParse

【微信小程序开发】 wxParse组件

 

如何给图片设置真实的宽高?
wxParse.wxml 在图片tempate里执行bindonload事件,在wxParse.js方法里,获取它的真实宽高,给它的style赋值宽高
当宽度大于屏幕宽度时,使用屏幕宽度,高度改为:宽度  / 屏幕宽度 * 真实高度

最后,that.setData(bindData)给了template

 

//图片的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}

 

给item加了styleStr。

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

 

相关文章