微信小程序显示 html wepy + wxParse

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wyk304443164/article/details/77977577

本问出自：

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下载