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