微信小程序富文本编辑器内容展示

微信小程序富文本编辑器内容展示教程

在平时的信息展示中，我们需要将一篇文章或者博客在小程序里面展示。一般的操作是我们在电脑端对数据进行编辑，里面的话充斥着 html 的代码片段，微信小程序对 html 的代码片段不太支持，这个时候我们可以使用 WxParse 插件对内容进行转换。我们首先需要将 WxParse 插件下载。将 wxParse 文件夹拷贝到和 pages 文件夹相同的目录里面(直接在硬盘上面复制粘贴)。代码结构如下：

15 wxparse_struct.png

案例

我们已经按照文章开头操作，将 wxParse 文件引入进来。新建一个 wxparsedemo 文件夹，并在里面建立 wxparsedemo 的 page 相关文件。在 app.json 文件里面，我们将 wxparsedemo 相关页挪到第一个。代码相关结构如下：

16 富文本编辑器代码结构.png

wxparsedemo.wxml

<import src="../../wxParse/wxParse.wxml" />
<template is="wxParse" data="{{wxParseData:currentContent.nodes}}"></template>

wxparsedemo.js

const WxParse = require("../../wxParse/wxParse.js");
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    WxParse.wxParse('currentContent', 'html', "<html><body><table><tr><td>嗨客网，你好！</td></tr></table></body></html>", this);
  },
  .....
  /**省略自带方法**/
})

执行结果如下:

17 富文本编辑器运行结果.png

在 wxparsedemo.js 文件里面，我们通过 require 将 wxprase 里面需要用到的文件引入。WxParse.wxParse 方法，第一个参数将第三个对应的文本内容转换成该参数，供 wxml 使用。可以看到，我们定义的文本是一个 html 代码段，里面定义了 table 。

在 wxparsedemo.wxml 我们通过 import 将模版文件引入，data 就是赋值操作，我们在 js 里面定义了 currentContent 变量，所以就取 currentContent.nodes 里面的内容。

总结

通过富文本编辑器展示富文本内容，我们需要借助第三方的功能代码。我们需要了解组件和公共方法这两个概念，将第三方的组件和公共方法很好的结合使用。