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

微信小程序富文本渲染引擎的详解

程序员文章站 2022-04-09 21:46:55
微信小程序富文本渲染引擎的详解 步骤 把 wxparser 目录放到小程序项目的根目录下 在需要富文本解析的 wxml 内引入 wxparser/inde...

微信小程序富文本渲染引擎的详解

步骤

  • 把 wxparser 目录放到小程序项目的根目录下
  • 在需要富文本解析的 wxml 内引入 wxparser/index.wxml
  • 在页面 js 文件内使用 wxparser.parse(options) 方法解析 html 内容
  • 在小程序项目根目录的 app.wxss 内引入 wxparser 的默认样式库

wxparser.parse(options) 方法的 options 参数说明

参数名 类型 必填 描述
bind string 要绑定的数据名称
html string html 内容
target object 绑定数据的模块对象
enablepreviewimage boolean 是否启用富文本内的图片预览功能,默认是
taplink function 点击超链接时的回调函数

示例

wxml:在需要用到富文本解析的文件夹下的 wxml 中引入 wxparser/index.wxml

// 将 wxml 引入需要富文本解析的文件下
<import src="../../wxparser/index.wxml"/>
<view class="wxparser">
 <template is="wxparser" data="{{wxparserdata:richtext.nodes}}"/>
</view>

js:在需要用到富文本解析的文件夹下的 js 中引入 wxparser 渲染引擎

// 在
const wxparser = require('../../wxparser/index');

page({
 data: {},
 onload: function () {
  let that = this;
  let html = `<div style="color: #f00;">hello, wxparser!</div>`;

  wxparser.parse({
   bind: 'richtext',
   html: html,
   target: that,
   enablepreviewimage: false, // 禁用图片预览功能
   taplink: (url) => { // 点击超链接时的回调函数
    // url 就是 html 富文本中 a 标签的 href 属性值
    // 这里可以自定义点击事件逻辑,比如页面跳转
    wx.navigateto({
     url
    });
   }
  });

 }
})

wxss:在根目录的 app.wxss 内引入 wxparser 的默认样式库

@import '../wxparser/index.wxss'

注意

  • js 中的 richtext 可以自定义,但是必须要与 wxml 中的 richtext 对应
  • 推荐把 template 放到 <view class="wxparser"></view> 内部,这样可以受 wxparser 控制并具有 wxparser 的一些默认样式
  • 不建议直接修改 wxparser 的默认样式(因为内容库样式会有定期更新),应该新增一个样式补丁文件用来自定义样式

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!