微信小程序中顯示html富文本的方法

使用方法：
git地址：https://github.com/icindy/wxParse

一、下載wxParse文件

 

image.png

• wxParse/
  -wxParse.js(必須存在)
  -html2json.js(必須存在)
  -htmlparser.js(必須存在)
  -showdown.js(必須存在)
  -wxDiscode.js(必須存在)
  -wxParse.wxml(必須存在)
  -wxParse.wxss(必須存在)
  -emojis(可選)

二、在要引入的頁面的js文件中，引入文件

//在使用的View中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

三、數據綁定

在page.js文件中綁定數據
如：

onLoad: function (options) {
　　var that = this;
　　var detail_content ="<div>我是HTML代碼</div>";
　　WxParse.wxParse('detail_content', 'html', detail_content, that, 5);
} //注意第一個參數需要與wxml中的一致

 

四、在page的wxml中引入模板

<view class='product-content'>
  <import src="../../wxParse/wxParse.wxml" />
  <view class="wxParse">
    <scroll-view style="height:2000rpx;" scroll-y='true'>
      <template is="wxParse" data="{{wxParseData:detail_content.nodes}}" />
    </scroll-view>
  </view>
</view>

轉載地址https://www.jianshu.com/p/9a0f74b3c7c8