在微信小程序解析html富文本

github地址: https://github.com/icindy/wxParse
因第一次开发小程序,此文更偏向于记录简单的使用方式

一、使用基础

1.基于wepy
2.下载wxParse整个文件夹
3.文件夹内,除了emojis之外,其他都是必要需保留的
4.wxParse.wxml里面的是组件模板

二、封装组件

<template>
  <!-- 此处须注意,引入wxParse.wxml的相对路径,会因父组件目录位置而改变 -->
  <import src="../../utils/wxParse/wxParse.wxml"/>
  <block wx:for="{{htmlParserTpl.nodes}}" wx:key="{{index}}">
    <template is="wxParse" data="{{item}}"/>
  </block>
</template>

<script>
  import wepy from 'wepy'
  import WxParse from '../utils/wxParse/wxParse'

  export default class htmlParser extends wepy.component {
    props = {
      parserName: {type: String, default: 'htmlParserName'},
      parserContent: {
        type: String,
        default: "<p style='font-size:32rpx;padding: 30rpx 0;text-align: center;'>没有任何内容</p>"
      },
      parserType: {type: String, default: 'html'},
      parserPadding: {type: Number, default: 0}
    }
    data = {
      htmlParserTpl: {}
    }
    methods = {
      htmlParserNotice () {
        this.htmlParse()
      }
    }
    events = {
      'htmlParser-broadcast': ($event, ...args) => {}
    };
    async onLoad () {
      this.htmlParse()
    }

    wxParseImgLoad (image) {
      // let imgInfo = image.detail
    }
	
    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 = htmlContent[this.parserName];
        // console.log(this.htmlParserTpl.nodes);
        this.$apply()
      } catch (e) {
        console.warn('kinerHtmlParser:', '没有任何内容需要转换', e)
      }
    }
  }
</script>

<style type="scss">
  @import "../utils/wxParse/wxParse.wxss";
  .wxParse-img {
    margin: 0 auto;
    width: 100%;
    min-height: rpx(200);/* 如果是用的不是sass且未配置,请更改为200rpx*/
    display: block;
    background-color: transparent;
  }
</style>

三、父组件使用

<template>
	<view>
 	 	<htmlParser :parserContent.sync="text"></htmlParser>
   </view>
</template>
<script>
  import wepy from 'wepy';
  import htmlParser from '../../components/htmlParser';
   export default class parentComponent extends wepy.page {
	    config = {
	      navigationBarTitleText: '父组件'
	    };
	    components = { htmlParser };
	
	    data = {  
	    	text: '',
	    	dataId:0,
	    };
	   getData() {
	   //此处是模拟异步请求,项目中请按需求替换成请求
			let _this=this;
			let timer = setTimeout(() => {
				_this.text='<p>我是一段文字</p>';
				_this.$apply();
				_this.$invoke('htmlParser', 'htmlParse', _this.text);
				clearTimeout(timer);
			}, 1000);

/*      wx.request({
        url: this.globalData.baseUrl.reqUrl + '/xx/xx/xx/',
        data: {
          dataId: _this.dataId,
        },
        success(res) {
          _this.text=res.data.text;
          _this.$apply();
        },
        fail() {

        }
      });*/
	    };
	};
	 onLoad(option) {
	 	
      this.getData();
    }
</script>