wxParse.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. * author: Di (微信小程序开发工程师)
  3. * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
  4. * 垂直微信小程序开发交流社区
  5. *
  6. * github地址: https://github.com/icindy/wxParse
  7. *
  8. * for: 微信小程序富文本解析
  9. * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
  10. */
  11. /**
  12. * utils函数引入
  13. **/
  14. import showdown from 'showdown.js';
  15. import HtmlToJson from 'html2json.js';
  16. /**
  17. * 配置及公有属性
  18. **/
  19. /**
  20. * 主函数入口区
  21. **/
  22. function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">数据不能为空</div>', target,imagePadding) {
  23. var that = target;
  24. var transData = {};//存放转化后的数据
  25. if (type == 'html') {
  26. transData = HtmlToJson.html2json(data, bindName);
  27. } else if (type == 'md' || type == 'markdown') {
  28. var converter = new showdown.Converter();
  29. var html = converter.makeHtml(data);
  30. transData = HtmlToJson.html2json(html, bindName);
  31. }
  32. transData.view = {};
  33. transData.view.imagePadding = 0;
  34. if(typeof(imagePadding) != 'undefined'){
  35. transData.view.imagePadding = imagePadding
  36. }
  37. var bindData = {};
  38. bindData[bindName] = transData;
  39. that.setData(bindData)
  40. that.wxParseImgLoad = wxParseImgLoad;
  41. that.wxParseImgTap = wxParseImgTap;
  42. }
  43. // 图片点击事件
  44. function wxParseImgTap(e) {
  45. var that = this;
  46. var nowImgUrl = e.target.dataset.src;
  47. var tagFrom = e.target.dataset.from;
  48. if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
  49. wx.previewImage({
  50. current: nowImgUrl, // 当前显示图片的http链接
  51. urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
  52. })
  53. }
  54. }
  55. /**
  56. * 图片视觉宽高计算函数区
  57. **/
  58. function wxParseImgLoad(e) {
  59. var that = this;
  60. var tagFrom = e.target.dataset.from;
  61. var idx = e.target.dataset.idx;
  62. if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
  63. calMoreImageInfo(e, idx, that, tagFrom)
  64. }
  65. }
  66. // 假循环获取计算图片视觉最佳宽高
  67. function calMoreImageInfo(e, idx, that, bindName) {
  68. var temData = that.data[bindName];
  69. if (temData.images.length == 0) {
  70. return;
  71. }
  72. var temImages = temData.images;
  73. //因为无法获取view宽度 需要自定义padding进行计算,稍后处理
  74. var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);
  75. temImages[idx].width = recal.imageWidth;
  76. temImages[idx].height = recal.imageheight;
  77. temData.images = temImages;
  78. var bindData = {};
  79. bindData[bindName] = temData;
  80. that.setData(bindData);
  81. }
  82. // 计算视觉优先的图片宽高
  83. function wxAutoImageCal(originalWidth, originalHeight,that,bindName) {
  84. //获取图片的原始长宽
  85. var windowWidth = 0, windowHeight = 0;
  86. var autoWidth = 0, autoHeight = 0;
  87. var results = {};
  88. wx.getSystemInfo({
  89. success: function (res) {
  90. var padding = that.data[bindName].view.imagePadding;
  91. windowWidth = res.windowWidth-2*padding;
  92. windowHeight = res.windowHeight;
  93. //判断按照那种方式进行缩放
  94. if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候
  95. autoWidth = windowWidth;
  96. autoHeight = (autoWidth * originalHeight) / originalWidth;
  97. results.imageWidth = autoWidth;
  98. results.imageheight = autoHeight;
  99. } else {//否则展示原来的数据
  100. results.imageWidth = originalWidth;
  101. results.imageheight = originalHeight;
  102. }
  103. }
  104. })
  105. return results;
  106. }
  107. function wxParseTemArray(temArrayName,bindNameReg,total,that){
  108. var array = [];
  109. var temData = that.data;
  110. var obj = null;
  111. for(var i = 0; i < total; i++){
  112. var simArr = temData[bindNameReg+i].nodes;
  113. array.push(simArr);
  114. }
  115. temArrayName = temArrayName || 'wxParseTemArray';
  116. obj = JSON.parse('{"'+ temArrayName +'":""}');
  117. obj[temArrayName] = array;
  118. that.setData(obj);
  119. }
  120. /**
  121. * 配置emojis
  122. *
  123. */
  124. function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
  125. HtmlToJson.emojisInit(reg,baseSrc,emojis);
  126. }
  127. module.exports = {
  128. wxParse: wxParse,
  129. wxParseTemArray:wxParseTemArray,
  130. emojisInit:emojisInit
  131. }