微信小程序同步微信公众号文章已在前文实现:
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白帽子,已开发完成的小程序