小程序富文本解析的「伪需求」，从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?整个文件夹放到小程序的根目录下。

然后在?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}}" />

在云函数端，首先安装?towxml?:

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) {
    "";
  }

  let content = await convertPosts(post.data.content,"html");
  //直接赋值towxml解析后的文本
  post.data.content = content;
  console.info(result)
  return post.data
}

/**
 * 转换下程序文章
 * @param {} isUpdate 
 */
convertPosts(content,type) {
  let res
  if (type === 'markdown') {
    res = await towxml.toJson(content || '',0);">'markdown');
  } else {
    res = 'html');
  }
  return res;

}

到这里，文章应该可以正常渲染了，使用起来相对还是比较简单的。

towxml的坑

准确来说是公众号文章的html一些特殊性和复杂性，导致在解析渲染的时候样式上存在一些问题。

首先遇到的问题，图片展示不了，如下截图：

在查看解析后的文本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")

然后发现公众号自带的代码片段样式解析之后也存在问题，截图如下,在代码上方多了很多点。

有了图片不展示的经验，就比较容易定位问题了，应该是towxml在解析代码序号的时候生成?ul?和?li?标签了，但在样式上没有做好处理。

<ul class="code-snippet__line-index code-snippet__js"><li></li></ul>

于是在同步文章的时候也进行一些替换：

)

目前解析过程中还有两个问题不太友好，后期需要尝试解决：

第一个是部分图片依旧不会展示，原因已经定位到，?img?标签之外嵌套了以下?span?标签之后，图片就不会展示「使用新媒体管家进行排版时会出现」

<span style="color:rgba(0,0);">
<"line-height: inherit;margin-right: auto;margin-left: auto;border-radius: 4px;">

另一个是部分解析出来的代码片段没有换行「使用?Md2All?进行样式转换的文章」

总结

但愿小程序后期官方出个比较全面的富文本组件吧，这样可以少绕很多弯路去实现简单的功能。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!