You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
4.6 KiB

3 years ago
/**
* 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='<div class="color:red;">数据不能为空</div>', target,imagePadding) {
var that = target;
var transData = {};//存放转化后的数据
if (type == 'html') {
transData = HtmlToJson.html2json(data, bindName);
console.log(JSON.stringify(transData, ' ', ' '));
} else if (type == 'md' || type == 'markdown') {
var converter = new showdown.Converter();
var html = converter.makeHtml(data);
transData = HtmlToJson.html2json(html, bindName);
console.log(JSON.stringify(transData, ' ', ' '));
}
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
}