160 lines
4.6 KiB
JavaScript
160 lines
4.6 KiB
JavaScript
/**
|
||
* 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
|
||
}
|
||
|
||
|