小程序富文本显示-WxParse（列表循环显示）

虽然看了很多网上的教程步骤 直接套代码可以实现效果 但是当套到自己的代码时却老是失败 。

经过整整三天的折磨 现在 终于是做出来了。现在记录一下这插件的使用 并且写上自己的感受。。。。。。被坑的

 

一、 WxParse 插件的下载

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

把wxparse 文件夹 复制到你个人的目录下 （其实就是复制到项目在硬盘的根目录）如图

文件夹的位置与pages的位置是同级的

二、在app.wxss 顶部导入wxparse.wxss文件 

在app.wxss写上@import "wxParse/wxParse.wxss";  如图

三、使用时需要在页面导入<import src="../../wxParse/wxParse.wxml"/>和let WxParse = require("../../wxParse/wxParse.js");文件

假如你要在A页面使用 你要在A.wxml 顶部写上<import src="../../wxParse/wxParse.wxml"/> 并且在 A.js文件顶部写上WxParse = require("../../wxParse/wxParse.js") 如图

1.A.wxml（我这里是guide.wxml）文件

2.A.js (我这里是guide.js)文件

四、接收后台的json 数据 并对 html 内容进行解析

 onLoad: function (options) {

    var that = this;
    wx.request({
      url: Aurl + "?A=" + A,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {

        let artilesA=res.data;

        for(let i =0 ; i< artilesA.length ; i++){

          WxParse.wxParse('content'+i, 'html', artilesA[i]['content'], that, 5);

          if (i === artilesA.length - 1){
          
                  WxParse.wxParseTemArray("artileList", 'content', artilesA.length, that)
          }
        }   
        that.setData({

                  artiles:artilesA
           });
      }

    })
   

  }

前台显示

<view>
        <--这里的  wx:fot="artileList" 必须和 js文件里的
            WxParse.wxParseTemArray("artileList", 'content', artilesA.length, that)
            artileList 一致 我就是被坑在这里
            that.setData({
                  artiles:artilesA
             });
我将 本该填写artileList 填了artiles  导致页面空白!!!!特意写这个博客记录自己的错误希望不要再犯
        -->
    <block wx:for="{{artileList}}" wx:key="item" wx:for-item="item" wx:for-index="idx">
        
        <template is="wxParse" data="{{wxParseData:item}}"/>

  </block>
</view>

到这里 就可以使用wxparse 插件正常的在小程序显示html 文件了。

当然我还要显示json串中的其他数据 还需继续琢磨琢磨。。。。。