K线密码 · 笔记

为什么我把公众号文章搬进了小程序

· 工具小程序

公众号写了几十篇之后,最大的问题是旧的找不回来。读者想翻一篇半年前的文章,
得在对话框里一直往上滑,翻到手酸。所以我做了个小程序,把自己的历史文章放进去。

平台给的路,基本都封死了

先花了半天时间确认可行性,结论挺打击人的:

  • 个人主体小程序不支持 web-view,没法直接内嵌公众号原文
  • 公众号的历史文章列表接口(freepublish 系列)对个人主体已经回收
  • 小程序直连 mp.weixin.qq.com 也不行 —— 非自有域名进不了 request 白名单,而且公众号图片有 referer 防盗链

四条路,四条堵死。那就换思路:公众号只当发布渠道,内容自己存。

内容自持 + 小程序当阅读器

公众号发文 → 导出 HTML → 本地解析 → 存成结构化数据 → 小程序读

这么做有三个好处:

  1. 不受平台接口变动影响 —— 数据在自己手里
  2. 搜索、合集、离线阅读都能自己实现
  3. 历史内容固化下来,不会哪天被平台清理

踩到的坑(都是真坑)

一、rich-text 只认网络图片

官方文档里一行小字:img 标签仅支持网络图片。本地路径的图片在真机上不渲染。

解法是把正文拆成「文字块 + 图片块」交替:文字交给 <rich-text>,图片交给 <image>。
含图的 <section> 要递归拆成多份副本,保证图片落在顶层。

二、元素节点必须显式写 type: 'node'

rich-text 的 nodes 规范要求元素节点声明类型。我最初只给文本节点写了 type: 'text',
根节点因为在拆块时补过所以看起来正常 —— 内层的 p、table、li 全缺。
表层完全看不出来,真机上正文可能整段塌掉。

这种 bug 靠肉眼看产物是发现不了的,只能靠另写一个校验脚本去扫。

三、图片路径必须是绝对路径

页面在 pXX/pages/detail/ 下面,存相对路径 img/x.webp 会解析到错误位置。
构建脚本自报「正常」,独立校验才发现。

最后

这套东西写完,最值得说的反而不是代码,而是「另写一个只读产物的校验脚本」这个习惯。
这个项目里它一共抓到了三个构建脚本自己发现不了的真 bug。

← 返回列表