精选

这是一个少数民族写作社区。 我们提倡分享真实的产品体验、实践经验和想法。 我们会不定期精选最优质的文章，展示用户最真实的体验和意见。

文章仅代表作者个人观点，少数方仅对标题和格式稍作修改。

“微信公众号”的版面效果总是引人注目。 精致的细节和炫酷的动画让人不得不佩服团队的敬业和专业精神。

经过源码分析发现，微信公众号在排版方面使用了一些黑科技，包括SVG、Flex等Web前端技术。 今天给大家分享一下如何打造微信公众号效果。

显示结果

我们来看看SE发表的文章的显示效果图：

布局分析

我们来分析一下上面的布局效果： 排版由5个模块组成。 我们分别用 A、B、C、D 和 E 来标记它们。 如下所示：

排版分析：

如果您对 CSS 了解一点，实现这样的布局非常简单。 实现的方法是使用 Flex：

完整源代码

不过，微信官方的内容编辑器并不支持直接编辑HTML，但这并不困扰我们。 我们得用一些简单的黑科技（后面会解释）将代码提交到微信后台才能实现Flex的效果。

点击事件、动画

我们发现每个模块都有一个点击事件。 但是微信公众号不支持JS，那么点击事件如何添加呢？ 事实上，团队使用 SVG + JPEG/GIF 组合解决方案为图像添加点击事件和动画。 我们看一下效果：

如需SVG+JPEG+JPEG的完整效果，请使用微信扫描文章顶部二维码：

如需SVG+JPEG+GIF的完整效果，请使用微信扫描文章顶部二维码：

如需SVG+GIF+GIF的完整效果，请使用微信扫描文章顶部二维码：

之所以能达到上面的效果，是因为我们使用SVG给图片添加了点击事件。 由于在SVG中可以使用标签来添加事件并具有动画效果，因此微信文章中的图片具有使用SVG的交互能力。

使用这部分代码时，只需要将图1和图2的URL替换为你已经上传到微信图库的图片的URL即可实现上述效果。

当我们用GIF代替JPEG时，可以组合的效果选择变得更加丰富。 例如，上面演示的 SVG + JPEG + GIF 和 SVG + JPEG + GIF。

实现该效果的主要代码如下：

...

...

完整源代码

提交代码

我们知道微信公众号的编辑器不支持直接修改文章的HTML。 那么我们如何将编辑好的代码提交到微信后台呢？ 这个时候我们就要用到它了。 对于前端同学来说，是调试过程中不可或缺的工具。 它可以直接帮助我们修改前端HTML代码。 所以提交代码的步骤是：

使用浏览器打开微信公众号的图文编辑器，在文章中输入一句话，在网页空白处右键，选择。打开后，使用左上角的选择器选择第一个输入内容，然后右键

标签，选择编辑为 HTML

粘贴代码（Flex 或 SVG）并查看效果。

Flex + SVG + 实现动态效果

既然我们了解了公众号的效果是如何实现的，那么我们就来实践一下吧。

完整效果请使用微信扫描文章顶部二维码：

为了方便大家使用，我把代码整理了一下，提交到了。 点击获取完整源代码。

> 下载少数派客户端，关注少数派公众号，了解美好数字生活

> 想申请成为少数族裔作家吗？ 匆忙！