小程序循环解析富文本数据

小灰灰 2024-04-17 06:24 61阅读 0赞

前言：数据是markdown编辑的内容，包含的都是带html的标签.。在循环里既想展示带html的数据，又不想影响其他字段数据。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70]  
一.使用wxParse（不推荐）

1.  下载放入到根目录文件夹下[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 1]
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>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 2]

二.rich-text标签(推荐)  
[https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html][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一样，非常方便简单

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/adc45c61014b4a2eb3c3029962a1b247.png
[https_github.com_icindy_wxParse]: https://github.com/icindy/wxParse
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/c4d82f0e6f2849ba95ac293726a8ba47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTU1NDIz_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/ed5b092839ca4a24a7e341dda9a213e5.png
[https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html