微信小程序●富文本

2022-07-30,,

通俗的讲富文本就是图文并茂,有排版格式的文本,在VUE中可以使用v-html指令渲染富文本 在微信小程序里渲染富文本有几种方法,今天重点唠唠【wxParse】… wxParse是一个微信小程序富文本解析组件。现在小程序里面自带了一个组件也能解析富文本,但是表现不尽人意。所以我还是采用wxParse来解析富文本的。

1.推荐一个github地址内有惊喜:https://github.com/icindy/wxParse
2.下载github官方wxParse目录到小程序项目的根目录下

文件结构:
wxParse
wxParse.js(必须存在)
html2json.js(必须存在)
htmlparser.js(必须存在)
showdown.js(必须存在)
wxDiscode.js(必须存在)
wxParse.wxml(必须存在)
wxParse.wxss(必须存在)
emojis(可选)

3.引入必要文件
在要使用的页面中引入WxParse模块 (举个栗子)

4.将WxParse.css引入在app.wxss中

5.将富文本绑定给wxParse
格式:
WxParse.wxParse(参数1, 参数2, 参数3, 参数4, 参数5);
参数说明:
参数1.bindName绑定的数据名(必填)
参数2.type可以为html或者md(必填)
参数3.data为传入的具体数据(必填)
参数4.target为Page对象,一般为this(必填)
参数5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
(举个栗子 ↓)

6.引入模板

原创不易 旨在互相学习 感谢前人铺路 {鼓掌}

本文地址:https://blog.csdn.net/weixin_49860677/article/details/107884899

《微信小程序●富文本.doc》

下载本文的Word格式文档,以方便收藏与打印。