月薪 3W 的 Apple 微信编辑是这么发文章的 |如何发类似 Apple 微信公众号的文章效果

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ef/efadac11429218c47c0ee6eaa2e200e7.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "},{"type":"text","marks":[{"type":"strong"}],"text":"Apple 微信公众号"},{"type":"text","text":"的排版效果总是让人眼前一亮，精致的细节、酷炫的动画让人不得不佩服 Apple 团队的用心与专业。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"经过源码分析后发现，Apple 的微信公众号在排版上用了一些"},{"type":"text","marks":[{"type":"strong"}],"text":"黑科技"},{"type":"text","text":"，其中包括了 SVG、Flex Layout、Chrome Inspect 等 Web 前端技术。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"我今天就给大家分享下，Apple 微信公众号的效果是如何制作出来的。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"效果展示"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们来看下 iPhone SE 发布的那篇文章的展示效果"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果图："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/79/79a930fd7b3b2760f7f73bc35eab0500.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"布局剖析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们来分析下上面的布局效果：排版共有 5个模块组成。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们分别用 A、B、C、D、E 来标记。如下图："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ca/ca50341f34e3cf38ddc9f47ade07aa7a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"排版剖析:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你稍懂 CSS，那么实现这样的布局是非常简单的。Apple 用的方式是使用 Flex Layout："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n

\n

\n \n

\n

\n \n

\n

\n

\n\n

\n

\n\n

\n

\n\n

\n

"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/netpi/wechat-layout","title":""},"content":[{"type":"text","text":"完整源码"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，微信官方的内容编辑器并不支持直接编辑 HTML，不过这难不倒我们，我们要使用一些简单的黑科技（后文会说明）就能把代码提交到微信后端，实现 Flex Layout 效果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"点击事件、动效"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们发现，Apple 的ABCDE每个模块都有点击事件，然而微信公众号并不支持 JS，那么点击事件是如何添加的的呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其实，Apple 团队采用 "},{"type":"codeinline","content":[{"type":"text","text":"SVG + JPEG/GIF 组合方案"}]},{"type":"text","text":" 来给图片增加点击事件和动效的。** 我们来看下效果："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1，SVG + JPEG + JPEG"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"完整效果，请用微信扫描文章顶部二维码："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/51/51458fa350c3a5b8c3f707c9e6278e63.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2，SVG + JPEG + GIF"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"完整效果，请用微信扫描文章顶部二维码："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/16/164ac5b782ffef9cf669abaee214bac4.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3，SVG + GIF + GIF"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"完整效果，请用微信扫描文章顶部二维码："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f7/f765a80be1a27155b3d2d4175ea0deba.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"之所以可以实现上述效果，是因为我们利用SVG给图片增加了点击事件。由于在 SVG 中 使用 "},{"type":"codeinline","content":[{"type":"text","text":"animate 标签"}]},{"type":"text","text":" 可以添加事件，同时 animate 本身就有动画效果， 因此使用SVG，微信文章中的图片就拥有了交互能力。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用这部分代码时，只需要将图片1、图片2 的URL替换成，你已经上传到微信图库中图片的 URL 即可实现上述效果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当我们把 JPEG 用 GIF 来代替时，可以组合的效果选择就丰富多了。比如上面演示的 `"},{"type":"codeinline","content":[{"type":"text","text":"SVG + JPEG + GIF"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"SVG + JPEG + GIF"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"实现这个效果的主要代码如下："}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"...\n

\n \n

\n

\n

\n..."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/netpi/wechat-layout","title":""},"content":[{"type":"text","text":"完整源码"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"- - - - "}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"用 Chrome Inspect 提交代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们知道，微信公众号的编辑器是不支持直接修改文章 HTML 的。那么我们该如何才能把编辑好的代码提交到微信后台呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这时候我们就要用到 "},{"type":"codeinline","content":[{"type":"text","text":"Chrome Inspect"}]},{"type":"text","text":"，对于做前端的同学来说，Chrome Inspect 是调试过程中离不开的工具，它可以直接帮助我们修改前端 HTML 代码。因此提交代码的步骤是："}]},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"用 Chrome 浏览器打开微信公众号的图文编辑器，在文章中随意输入一句话"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"右键点击网页空白处，选择 "},{"type":"codeinline","content":[{"type":"text","text":"Inspect"}]},{"type":"text","text":" 。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"打开 Inspect 后，用 Inspect 左上角的选择器选中最开始输入的内容，右键点击

标签，选择 "},{"type":"codeinline","content":[{"type":"text","text":"Edit as HTML"}]}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"贴入代码（Flex 或 SVG），就能看到效果。"}]}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/51/51e590e0334f6ae008b715e80dff8b0f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flex Layout + SVG + Chrome Inspect 实现苹果动效"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们了解了 Apple 公众号的效果是如何实现的了，下面那么我们来实践一下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"完整效果，请用微信扫描文章顶部二维码："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9d/9d8709dd981b56e69d9d3756306b5a6f.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了让大家方便使用，我已经把代码整理好提交到了 Github，点击 "},{"type":"link","attrs":{"href":"https://github.com/netpi/wechat-layout","title":""},"content":[{"type":"text","text":"完整源码"}]},{"type":"text","text":" 即可获得**。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}