WxParse循环解析

一、遇到问题

最近在做小程序,遇到这样一个需求:

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

先说单数据解析

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

首先要下载WxParse插件

第一步:

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

第二步:

1、在需要解析的wxss页面引入

/* 引入标签解析 !!注意路径不要写错*/

@import "../../wxParse/wxParse.wxss";

2、在需要解析的 wxml页面 引入

引入标签解析 !!注意路径不要写错

/*view中的内容 直接由wxParse解析出来,样式自动生成,只需要修改一样细节就可以*/

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

wxparse的使用php返回数组输出,微信小程序中WxParse循环解析返回的富文本数据相关推荐

  1. 微信小程序判断服务器返回值res,微信小程序后端怎么给前端返回成功状态码

    这要看你的后端是以什么形式给前端返回信息的.比如说是纯文本格式(以为例):header("Content-Type:text/html"); echo "100" ...

  2. 微信小程序页面跳转传递参数(富文本)

    wx.navigateTo({url:'../yinsi/yinsi?data=1',events: {// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据acceptDataFromO ...

  3. 微信小程序中实现循环调用一个方法

    要想循环调用一个方法肯定是要判断某个值,当这个值为假时调用这个方法,为真就不调用 query:function(){if(!!wx.getStorageSync('userInfo')){let _t ...

  4. 微信小程序连接oracle数据库,【微信小程序】关于微信小程序中跳转传参数与传对象的解析...

    这篇文章主要介绍了微信小程序 跳转传参数与传对象详解及实例代码的相关资料,需要的朋友可以参考下 微信小程序 跳转传参数 传对象 微信小程序跳转传参 一般都是传字符串到下一页,如果要想传对象怎么办呢? ...

  5. 微信小程序 html插件,微信小程序使用wxParse插件读取富文本,解析html标记

    微信小程序使用wxParse插件读取富文本,解析html标记 发布时间:2018-04-07 作者:Admin 标签: 微信小程序 微信小程序解析HTML标记 访问量:1203 使用wxParse可以 ...

  6. 后台接收数组_微信小程序如何与后台api接口进行数据交互(微信报修小程序源码讲解七)...

    完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 api 接口的交互,本节我们详细讲解一下小程序如何与 api 进行交互 . 小程序如何发送 http/https 请求到后台? 小程序请求 h ...

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

    WxParse循环解析 一.遇到问题 最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...

  8. 微信小程序使用wxParse解析html

    最近项目上遇到在微信小程序里需要渲染文章,后台返回的是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们在gith ...

  9. 微信小程序使用wxParse,解决图片显示路径问题

    微信小程序使用wxParse,解决图片显示路径问题 参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...

最新文章

  1. 存在量词后必须用合取式?-数学
  2. Dropout也能自动化?
  3. 《unix设备驱动》内存分配
  4. Asp.Net函数集
  5. linux禁止切换到root,linux禁止普通用户切换至root用户的实例讲解
  6. MySQL 条件查询
  7. 斗地主AI算法——第十三章の主动出牌(2)
  8. STM32编程中枚举和结构体的结合
  9. 手机modem 开发(2)---MTK modem的修改点
  10. 华为海外版操作系统曝光?HUAWEI ARK OS现身
  11. VB.NET工作笔记008---vs2017创建使用WCF服务_并调用服务demo
  12. python:01字串
  13. Linux操作系统基础知识学习
  14. Inferring Generative Model Structure with Static Analysis-2017【论文理解】
  15. JQuery datatables - column ordering, searching with multi header lines
  16. NOPI修改xlsx文件内容,无法正常打开,提示文件格式或文件扩展名无效
  17. 陶哲轩实分析(上)8.1及习题-Analysis I 8.1
  18. Vue2:组件及组件通信
  19. 【WEB项目】腾讯云服务器使用WordPress搭建网站
  20. ASP.NET Core 项目文件夹解读新框架

热门文章

  1. 汇款效应:全球公民成为发展中国家的经济急救员
  2. 点击试剂CuAAC,标记生物分子用科研试剂供应
  3. Delphi 7启动后出错的解决办法
  4. 基于微信小程序的校友录系统
  5. 支持机器学习!LiDAR360点云数据处理分析软件 V2.1发布
  6. 尝试开源3D三维免费软件OpenCASCADE OpenCASCADE-7.6.0
  7. 在PPT里制作具有上下标的文字效果
  8. MySQL 复习存储过程游标使用
  9. 2020Java初级面试题一Spring
  10. 计算机病毒在哪,这几年电脑病毒到哪里去了?病毒消失,它们也没落