在小程序文章页面动态添加广告

这是一项含金量非常高的技能，在页面中动态添加广告，可以增加广告曝光量和提高点击率。

小程序使用 Markdown 来编写文章内容，存储在服务器或者后端对象存储，小程序打开时，会从服务器拉取文章索引，然后展示文章列表页面给用户浏览。当用户点击列表上的某篇文章时，小程序下载该篇文章的 Markdown 内容，并在小程序端使用 towxml 组件进行解析渲染，该组件可以将 Markdown 内容渲染成 WXML 文件内容。

文章页面集成了流量主原生模板广告。起初是在页面顶端显示，直接在 article.wxml 页面顶部添加模板广告代码，就可以集成广告了，非常的简单。当前文章页面布局如下：从上到下广告组件、Markdown 文章内容、页面底部说明。但是当实际上线后，发现这样的广告曝光量虽然非常高，但是页面整体看起来非常的不舒服，不美观。然后将广告位置调整到文章底部，因为文章底部和页面底部之间有自定义内容，广告看起来还比较舒服。当前文章页面布局如下：从上到下 Markdown 文章内容、广告组件、页面底部说明。上线之后，发现实际的曝光量降低了很多，因为很多用户是不会浏览到页面底部的。所以广告也不会曝光。得想想办法。在写公众号时，发现公众号插入到文章中间的广告模式不错。我感觉这是一个不错的方案。可以这样试试。

现在就是如何将广告显示在文章中间。文章内容是使用 towxml 渲染的。比如，将广告显示在第一个段落之后。最初的想法，是查找文章页面的段落 p 元素，然后动态插入广告。根据微信官方文档内容，发现可以使用 wx.createSelectorQuery API，但当实际调试后，发现它无法穿透查询 towxml 生成的内容。然后使用 this.createSelectorQuery，这个是查询组件元素使用的，发现这个确实可以查询组件的元素，也确实查找到了 towxml 生成的内容的顶层元素，但是 towxml 生成的内容是多层嵌套，towxml 下面的组件是 decode，decode 然后再进行嵌套自定义组件。也就是说页面中存在着多个#shadow-root，它用来隔离元素和样式。感觉如果这样的布局使用这种方案行不通了。或者即使实现也非常的复杂，还是需要修改 towxml 组件。

当上面通过查询页面元素行不通后，就得想其它办法。虽然这个方案没有解决问题，但是学到了很多东西，以后在同一个#shadow-root 下的元素查找技能就学会了。本来一直不想动 towxml 库，现在的方案只有修改这个库了，来适配自己的需求。towxml 库的原理如下，解析原始的 Markdown 文件或者 Html 文件生成 AST，然后将 AST 转换成小程序 WXML 标签和结构。这里有两种方法：一种是在解析时处理，生成对应的广告组件；另一种是解析成对象后再插入数据。第一种方法实现后，就可以在 HTML 或 Markdown 文件中加入广告标签，然后 towxml 自动解析。虽然这一种功能看起来更强大，但是我的实际场景不是太适合，我的文章来源 Markdown 内容不一定是我编写，我的小程序只是内容展示平台。所以只能选择第二种方法，这个方法更灵活，可以在解析后的 AST 里插入广告数据，然后在 WXML 页面里根据条件进行渲染。这样用户提交的内容，我不进行修改就可以显示广告。想想还是不错的。

接下来就要考虑如何在 AST 插入数据，以及插入到哪个位置？如何查找段落位置？页面如何显示？我可以修改 towxml 库，以适配广告组件渲染，或者在自己的文章页面进行广告组件渲染。无论使用哪种方法，完整的数据流应该是这样的：Markdown 原始文件 -> Towxml 解析 -> 插入广告节点 -> 绑定广告数据 -> 渲染带广告的 WXML。剩下的内容就是想办法解决渲染广告组件这个问题了。

想要浏览效果，可关注豆子小栈公众号，打开豆子碎片小程序（原名称豆子碎片）查看。