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

[netpi]

---

Apple 微信公众号的排版效果总是让人眼前一亮，精致的细节、酷炫的动画让人不得不佩服 Apple 团队的用心与专业。 经过源码分析后发现，Apple 的微信公众号在排版上用了一些黑科技，其中包括了 SVG 、Flex Layout 、Chrome Inspect 等 Web 前端技术。 我今天就给大家分享下，Apple 微信公众号的效果是如何制作出来的。

效果展示

我们来看下 iPhone SE 发布的那篇文章的展示效果 效果图：

布局剖析

我们来分析下上面的布局效果：排版共有 5 个模块组成。 我们分别用 A 、B 、C 、D 、E 来标记。如下图： 排版剖析:

如果你稍懂 CSS，那么实现这样的布局是非常简单的。Apple 用的方式是使用 Flex Layout：

<div style="display: flex">
    <div style="display: flex;width: 50%; flex-direction: column;">
         <div style="display: block;">
                 <!-- 内容 A -->
         </div>
        <div style="display: block;">
                <!-- 内容 B -->
         </div>
    </div>
    <div style="display: flex;width: 50%;flex-direction:column;">
<!-- 内容 C -->
    </div>
    <div style="display: flex;flex-direction:column;">
<!-- 内容 D -->
    </div>
    <div style="display: flex; flex-direction:column;">
<!-- 内容 E -->
    </div>
</div>

完整源码

然而，微信官方的内容编辑器并不支持直接编辑 HTML，不过这难不倒我们，我们要使用一些简单的黑科技（后文会说明）就能把代码提交到微信后端，实现 Flex Layout 效果。

点击事件、动效

我们发现，Apple 的 ABCDE 每个模块都有点击事件，然而微信公众号并不支持 JS，那么点击事件是如何添加的的呢？ 其实，Apple 团队采用 SVG + JPEG/GIF 组合方案 来给图片增加点击事件和动效的。** 我们来看下效果：

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

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

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

之所以可以实现上述效果，是因为我们利用 SVG 给图片增加了点击事件。由于在 SVG 中 使用 animate 标签 可以添加事件，同时 animate 本身就有动画效果， 因此使用 SVG，微信文章中的图片就拥有了交互能力。

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

当我们把 JPEG 用 GIF 来代替时，可以组合的效果选择就丰富多了。比如上面演示的 ``SVG + JPEG + GIF和SVG + JPEG + GIF`。

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

...
<div style="display: flex;width: 100%;flex-direction: column;">
    <svg xmlns="http://www.w3.org/2000/svg" 
          style="background-image: 
        url(图片 2 微信图库 URL);">
        <animate attributeName="opacity"begin="click">
        </animate>
    </svg>
    <div
      background-image: 
url(&quot;图片 1 微信图库 URL&quot;);">
    </div>
</div>
...

完整源码

---

用 Chrome Inspect 提交代码

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

1. 用 Chrome 浏览器打开微信公众号的图文编辑器，在文章中随意输入一句话
2. 右键点击网页空白处，选择 Inspect 。
3. 打开 Inspect 后，用 Inspect 左上角的选择器选中最开始输入的内容，右键点击

   标签，选择 Edit as HTML

4. 贴入代码（ Flex 或 SVG ），就能看到效果。

Flex Layout + SVG + Chrome Inspect 实现苹果动效

我们了解了 Apple 公众号的效果是如何实现的了，下面那么我们来实践一下。

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

---

为了让大家方便使用，我已经把代码整理好提交到了 Github，点击 完整源码 即可获得**。

如果微信扫码无效，可在微信里打开链接

https://mp.weixin.qq.com/s/qAKqKz9rVJFC7hsJ5GjimA

[huazhu]

👍赞

[stillyu]

apple 牛逼

[macwhirr]

二维码错误。

[netpi]

@macwhirr 奇怪 我测试二维码是好的 微信里打开这个地址也可：

https://mp.weixin.qq.com/s/qAKqKz9rVJFC7hsJ5GjimA

[leoleoasd]

微信公众号的添加文章的 api 是可以直接提交 html 的

[murmur]

让小编震惊的苹果 惊了又惊

[netpi]

@leoleoasd 嗯 用 API 提交是最好的，这样一体化的编辑器目前有么

[chairuosen]

Chrome Inspect ?????? 提交代码？？？？？

[netpi]

@chairuosen
* 用 Chrome Inspect 插入代码
* 然后点击 微信编辑器的 `保存`

[Telegram]

用 chrome 的 F12 提交内容，怎么感觉有点像黑客作风啊，哈哈

[Dogergo]

也就是说他们家的微信编辑其实背地里是个程序员？？？😀

[netpi]

@Dogergo 应该是他们家程序员 下班后顺便兼职个编辑

[Qiss]

会玩。。。3W 值

[netpi]

@Telegram 不会 chrome inspect 都不好意思当编辑

[kergee]

苹果估计有自己公众号后台接入微信后台的，因为本来 API 就支持的。

[rioshikelong121]

我只想问掌握了这个技巧的楼主月薪多少。

[CODEWEA]

牛逼哦，这都被你发现了

[netpi]

@rioshikelong121 哈哈 怎么还不得比苹果编辑高点

[Sngo]

好文干货，赞一个

[kingliang123]

cool，很干货。

[d5]

这个很酷，点个 star

[netpi]

@d5 感谢

[explore365]

微信 6.X 中，二维码无法扫，需要反色

[netpi]

@explore365 原来如此 看来二维码还是白底黑码最稳妥

[jswh]

经常帮一个广告公司做这种特效。这种微信文章特效基本都是 svg，而且还有很多限制，即使是 api 提交也会过滤掉很多关键字非常坑。

[casparchen]

太棒了，原来可以这样啊，我怎么就没想到呢！

[ariza]

cool

[dragonszy]

战略马克。

[chotow]

开发者工具里编辑再提交这个方法，很久之前（忘记什么时候了）被官方「堵」上了一点点—编辑完后，鼠标点击页面，过一秒钟左右编辑器里的内容会被重置回去。不过，只要手速快，还是可以保存的。

[netpi]

@chotow 一秒钟… 这得是什么职业才能达到的手速

[Apple9876]

@jswh 求联系 也需要

[Hades300]

既然 html 被解析。。。那么意味着这里可以 self xss...如果是 hacker 的公众号，意味着可以塞一些淘口令啊等等到用户剪切板里...

[netpi]

@Hades300 微信前端虽然可以提交 但是服务端还是会做防 xss 攻击的

[jswh]

@Apple9876 联系微信 wcaoweijie

[zdb1115]

谢谢 分享