基于云开发的小程序同步公众号文章并用towxml解析html内容（三）

微信小程序同步微信公众号文章已在前文实现：

https://blog.csdn.net/haitaoxiaodian/article/details/90912387

本文中主要实现功能是点击文章列表的一条，然后在另一页展示详细内容，由于请求的文章数据是html格式的，但由于小程序的一些特殊性，无法直接渲染html，因此类似wxParse的开源组件诞生了，无非是穷举标签进行替换，差异在于覆盖是否全面和是否更加高效。本文选自towxml，首先解析比较全面，样式也比较完美，对于公众号花哨的排版基本支持。

如何使用towxml

使用towxml还是比较简单的，网上有很多教程，这里简单说下基于服务端解析、小程序端直接渲染的方式：

首先下载源码，将towxml整个文件夹放到小程序的根目录下。

本次开发点击文章列表进入详情页传入的参数是title,

 getDetial(e){
    let id = e.currentTarget.id;
    wx.navigateTo({
      url: '../detial/detial?id='+id
    });
  }

然后在wxml中引入towxml模板文件：

<!--引入towxml模版入口文件，并使用模版-->
<import src="../../towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

逻辑层实现方式，根据传入的文章标题从云数据库中查询内容，然后用towxml解析成wxml格式文本：

onLoad: function (options) {
    const wxml = new Towxml();
    const db = wx.cloud.database();
    let that = this;
    db.collection('content').where({
      title:options.id
    }).get({
     success:function(res){
       let wen = res.data[0].content;
       wen = wen.replace(/data-src/g, "src");
       wen = wen.replace(/<ul class="code-snippet__line-index code-snippet__js".*?<\/ul>/g, '');
       let ret = wxml.toJson(wen,'html');
       that.setData({
         article:ret
       })
     }
   })
  }

整体解析效果还是不错的

使用towxml遇到的坑

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

在查看解析后的文本json后发现，img的src属性是空的。

再回过头看公众号文章原始的html的时候发现，原始的img标签下的属性都是data-src开始的，难怪无法解析。

<img class="rich_pages" data-ratio="0.4909560723514212" data-s="300,640" data-src="https://mmbiz.qpic.cn/mmbiz_pn

然后发现公众号自带的代码片段样式解析之后也存在问题，截图如下,在代码上方多了很多点，是towxml在解析代码序号的时候生成ul和li标签了，但在样式上没有做好处理。

比较简单的处理方式是解析前将img的data-src属性替换成src,把列表标签<ul><li><li><li></ul>去除掉

 wen = wen.replace(/data-src/g, "src");
 wen = wen.replace(/<ul class="code-snippet__line-index code-snippet__js".*?<\/ul>/g, '');

更多精彩内容，敬请关注我的微信公众号:linux白帽子,已开发完成的小程序