原生微信小程序使用wxParse解析富文本

1. 先在 JS 文件中引入

import wxParse from '../../wxParse/wxParse.js';   写相对路径

2. 获取到 html 字符串后随便赋个值

let str = xxx            //   xxx 即为 获取到的html字符串   str 为自定义名字

3. 使用 wxParse 解码字符串

wxParse.wxParse('str', 'html', str , that, 0);

// 从左到右5个值意义

'str'     --    绑定的数据名 用于HTML页绑定数据            ※必填项

'html'  --    type类型  可选值 html / md                           ※必填项

str      --    data 传入的具体值                                        ※必填项

that    --    当前作用域的this指向                                   ※必填项

0        --    imagePadding为当图片自适应时左右的单一padding (暂时没测出有什么用)(默认0,非必填)

4. 在HTML页中 引入

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

5.在需要使用处加入模板  只需将其中的str 替换为 第三步中的 绑定数据名即可

<template is="wxParse" data="{{ wxParseData:str.nodes }}"></template>

6. 之前的项目没有复杂样式 所以忘了添加样式 

在对应的页面添加样式文件即可

@import '../../wxParse/wxParse.wxss';

 

这样配置完之后应该就可以正常展示了

 

posted on 2022-01-27 13:17  贲风  阅读(398)  评论(0编辑  收藏  举报