嗨客网搜索
微信小程序富文本编辑器内容展示

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

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

15 wxparse_struct.png

案例

我们已经按照文章开头操作,将 wxParse 文件引入进来。新建一个 wxparsedemo 文件夹,并在里面建立 wxparsedemopage 相关文件。在 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 文件里面,我们通过 requirewxprase 里面需要用到的文件引入。WxParse.wxParse 方法,第一个参数将第三个对应的文本内容转换成该参数,供 wxml 使用。 可以看到,我们定义的文本是一个 html 代码段,里面定义了 table

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

总结

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

嗨客网顶部