1. 程式人生 > >微信小程式顯示 html wepy + wxParse

微信小程式顯示 html wepy + wxParse

本問出自:

http://blog.csdn.net/wyk304443164

修改自:

http://www.wxappclub.com/topic/961

本著不重複造輪子的基礎上我找到了上面這篇。發現它不能正常執行,也就是顯示的是空白的。於是我修改了一點。如果你已經集成了上面那個原始碼,那麼你” 可能 ” 只需要修改

wxParse.js(wxParse內原始碼)

/**
 * 主函式入口區
 **/
function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">資料不能為空</div>'
, target,imagePadding) { ... //新增 bindData.wxParseImgLoad = wxParseImgLoad; bindData.wxParseImgTap = wxParseImgTap; return bindData; }

htmlParser.wpy

htmlParse () {
      /**
       * WxParse.wxParse(bindName , type, data, target,imagePadding)
       * 1.bindName繫結的資料名(必填)
       * 2.type可以為html或者md(必填)
       * 3.data為傳入的具體資料(必填)
       * 4.target為Page物件,一般為this(必填)
       * 5.imagePadding為當圖片自適應是左右的單一padding(預設為0,可選)
       */
try { let htmlContent = WxParse.wxParse(this.parserName, this.parserType, this.parserContent || this.props.parserContent.default, this, this.parserPadding) // this.htmlParserTpl = this[this.parserName]; this.htmlParserTpl = htmlContent[this.parserName] this.$apply() } catch
(e) { console.warn('kinerHtmlParser:', '沒有任何內容需要轉換', e) } }

道理很簡單,傳過去的this,在最下面賦值的時候是:

var bindData = {};
  bindData[bindName] = transData;
  that.setData(bindData)
  that.wxParseImgLoad = wxParseImgLoad;
  that.wxParseImgTap = wxParseImgTap;
//原因可能是:這邊的that.setData不和 wepy 的 this.xxx=xxx; this.$apply(); 一樣

2017/10/27更新,修改了圖片點選報錯:

bindData 儲存在了htmlParser.wpy下
將wxParseImgTap exports出來

整個原始碼參考

github下載