小程序富文本WxParse插件

缺乏、安全感 2024-04-18 16:26 90阅读 0赞

参考[https://blog.csdn.net/loveyoulouyou/article/details/83413628][https_blog.csdn.net_loveyoulouyou_article_details_83413628]

下载WxParse插件，插件地址[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse]

css部分：

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

html部分：

<import src="../../utils/wxParse/wxParse.wxml"/>

<block wx:for='\{ \{richText\}\}' wx:for-index='itemIndex' wx:for-item='item' wx:key=''>

<view class="listItem">

<image src="\{ \{item.img\}\}"></image>

<view>\{ \{item.title\}\}</view>

<view>

<template is="wxParse" data="\{ \{wxParseData:artileList\[itemIndex\]\}\}"/>

</view>

</view>

</block>

js部分：

var WxParse = require("../../utils/wxParse/wxParse.js");

Page(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

richText:\[

\{

'img': 'https://csdnimg.cn/cdn/content-toolbar/csdn-xie.png',

'title':'第一个title',

'des':'<p>第一个描述<span>哈哈哈哈哈撒多或</span></p>'

\},

\{

'img': 'https://csdnimg.cn/public/common/toolbar/images/message-icon.png',

'title': '第二个title',

'des': '<p>第二个描述<span>哈哈哈哈哈撒多或</span></p>'

\},

\{

'img': 'https://csdnimg.cn/public/common/toolbar/images/vipimg.png',

'title': '第三个title',

'des': '<p>第三个描述<span>哈哈哈哈哈撒多或</span></p>'

\},

\]

\},

/\*\*

\* 生命周期函数--监听页面显示

\*/

onShow: function () \{

var that = this;

var richText = that.data.richText;

for (var i = 0; i < richText.length; i++) \{

WxParse.wxParse('content' + i, 'html', richText\[i\]\['des'\], that);

if (i === richText.length - 1) \{

WxParse.wxParseTemArray("artileList", 'content', richText.length, that)

\}

\}

\},

[https_blog.csdn.net_loveyoulouyou_article_details_83413628]: https://blog.csdn.net/loveyoulouyou/article/details/83413628
[https_github.com_icindy_wxParse]: https://github.com/icindy/wxParse

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序显示富文本内容（wxparse）

.引入wxParse:下载地址[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] ...

Dear 丶/ 2024年04月18日 18:54/ 0 赞/ 84 阅读

相关小程序富文本WxParse插件

考[https://blog.csdn.net/loveyoulouyou/article/details/83413628][https_blog.csdn.net_l...

缺乏、安全感/ 2024年04月18日 16:26/ 0 赞/ 91 阅读

相关微信小程序WxParse解析富文本（html）代码在线视频教程

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.c

野性酷女/ 2024年02月19日 16:35/ 0 赞/ 73 阅读

相关富文本editor赋值_小程序editor(富文本编辑器)

富文本编辑器，可以对图片、文字进行编辑。编辑器导出内容支持带标签的 `html`和纯文本的 `text`，编辑器内部采用 `delta` 格式进行存储。通过`setCo

左手的ㄟ右手/ 2023年10月05日 17:48/ 0 赞/ 73 阅读

相关 wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

github官方： [https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] [https_

待我称王封你为后i/ 2023年06月27日 12:59/ 0 赞/ 23 阅读

相关微信小程序之富文本解析（wxParse）

github地址： [https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] 下载wxPare

分手后的思念是犯贱/ 2023年06月12日 09:51/ 0 赞/ 24 阅读

相关 weChat小程序--富文本插件wxParse的使用

昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件，但是还是不成功，我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了[wxParse-微信小程

痛定思痛。/ 2022年05月23日 06:36/ 0 赞/ 234 阅读

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

WxParse循环解析一、遇到问题最近在做小程序，遇到这样一个需求：将百度的Ueditor编辑器存入的文本数据显示在小程序中，需要保留之前的样式，这就用到了 W

忘是亡心i/ 2022年02月17日 18:53/ 0 赞/ 565 阅读

相关小程序富文本wxparse

1.将wxparse文件夹拷贝至utils 2.引用模板 <import src="../../../util/wxParse/wxParse.wxml" /> 3.

清疚/ 2021年11月22日 03:26/ 0 赞/ 293 阅读

相关微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）

1.把wxParse文件全部放入项目。 2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上  <im...

朱雀/ 2021年03月23日 14:50/ 0 赞/ 674 阅读