月薪 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}}]}