微信小程序 - 富文本（解析）-CFANZ编程社区

微信小程序 - 富文本（解析）

前言

解决方案可分为 2 种，使用官方富文本解析组件或第三方（轮子）组件。

一、官方组件

使用官方组件（<rich-text>），易用且不需要引用其他资源（库），

但是仅仅解析一些文字够用，无法解析视频标签等。

<rich-text nodes="{{content}}" />

Page({
	data: {
		// 后台富文本内容(接口获取)
		content: ''
	}
})

二、第三方组件

官方组件无法修改且局限性强，此时推荐使用比较优秀的 wxParse 插件。

第一步，打开 https://github.com/icindy/wxParse/tree/master/wxParse 下载如下图所示文件：

在这里插入图片描述
第二步，下载后，复制到小程序项目中，如下图所示：
路径随意，但后续操作引入依赖文件时，注意更改。
路径随意，但后续操作引入依赖文件时，注意更改。

第三步，打开 app.wxss 文件，设置全局样式，如下代码所示：

@import "./wxParse/wxParse.wxss";

最后，我们来实际搞一下整体代码，假设 index 页面需要解析富文本：

<!-- pages/index/index.wxml -->
<import src="../../wxParse/wxParse.wxml"/>

<!-- 富文本显示的内容区 -->
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
<!-- END -->

Page({
  data: {},
  onLoad: function () {
    var that = this;
    // 假设请求过来数据
    wx.request({
        url: 'xxx', 
        method: 'POST',
        data: { 'id':13 },
        success: (res) => {	
        	// 富文本数据
            var article = res.data[0].post;
            // 调用API解析富文本
            WxParse.wxParse('article', 'html', article, that, 5);
        }
    })
  }
})

WxParse.wxParse API 参数说明如下，具体说明详见文档：

WxParse.wxParse(bindName , type, data, target,imagePadding)

1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

0 条评论