リッチテキストデータを解析するための小さなプログラムループ

はじめに: データはマークダウンで編集されたコンテンツであり、html のタグがすべて含まれています。ループ内ではhtmlでデータを表示したいのですが、他のフィールドのデータには影響を与えたくないのです。ここに画像の説明を挿入
1. wxParse を使用します (非推奨)

  1. ダウンロードしてルートフォルダーに置きますhttps://github.com/icindy/wxParse
    ここに画像の説明を挿入
  2. はじめに
    1. まず @import "/wxParse/wxParse.wxss" を app.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>

効果:
ここに画像の説明を挿入

2. リッチテキスト タグ (推奨)
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と同様、とても便利でシンプルです

おすすめ

転載: blog.csdn.net/sinat_15955423/article/details/100081646