微信小程序解析渲染Web App中的富文本内容

前提：微信小程序里面没有DOM对象，不能直接操作DOM。

问题：在日常的web前端开发中，必然会接触到富文本编辑器，如何在小程序里展示渲染富文本编辑器中的HTML元素呢？

测试内容：wangEditor富文本编辑器

解决方案：

     1、小程序自带富文本组件

具体文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

 

具体用法：

1、wxml中直接使用【rich-text】标签

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

2、对应的js文件中绑定数据

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    noticeDesc: ''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let data = '<h1>大标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><p>正文内容&nbsp; 我是<span style="font-weight: bold;">加粗，我是</span><span style="font-weight: bold; font-style: italic;">斜体，</span><span style="font-weight: bold;">我是</span><span style="font-family: 宋体;"><span style="font-weight: bold;">宋体</span>，我有<span style="text-decoration-line: underline;">下标线</span>，我有<span style="text-decoration-line: line-through;">中划线</span>，我的颜色是<span style="color: rgb(249, 150, 59);">黄色</span></span></p><p><span style="font-family: 宋体;"><span style="background-color: rgb(249, 150, 59); color: rgb(0, 0, 0);">我的背景色是黄色</span></span></p><p><ol><li><span style="font-family: 宋体; color: rgb(0, 0, 0);">列表1</span></li><li><span style="font-family: 宋体; color: rgb(0, 0, 0);">列表2</span></li></ol><div><ul><li><span style="color: rgb(0, 0, 0); font-family: 宋体;">无序列表1</span></li><li><span style="color: rgb(0, 0, 0); font-family: 宋体;">无序列表2</span></li></ul><div style="text-align: right;"><span style="color: rgb(0, 0, 0); font-family: 宋体;">啊啊啊，我是右对齐</span></div></div><div style="text-align: center;">啊啊啊，我是中间对齐&nbsp;<br></div><div style="text-align: left;">啊啊啊，我是左对齐&nbsp;<br></div><blockquote style="text-align: left;">我是代码引用</blockquote><blockquote style="text-align: left;">i am js language</blockquote><p style="text-align: left;"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"><br></p><p style="text-align: left;"><img src="//ehrhz.lunz.cn/ehr/2020/11/09/guangzi.JPG" style="max-width:100%;"><br></p></p>';
    this.setData({ noticeDesc: data })
  }
})

3、效果

2、wxParse插件解析

wxParse地址：点我

1、下载wxParse到项目中

2、在项目中引入全局样式和js文件

3、wxml中的引入和使用

<!-- 务必把这一行引入放到条件渲染之外 -->
<import src="/components/wxParse/wxParse.wxml" />

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

4、对应js文件中的使用

import api from '../../../utils/api.js'
const WxParse = require('../../../components/wxParse/wxParse')
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    noticeDesc: ''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let data = '<h1>大标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><p>正文内容&nbsp; 我是<span style="font-weight: bold;">加粗，我是</span><span style="font-weight: bold; font-style: italic;">斜体，</span><span style="font-weight: bold;">我是</span><span style="font-family: 宋体;"><span style="font-weight: bold;">宋体</span>，我有<span style="text-decoration-line: underline;">下标线</span>，我有<span style="text-decoration-line: line-through;">中划线</span>，我的颜色是<span style="color: rgb(249, 150, 59);">黄色</span></span></p><p><span style="font-family: 宋体;"><span style="background-color: rgb(249, 150, 59); color: rgb(0, 0, 0);">我的背景色是黄色</span></span></p><p><ol><li><span style="font-family: 宋体; color: rgb(0, 0, 0);">列表1</span></li><li><span style="font-family: 宋体; color: rgb(0, 0, 0);">列表2</span></li></ol><div><ul><li><span style="color: rgb(0, 0, 0); font-family: 宋体;">无序列表1</span></li><li><span style="color: rgb(0, 0, 0); font-family: 宋体;">无序列表2</span></li></ul><div style="text-align: right;"><span style="color: rgb(0, 0, 0); font-family: 宋体;">啊啊啊，我是右对齐</span></div></div><div style="text-align: center;">啊啊啊，我是中间对齐&nbsp;<br></div><div style="text-align: left;">啊啊啊，我是左对齐&nbsp;<br></div><blockquote style="text-align: left;">我是代码引用</blockquote><blockquote style="text-align: left;">i am js language</blockquote><p style="text-align: left;"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png" alt="[坏笑]" data-w-e="1"><br></p><p style="text-align: left;"><img src="//ehrhz.lunz.cn/ehr/2020/11/09/guangzi.JPG" style="max-width:100%;"><br></p></p>';
    /**
    * 方法说明
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName绑定的数据名(必填)
    * 2.type可以为html或者md(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    */
    WxParse.wxParse('noticeDesc', 'html', data, this, 5)
  }
})

5、效果

总结：同样的数据，这两种方式都是可以实现渲染，效果颇有差异。针对以上测试数据，各有优劣：

           官方<rich-text>富文本标签无法正常渲染引用标签

           使用wxparse在PC端在开发者工具中有卡顿，较为明显

           各位看官还请各取所需！