欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序●富文本

程序员文章站 2022-06-17 08:54:08
通俗的讲富文本就是图文并茂,有排版格式的文本,在VUE中可以使用v-html指令渲染富文本 在微信小程序里渲染富文本有几种方法,今天重点唠唠【wxParse】… wxParse是一个微信小程序富文本解析组件。现在小程序里面自带了一个组件也能解析富文本,但是表现不尽人意。所以我还是采用wxParse来解析富文本的。1.推荐一个github地址内有惊喜:https://github.com/icindy/wxParse2.下载github官方wxParse目录到小程序项目的根目录下文件结构:w...
通俗的讲富文本就是图文并茂,有排版格式的文本,在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