/** * author: Di (微信小程序开发工程师) * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) * 垂直微信小程序开发交流社区 * * github地址: https://github.com/icindy/wxParse * * for: 微信小程序富文本解析 * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 */ /** * utils函数引入 **/ import showdown from './showdown.js'; import HtmlToJson from './html2json.js'; /** * 配置及公有属性 **/ var realWindowWidth = 0; var realWindowHeight = 0; tt.getSystemInfo({ success: function (res) { realWindowWidth = res.windowWidth realWindowHeight = res.windowHeight } }) /** * 主函数入口区 **/ function wxParse(bindName = 'wxParseData', type = 'html', data = '
数据不能为空
', target, imagePadding) { var that = target; var transData = {}; //存放转化后的数据 if (type == 'html') { transData = HtmlToJson.html2json(data, bindName); } else if (type == 'md' || type == 'markdown') { var converter = new showdown.Converter(); var html = converter.makeHtml(data); transData = HtmlToJson.html2json(html, bindName); } transData.view = {}; transData.view.imagePadding = 0; if (typeof (imagePadding) != 'undefined') { transData.view.imagePadding = imagePadding } var bindData = {}; bindData[bindName] = transData; that.setData(bindData) that.wxParseImgLoad = wxParseImgLoad; that.wxParseImgTap = wxParseImgTap; } // 图片点击事件 function wxParseImgTap(e) { var that = this; var nowImgUrl = e.target.dataset.src; var tagFrom = e.target.dataset.from; if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) { tt.previewImage({ current: nowImgUrl, // 当前显示图片的http链接 urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表 }) } } /** * 图片视觉宽高计算函数区 **/ 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; } var temImages = temData.images; //因为无法获取view宽度 需要自定义padding进行计算,稍后处理 var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName); // temImages[idx].width = recal.imageWidth; // temImages[idx].height = recal.imageheight; // temData.images = temImages; // var bindData = {}; // bindData[bindName] = temData; // that.setData(bindData); var index = temImages[idx].index var key = `${bindName}` for (var i of index.split('.')) key += `.nodes[${i}]` var keyW = key + '.width' var keyH = key + '.height' that.setData({ [keyW]: recal.imageWidth, [keyH]: recal.imageheight, }) } // 计算视觉优先的图片宽高 function wxAutoImageCal(originalWidth, originalHeight, that, bindName) { //获取图片的原始长宽 var windowWidth = 0, windowHeight = 0; var autoWidth = 0, autoHeight = 0; var results = {}; var padding = that.data[bindName].view.imagePadding; windowWidth = realWindowWidth - 2 * padding; windowHeight = realWindowHeight; //判断按照那种方式进行缩放 // console.log("windowWidth" + windowWidth); if (originalWidth > windowWidth) { //在图片width大于手机屏幕width时候 autoWidth = windowWidth; // console.log("autoWidth" + autoWidth); autoHeight = (autoWidth * originalHeight) / originalWidth; // console.log("autoHeight" + autoHeight); results.imageWidth = autoWidth; results.imageheight = autoHeight; } else { //否则展示原来的数据 results.imageWidth = originalWidth; results.imageheight = originalHeight; } return results; } function wxParseTemArray(temArrayName, bindNameReg, total, that) { var array = []; var temData = that.data; var obj = null; for (var i = 0; i < total; i++) { var simArr = temData[bindNameReg + i].nodes; array.push(simArr); } temArrayName = temArrayName || 'wxParseTemArray'; obj = JSON.parse('{"' + temArrayName + '":""}'); obj[temArrayName] = array; that.setData(obj); } /** * 配置emojis * */ function emojisInit(reg = '', baseSrc = "/wxParse/emojis/", emojis) { HtmlToJson.emojisInit(reg, baseSrc, emojis); } module.exports = { wxParse: wxParse, wxParseTemArray: wxParseTemArray, emojisInit: emojisInit }