【微信小程序】 wxParse組件

簡單介紹：

wxParse是一個templet組件，Html代碼轉化成小程序的標簽，目的是解決需要兼容手機端、小程序端的HTML內容。

 

文件有：

html2json.js　 //將html每個標簽轉化成DOM對象的node
htmlparse.js   //由html2json.js引用
showdown.js    //由wxParse.js引用
wxDiscode.js   //支持的符號庫 
wxParse.js     //主入口的js，和處理各種標簽的事件，如圖片的onload
wxParse.wxml   //不同標簽template組件，內容會循環成HTML的DOM對象，每個都轉化成template，顯示出來
wxParse.wxss 　//樣式

 

 

使用方法：
js頁

//引用

var WxParse = require('/wxParse/wxParse.js');

//將需要轉化的內容加上
var that=this;
WxParse.wxParse('Content1', 'html', 內容, that, 0);

 

wxml頁

<template is="wxParse" data="{{wxParseData:Content1.nodes}}"/>

 

wxss頁

@import "/wxParse/wxParse.wxss";

 

下載文件：

https://github.com/icindy/wxParse

 

如何給圖片設置真實的寬高？
wxParse.wxml 在圖片tempate里執行bindonload事件，在wxParse.js方法里，獲取它的真實寬高，給它的style賦值寬高
當寬度大於屏幕寬度時，使用屏幕寬度，高度改為：寬度  / 屏幕寬度 * 真實高度

最后，that.setData(bindData)給了template

 

//圖片的onload事件
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;
  }

  //給圖片真實寬高,通過styleStr 20191128 S
  var recal = wxAutoImageCal(e.detail.width, e.detail.height, that, bindName); 
  var temImages = temData.images;//獲取里面的images對象
  //給styleStr賦值
  var styleStr = (temImages[idx].styleStr!=undefined) ? temImages[idx].styleStr : '';
  var whStr = 'width:' + recal.imageWidth + 'px;height:' + recal.imageheight+'px;'
  styleStr = styleStr +whStr;
  temImages[idx].styleStr = styleStr;
  temData.images = temImages;//還回去
  var bindData={};
  bindData[bindName] = temData;
  that.setData(bindData);
  console.log(bindData)
  //styleStr需要在html2json插入node里。
  //給圖片真實寬高,通過styleStr 20191128 E

}

 

給item加了styleStr。

<template name="wxParseImg">
    <image src="{{item.attr.src}}" class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}"  data-idx="{{item.imgIndex}}"    bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="aspectFit" mode="widthFix" style="{{item.styleStr}}max-width:100%;" />
</template>