微信小程序解析富文本过程详解

前言

最近公司在开发OTA微信小程序，部分页面的细节是HTML富文本格式。但是微信小程序不能直接解析HTML，需要将内容中的HTML标签转换成微信小程序支持的标签。

起初，我考虑编写自己的方法来替换标签，后来发现了一个非常有用的插件：WxParse。

今天就和大家分享一下，Github地址：https://github.com/icindy/wxParse

使用WxParse解析富文本数据

1.将下载的插件文件夹复制到我们项目的根目录下(表情文件可以决定取不取，其他文件必须取)

-wxParse/-wxParse.js(必须存在)-html2json.js(必须存在)-htmlparser.js(必须存在)-declarge . js(必须存在)-wxdocade . js(必须存在)-wxParse.wxml(必须存在)-wxParse.wxss。

2.将WxParse模块引入视图()。js文件),它需要使用插件

Var WxParse=require('./././wx parse/wx parse . js’)；3.在需要使用的wxss中引入WxParse.wxss，也可以在app.wxss中引入

@import./././wx parse/wx parse . wxss '；4.执行数据绑定

Var article='div我是HTML代码/div '；/** * WxParse.wxParse(bindName，type，data，target，ImagePadding) * 1.bindName绑定数据名(必选)* 2.type可以是html或md(必选)* 3.data是传入的具体数据(必选)* 4.target是Page对象，一般这个(必选)** 5.imagePadding是图片左右适配时的单个填充(默认为0，可选)*/。WxParse.wxParse('article '，' html '，article，that，5)；5.请参考内容页面中的模板文件(。wxml文件)，其中数据中的项目是bindName

导入文件

导入src=' http :/././wx parse/wx parse . wxml '/引用模板

模板为=' wx parse ' data=' { { wx parsedata : article . nodes } } '/完成后，页面可以正常呈现HTML富文本数据

例子

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。