/** * 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; wx.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) { wx.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 }