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

                                          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代码:

 

wmxl代码:

第一次尝试效果:

emmmm....  不是我想要的..

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

 

第二次尝试:

js代码不变

 

wxml中

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

 

第二次尝试效果:

             

 

这下就满意了 哈哈哈

好不容易,达到了想要的效果。拖了几天,趁着还有热度,故再此留念。

 

希望对你们有用。给个赞 嘻嘻。。

 

 

 

版权声明:本文为Colt666原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Colt666/article/details/82220191