小程序循環解析富文本數據

前言：數據是markdown編輯的內容，包含的都是帶html的標籤.。在循環裏既想展示帶html的數據，又不想影響其他字段數據。
一.使用wxParse（不推薦）

1. 下載放入到根目錄文件夾下https://github.com/icindy/wxParse
   
2. 引入
   1.先在app.wxss裏全局導入
   @import “/wxParse/wxParse.wxss”;
   2.在需要的模塊對應的js文件裏引入
   var WxParse = require(’…/…/wxParse/wxParse.js’)
   3.使用
   js裏

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: 'https://xxx',
      success: function (res) {
        var data = res.data.data.list;
         // 就是下面這個for循環
        for (let i = 0; i < data.length; i++) {
          WxParse.wxParse('content_main' + i, 'html', data[i].content_main, that);
          if (i === data.length - 1) {
            WxParse.wxParseTemArray("WxParseListArr", 'content_main', data.length, that)
          }
        }

        that.setData({
          nbaInfos: data,
        });
      }
    });
  },

wxml裏

<import src="../../wxParse/wxParse.wxml" />
<view class="nba-container">
  <block wx:key="{{index}}" wx:for="{{nbaInfos}}" >
    <view class="content">
      <view class="detail-container" data-id="{{item.id}}" catchtap="onDetailTap">
        <template is="wxParse" data="{{wxParseData:WxParseListArr[index]}}" />
        <text class="nba-title">{{item.modified_time}}</text>
      </view>
    </view>
  </block>
  </view>

效果：

二.rich-text標籤(推薦)
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
不要任何插件，直接使用小程序官方文檔裏的標籤

<view class="nba-container">
  <block wx:key="{{index}}" wx:for="{{nbaInfos}}" >
    <view class="content">
      <view class="detail-container" data-id="{{item.id}}" catchtap="onDetailTap">
        <rich-text nodes="{{ item.content_main }}"></rich-text>
        <text class="nba-title">{{item.modified_time}}</text>
      </view>
    </view>
  </block>

</view>

跟vue的v-html一樣，非常方便簡單