[经验]跳坑《一百五十四》富文本解析：html转为为json或wxml

| 富文本解析是一个困扰无数人的问题，目前网上的解决方案已经比较多了；所以我就简单说明一下，以便大家能够集中参考：

相关文章：
WxParse解决html标签解析烦恼
开发"小程序"中做的一些"转换"的工作：html 转换成 wxml，html 转换成 json
微信小程序试水教程：富文本转文本
微信小程序小技巧《十七》富文本组件wxParse
复杂富文本解析变通实现
显示cms里的html文章
实现html格式内容
wx-mina-html-view: 微信小程序渲染html
实例教程：使用wxParse解析html
后台传回的json数据含有html标签，无法在wxml正确显示
微信小程序小总结：解析xml问题，解析html问题

相关组件：
convert html to wxml.微信小程序html转wxml.
wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown...
微信小程序渲染html
将html文件转为微信小程序用的wxml文件
将html内容转化成wxml可以显示的内容，方便用于小程序中显示
微信小程序html转换成wxml适配微信小程序
微信小程序 HTML Parse：将 HTML 字符串解析成专用标签

相关demo：
微信小程序demo：体育新闻；ifeng网API，htmltowxml，bluebird
微信小程序demo：A岛匿名版：wxParse富文本解析，侧边栏菜
微信小程序学习用Demo：新闻列表（富文本解析）
微信小程序学习用demo：cnode：wxParse富文本解析使用
微信小程序demo推荐：云沃客：富文本解析，模板使用
微信小程序demo：知乎日报：富文本解析，点击加载更多
微信小程序完整demo：游轮中心，富文本解析，包括前后台
微信小程序Demo：广州校园助手（富文本解析）
小程序学习用demo推荐：富文本解析，滑动新闻（适用1221）
微信小程序学习用demo推荐：图片自适应，富文本解析（12.9）
微信小程序demo：新闻阅读器：富文本解析，新闻API
微信小程序demo：jinri，富文本解析

以下讨论均针对wxParse组件：
相关讨论：
绑定的动态输出内容中包含组件标签，结果被原样输出了，怎么解决
{{item.en}}
结果显示成这个样子了

image

看过wxParse.js，但无法实现我的一些自定义功能，所以还要自己打造完成了，有知道的帮忙指点一下哦

小程序不支持js直接渲染wxml

建议仔细阅读wxparse的代码 然后根据wxparse的代码实现自己的功能

相关讨论：
wxParse如何使用列表渲染？wx:for？
现在已经有一个wx:for了，我现在稍微改了一下wxParse，将生成的数据返回，放在之前的数组里，但是并不显示。。

image

image

image

image

找到原因了，应该是wxParseData:item.html.nodes

相关讨论：
Wx.request调用富文本解析出错 |

var WxParse = require('../../wxParse/wxParse.js');
var app = getApp();
Page({
  data: {
    news: {},
  },
  onLoad: function (options) {
    var newsID = options.id;
    var url = "http://******.cn/content.php?id=" + newsID;
    var that = this;
    //util.http(url, this.proccessNewsData);
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        WxParse.wxParse('newstext','html',res.data.newstext,that,5);
      },
      fail: function (error) {
        console.log(error)
      }
    })
  },

出现这个错误

一般是你解析的文本中存在比如 <)这种符号，最近发现有/也不行

相关讨论：
小程序中提示函数没有定义的问题？
在自定义页面中调用，var WxParse = require('../../wxParse/wxParse.js');console.log(WxParse.hxParse());出错:

thirdScriptError
WX.hxParse is not a function;at api request success callback function
TypeError: WX.hxParse is not a function

其中，hxParse()是wxParse.js中自定义的函数，如下：

function hxParse(){
    return 'ok';
}

为什么找不到hxParse函数？好像自定义函数加进去，没什么用，是不是在哪需要编译一下，求教。

在wxParse.js最下面添加：

module.exports = {
wxParse: wxParse,
**HxParse:HxParse,**
wxParseTemArray:wxParseTemArray,
emojisInit:emojisInit
}

附录：****wepy组件化开发之html转换组件（作者：星河阅卷）
- 前言

相信大家在小程序开发时都会遇到需要将html代码转换为在小程序中可以展示的代码的情况，例如：我们在管理后台中通过富文本编辑器中录入公告，需要在小程序中动态展示这些公告，大家都知道，大部分的富文本编辑器编辑的结果要么是html格式的，要么就是md格式的，在我们的小程序中是没办法解析的。故此，我们需要用到一个控件【wxParse】,然而在使用这个控件的时候任然存在着一些不方便的地方，如需要使用wxParse的时候，需要在wxml,js,wxss中都分别引入对应文件，需要跟新内容时每次都需调用一次对应方法转化：

WxParse.wxParse("goodsDesc" , "html", "
示例代码
", this,0);

并且需要在wxml中使用模板：

比较麻烦，不太直观。
综上所述，本人结合wxParse进行二次开发，封装了一个转化html的公共控件，以方便开发者快速转化html代码。

• 实现细节1. 页面部分