小程序富文本解析的「伪需求」，从wxParse到towxml的坑
小程序富文本解析的「伪需求」，从wxParse到towxml的坑
在进入正题之前想先聊聊「伪需求」这三个字。
其实有很多场景会用到富文本框「通常后台维护一长串html文本，前台进行渲染展示」。但由于小程序的一些特殊性，无法直接渲染html，因此类似wxParse的开源组件诞生了「原理无非是穷举标签进行替换，差异在于覆盖是否全面和是否更加高效」
在小程序刚出来的时候，富文本的问题也一直被吐槽，直到web-view的出现「承载网页的容器。会自动铺满整个小程序页面」。小程序终于可以「直接」渲染网页了，很多公司也利用这一点，很多页面都直接采用H5的方式开发，嵌套进小程序中。
然而比较悲催的是web-view有个限制：个人类型与海外类型的小程序暂不支持使用。
文档截图
所以对于个人开发的小程序来说，依旧需要依赖类似wxParse的开源组件。
wxParse还是towxml
在基于ghost的博客小程序中，我用的是wxParse，截止到发文该项目已有6071个star，很多教程也是基于wxParse的，但作者似乎已经弃坑了，两年多没有再进行迭代了，所以该组件也存在很多问题。
自己的项目也是在wxParse基础之上进行了很多改动。
所以在开发新版的小程序时候果断找个替换它，可惜的是目前这类的开源组件不多「比较小众吧，只有个人开发者才会用吧」，比较之后发现还是towxml最佳。首先解析比较全面，样式也比较完美，对于公众号花哨的排版基本支持「只能是基本，后面会说到坑」。另外一点支持服务端解析「云函数可以利用起来」。
唯一遗憾的是，体积还是比较大的，后面功能完善后打算看下它的源码进行相应的瘦身。
如何使用towxml
使用towxml还是比较简单的，网上有很多教程，这里简单说下基于服务端解析、小程序端直接渲染的方式：
首先下载源码，将towxml整个文件夹放到小程序的根目录下。
项目截图1
然后在app.js中引入并初始化：
const Towxml = require('/towxml/main');
App({
onLaunch: function () {
...
},
towxml:new Towxml(),
checkUserInfo: function(cb) {
...
},
globalData: {
openid: "",
userInfo: null
}
})接着在需要使用的地方引入模板，比如我的detail.wxml下：
<import src="/towxml/entry.wxml" />
//post.content是解析后的文本
<template is="entry" data="{{...post.content}}" />npm install towxml然后申明后直接进项解析，代码如下：
/**
* 获取文章明细
* @param {} id
*/
async function getPostsDetail(event) {
let post = await db.collection("mini_posts").doc(event.id).get()
if (post.code) {
return "";
}
if (!post.data) {
return "";
}
let content = await convertPosts(post.data.content, "html");
//直接赋值towxml解析后的文本
post.data.content = content;
console.info(result)
return post.data
}
/**
* 转换下程序文章
* @param {} isUpdate
*/
async function convertPosts(content, type) {
let res
if (type === 'markdown') {
res = await towxml.toJson(content || '', 'markdown');
} else {
res = await towxml.toJson(content || '', 'html');
}
return res;
}
首先遇到的问题，图片展示不了，如下截图：
项目截图2
在查看解析后的文本json后发现，img的src属性是空的。
再回过头看公众号文章原始的html的时候发现，原始的img标签下的属性都是data-src开始的，难怪无法解析。
<img class=""
data-ratio="2.1638888888888888" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/ibT18LpyNmXqYXfbcbQ7N4kIeJYWSEzDHMDwmbNMUBvaRP7U2zwib9ladYZ2v5mZ1rLRFP2NnCtEuPzs3ibrsKqGQ/640?wx_fmt=jpeg"
data-type="jpeg" data-w="1080"title="image">水平不够无法改towxml的源码，只能在同步文章的时候做下手脚,将data-src替换成src
//替换图片data-url
content=content.replace(/data-src/g,"src")然后发现公众号自带的代码片段样式解析之后也存在问题，截图如下,在代码上方多了很多点。
项目截图3
有了图片不展示的经验，就比较容易定位问题了，应该是towxml在解析代码序号的时候生成ul和li标签了，但在样式上没有做好处理。
<ul class="code-snippet__line-index code-snippet__js"><li></li></ul>于是在同步文章的时候也进行一些替换：
//移除公众号代码片段序号
let content=content.replace(<ul class="code-snippet__line-index code-snippet__js".*?<\/ul>/g,'')目前解析过程中还有两个问题不太友好，后期需要尝试解决：
第一个是部分图片依旧不会展示，原因已经定位到，img标签之外嵌套了以下span标签之后，图片就不会展示「使用新媒体管家进行排版时会出现」
<span style="color:rgba(0, 0, 0, 0);">
<span style="line-height: inherit;margin-right: auto;margin-left: auto;border-radius: 4px;">另一个是部分解析出来的代码片段没有换行「使用Md2All进行样式转换的文章」