{"id":13601883,"url":"https://github.com/netpi/wechat-layout","last_synced_at":"2026-02-13T03:06:56.432Z","repository":{"id":83303274,"uuid":"271512482","full_name":"netpi/wechat-layout","owner":"netpi","description":"月薪 3W 的 Apple 微信编辑是这么发文章的 |如何发类似 Apple 微信公众号的文章效果","archived":false,"fork":false,"pushed_at":"2020-06-12T03:55:11.000Z","size":11,"stargazers_count":102,"open_issues_count":1,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-04T15:48:28.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netpi.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-06-11T10:02:19.000Z","updated_at":"2025-01-02T03:19:21.000Z","dependencies_parsed_at":"2024-01-14T04:58:23.348Z","dependency_job_id":"36836110-6f04-4c6e-b3be-c8efa3158573","html_url":"https://github.com/netpi/wechat-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fwechat-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fwechat-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fwechat-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fwechat-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netpi","download_url":"https://codeload.github.com/netpi/wechat-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246200296,"owners_count":20739563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T18:01:09.431Z","updated_at":"2026-02-13T03:06:51.406Z","avatar_url":"https://github.com/netpi.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/9gjn3.png)\n\n---\n\n\u003e  **Apple 微信公众号**的排版效果总是让人眼前一亮，精致的细节、酷炫的动画让人不得不佩服 Apple 团队的用心与专业。\n\u003e 经过源码分析后发现，Apple 的微信公众号在排版上用了一些**黑科技**，其中包括了 SVG、Flex Layout、Chrome Inspect 等 Web 前端技术。\n\u003e **我今天就给大家分享下，Apple 微信公众号的效果是如何制作出来的。**\n\n## 效果展示\n我们来看下 iPhone SE 发布的那篇文章的展示效果\n效果图：\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/9i5r1.gif)\n\n## 布局剖析\n\n我们来分析下上面的布局效果：排版共有 5个模块组成。\n我们分别用 A、B、C、D、E 来标记。如下图：\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/86q1k.png)\n排版剖析:\n\n如果你稍懂 CSS，那么实现这样的布局是非常简单的。Apple 用的方式是使用 Flex Layout：\n\n```html\n\u003cdiv style=\"display: flex\"\u003e\n    \u003cdiv style=\"display: flex;width: 50%; flex-direction: column;\"\u003e\n         \u003cdiv style=\"display: block;\"\u003e\n                 \u003c!-- 内容 A --\u003e\n         \u003c/div\u003e\n        \u003cdiv style=\"display: block;\"\u003e\n                \u003c!-- 内容 B --\u003e\n         \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv style=\"display: flex;width: 50%;flex-direction:column;\"\u003e\n\u003c!-- 内容 C --\u003e\n    \u003c/div\u003e\n    \u003cdiv style=\"display: flex;flex-direction:column;\"\u003e\n\u003c!-- 内容 D --\u003e\n    \u003c/div\u003e\n    \u003cdiv style=\"display: flex; flex-direction:column;\"\u003e\n\u003c!-- 内容 E --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n[完整源码](https://github.com/netpi/wechat-layout)\n\n然而，微信官方的内容编辑器并不支持直接编辑 HTML，不过这难不倒我们，我们要使用一些简单的黑科技（后文会说明）就能把代码提交到微信后端，实现 Flex Layout 效果。\n\n## 点击事件、动效\n\n我们发现，Apple 的ABCDE每个模块都有点击事件，然而微信公众号并不支持 JS，那么点击事件是如何添加的的呢？\n其实，Apple 团队采用 `SVG + JPEG/GIF 组合方案` 来给图片增加点击事件和动效的。** 我们来看下效果：\n\n**1，SVG + JPEG + JPEG**\n**完整效果，请用微信扫描文章顶部二维码：**\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/1w8n1.gif)\n\n**2，SVG + JPEG + GIF**\n**完整效果，请用微信扫描文章顶部二维码：**\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/3mxkj.gif)\n\n**3，SVG + GIF + GIF**\n**完整效果，请用微信扫描文章顶部二维码：**\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/hg30g.gif)\n\n之所以可以实现上述效果，是因为我们利用SVG给图片增加了点击事件。由于在 SVG 中 使用  `animate 标签` 可以添加事件，同时 animate 本身就有动画效果， 因此使用SVG，微信文章中的图片就拥有了交互能力。\n\n使用这部分代码时，只需要将图片1、图片2 的URL替换成，你已经上传到微信图库中图片的 URL 即可实现上述效果。\n\n当我们把 JPEG 用 GIF 来代替时，可以组合的效果选择就丰富多了。比如上面演示的 ``SVG + JPEG + GIF` 和 `SVG + JPEG + GIF`。\n\n实现这个效果的主要代码如下：\n```html\n...\n\u003cdiv style=\"display: flex;width: 100%;flex-direction: column;\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" \n          style=\"background-image: \n        url(图片2微信图库URL);\"\u003e\n        \u003canimate attributeName=\"opacity\"begin=\"click\"\u003e\n        \u003c/animate\u003e\n    \u003c/svg\u003e\n    \u003cdiv\n      background-image: \nurl(\u0026quot;图片1微信图库URL\u0026quot;);\"\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n...\n```\n[完整源码](https://github.com/netpi/wechat-layout)\n- - - - - \n\n## 用 Chrome Inspect 提交代码\n\n我们知道，微信公众号的编辑器是不支持直接修改文章 HTML 的。那么我们该如何才能把编辑好的代码提交到微信后台呢？\n这时候我们就要用到 `Chrome Inspect`，对于做前端的同学来说，Chrome Inspect 是调试过程中离不开的工具，它可以直接帮助我们修改前端 HTML 代码。因此提交代码的步骤是：\n1. 用 Chrome 浏览器打开微信公众号的图文编辑器，在文章中随意输入一句话\n2. 右键点击网页空白处，选择 `Inspect` 。\n3. 打开 Inspect 后，用 Inspect 左上角的选择器选中最开始输入的内容，右键点击 \u003cp\u003e 标签，选择 `Edit as HTML`\n4. 贴入代码（Flex 或 SVG），就能看到效果。\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/666cd.jpg)\n\n## Flex Layout + SVG + Chrome Inspect 实现苹果动效\n\n我们了解了 Apple  公众号的效果是如何实现的了，下面那么我们来实践一下。\n\n**完整效果，请用微信扫描文章顶部二维码：**\n\n![](https://chendongze.oss-cn-shanghai.aliyuncs.com/ipic/flm9g.gif)\n\n- - - - - \n为了让大家方便使用，我已经把代码整理好提交到了 Github，点击 [完整源码](https://github.com/netpi/wechat-layout) 即可获得。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetpi%2Fwechat-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetpi%2Fwechat-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetpi%2Fwechat-layout/lists"}