微信小程序中WxParse循环解析返回的富文本数据

忘是亡心i 2022-02-17 18:53 528阅读 0赞

WxParse循环解析

一、遇到问题

最近在做小程序，遇到这样一个需求：

将百度的Ueditor编辑器存入的文本数据显示在小程序中，需要保留之前的样式，这就用到了 WxParse插件，它能够用解析html标签，也能全部解析。

**先说单数据解析**

就是将一整条数据，直接解析。这个简单，解析完之后，赋值到view中。

首先要下载WxParse插件

第一步：

去 https://github.com/icindy/wxParse 下载wxParse，注意：只拷贝wxParse文件夹。

第二步：   
1、在需要解析的wxss页面引入

/\* 引入标签解析 ！！注意路径不要写错\*/  
@import "../../wxParse/wxParse.wxss";   
2、在需要解析的 wxml页面 引入

<import src="../wxParse/wxParse.wxml"/> 引入标签解析 ！！注意路径不要写错

/\*view中的内容 直接由wxParse解析出来，样式自动生成，只需要修改一样细节就可以\*/  
<view class="wxParse">  
        <template is="wxParse" data="\{ \{wxParseData: article\_content.nodes\}\}"/>  
</view>  
3、引入j在需要解析的js页面引入 并加载数据

var app = getApp();  
var WxParse = require('../wxParse/wxParse.js');//引入标签解析插件 ！！注意路径不要写错

Page(\{

data: \{  
    article\_content: "",  
  \},

//初次渲染页面时去请求数据  
  onLoad: function (options) \{  
   var that = this;  
   var result;

//request star  
    wx.request(\{  
      url: app.baseUrl+getcontent, //请求的接口路径  
      data: \{\},  
      header: \{  
          'content-type': 'application/json'  
      \},  
      success: function(res) \{  
           //成功接收到后台返回的数据后 赋值  
          that.setData(\{  
            article\_title:res.data.a\_title,  
            article\_content:WxParse.wxParse(' article\_content', 'html', res.data.a\_content, that, 5),//只需对文章内容进行解析  
          \})    
      \}  
    \})  
    //request end

\})

二、解决问题  ----**多数据循环**

地址附上：

Git一篇：wxParse多数据循环使用方法 · icindy/wxParse Wiki · GitHub

博客园一篇：微信小程序-- 使用wxParse解析html及多数据循环

第一次尝试：

教训：因为我是直接把解析后得内容循环了，导致每一个问题下面都有同样的内容

第二次尝试：

js代码不变

wxml中

添加了判断，只有当问题的下标（idx）与 问题解答的下标（index）一致时，再让解析的内容显示，就OK了

原文：https://blog.csdn.net/Colt666/article/details/82220191