微信小程序将html转化为wxml（循环列表）

wxParse-微信小程序富文本解析组件： https://github.com/icindy/wxParse

git上有详细的基本使用方法

在开文目录下引入下载好的文件wxParse

 

第一种方法   

这是一个蠢方法

js中引入wxParse.js文件

const WxParse = require('../wxParse/wxParse.js');


//这是某一段需要循环的数据

      var result = res.data.list;  //请求到的数据  数组形式
      var len = result.length;

      for (let i = 0; i < len; i++) {
  
        WxParse.wxParse('article' + i, 'html', result[i].des, that, 5); //转化html  单文件

        if (i === len - 1) {
          WxParse.wxParseTemArray("replyTemArray", 'article', len, that)
        }
      }

 

wxml中引入wxParse.wxml

 下面使用的一个蠢办法  主要代码如下

<!-- 实际上你要循环的数据是circlelist wxpase有自己的规范 但是为了把列表里的文本全部渲染进列表  这里使用了一个蠢办法 -->
    <!-- replyTemArray的长度实际上跟circlelist的长度是一样的-->
    <!-- 需要转换的文字依旧使用 <template is="wxParse" data="{{wxParseData:item}}" />就行 -->
    <!-- 其他的信息你可以根据   circlelist所在的索引引入  例如 {{circlelist[index].time}} 这样 --> 

<import src="../wxParse/wxParse.wxml" />   


 <block wx:key="{{index}}" wx:for="{{replyTemArray}}">
      <view class='circlelist'>
        <!-- 头部区域 -->
        <view class='top'>
          <view class='left'>
            <image src='{{logo}}'></image>
          </view>

          <view class='right'>
            <view class='left'>
              <p class='username'>{{tittle}}</p>
              <p>{{circlelist[index].time}}前</p>
            </view>

            <view class='sharbtn' catchtap='godetail' data-goodsid='{{circlelist[index].goodsId}}' data-platform='{{circlelist[index].platform}}'>
              <view class='center'>
                <image src='../../img/buycar.png'></image>
                <text>购买</text>
              </view>
            </view>


          </view>
        </view>

        <view class='concent'>
          <!-- 描述 -->
          <view class='des'>
            <!-- <template is="wxParse" data="{{wxParseData:article1.nodes}}" /> -->
            <template is="wxParse" data="{{wxParseData:item}}" />
          </view>

          <!-- 图片 -->
          <view class='img_wrap' catchtap='godetail' data-goodsid='{{circlelist[index].goodsId}}' data-platform='{{circlelist[index].platform}}'>
            <view class='img' wx:for="{{circlelist[index].array}}" wx:key="{{index}}">
              <image src='{{item}}'></image>
            </view>
          </view>
        </view>
      </view>
    </block>

 

 

第二种方法   

js在第一种方法的基础上添加了一步把后台返回的数据动态的添加到replyTemArray里

const WxParse = require('../wxParse/wxParse.js');


   //这是某一段需要循环的数据

      var result = res.data.list;  //请求到的数据  数组形式
      var len = result.length;

      for (let i = 0; i < len; i++) {
  
        WxParse.wxParse('article' + i, 'html', result[i].des, that, 5); //转化html  单文件

        if (i === len - 1) {
          WxParse.wxParseTemArray("replyTemArray", 'article', len, that)
        }
      }



 console.log(that.data.replyTemArray);  //存放的是转换后的wxml文本
      console.log(result);     //后台返回的真实信息
      var reallist = that.data.replyTemArray;
      //通过循环的方法往replyTemArray里面添加添加属性
      reallist.map((item, index, arr) => {
        arr[index][0].reallist = result[index]; //对应的时使用WxParse后的结构
      });

      that.setData({
        replyTemArray: reallist
      })

      console.log(that.data.replyTemArray);

wxml中的更改较大  真实的数据现在已经全部在replyTemArray中  只需要在replyTemArray中匹配就行

 <block wx:key="{{index}}" wx:for="{{replyTemArray}}">
      <view class='circlelist'>
        <!-- 头部区域 -->
        <view class='top'>
          <view class='left'>
            <image src='{{logo}}'></image>
          </view>

          <view class='right'>
            <view class='left'>
              <p class='username'>{{tittle}}</p>
              <p>{{item[0].reallist.time}}前</p>
            </view>

            <block wx:if="{{navindex==0}}">
              <view class='sharbtn' catchtap='godetail' data-goodsid='{{item[0].reallist.goodsId}}' data-platform='{{item[0].reallist.platform}}'>
                <view class='center'>
                  <image src='../../img/buycar.png'></image>
                  <text>购买</text>
                </view>
              </view>
            </block>

            <block wx:if="{{navindex==1}}">
              <view class='sharbtn1' catchtap="canvasFn" data-goodsinfo='{{item[0].reallist}}'>
                <view class='center'>
                  <image src='../../img/saveimg1.png'></image>
                  <text>保存图片</text>
                </view>
              </view>
            </block>

          </view>
        </view>

        <view class='concent'>
          <!-- 描述 -->
          <view class='des'>
            <!-- <template is="wxParse" data="{{wxParseData:article1.nodes}}" /> -->

            <template is="wxParse" data="{{wxParseData:item}}" />

          </view>

          <!-- 图片 -->
          <view class='img_wrap' catchtap='godetail' data-goodsid='{{item[0].reallist.goodsId}}' data-platform='{{item[0].reallist.platform}}'>
            <view class='img' wx:for="{{item[0].reallist.array}}" wx:key="{{index}}">
              <image src='{{item}}'></image>
            </view>
          </view>
        </view>
      </view>
    </block>

打印的replyTemArray 数据如下  replyTemArray里下标为0的里面已经增加了一个reallist属性

 

总结一下吧

第一种办法虽然蠢但是比较好理解只要细心就不太容易犯错，第二种办法比较简洁主要思想就是合并数据给原始数据增添属性，理解起来较第一种稍微难点。两种办法都行看个人爱好

 

有些错的地方欢迎补充