Apple 公眾 內(nèi)容 微信 排版 效果 源碼

蘋果編輯告訴你如何做出 Apple 微信公眾號(hào)級(jí)別的好文章排版

Mac玩兒法編輯部 · 2020-06-15

Apple 微信公眾號(hào)的排版效果總是讓人眼前一亮，精致的細(xì)節(jié)、酷炫的動(dòng)畫讓人不得不佩服 Apple 團(tuán)隊(duì)的用心與專業(yè)。 經(jīng)過(guò)源碼分析后發(fā)現(xiàn)，Apple 的微信公眾號(hào)在排版上用了一些黑科技，其中包括了 SVG 、Flex Layout 、Chrome Inspect 等 Web 前端技術(shù)。 我今天就給大家分享下，Apple 微信公眾號(hào)的效果是如何制作出來(lái)的。

效果展示

我們來(lái)看下 iPhone SE 發(fā)布的那篇文章的展示效果 效果圖：

布局剖析

我們來(lái)分析下上面的布局效果：排版共有 5 個(gè)模塊組成。 我們分別用 A 、B 、C 、D 、E 來(lái)標(biāo)記。如下圖：

排版剖析:

如果你稍懂 CSS，那么實(shí)現(xiàn)這樣的布局是非常簡(jiǎn)單的。Apple 用的方式是使用 Flex Layout：

<div style="display: flex">
    <div style="display: flex;width: 50%; flex-direction: column;">
         <div style="display: block;">
                 <!-- 內(nèi)容 A -->
         </div>
        <div style="display: block;">
                <!-- 內(nèi)容 B -->
         </div>
    </div>
    <div style="display: flex;width: 50%;flex-direction:column;">
<!-- 內(nèi)容 C -->
    </div>
    <div style="display: flex;flex-direction:column;">
<!-- 內(nèi)容 D -->
    </div>
    <div style="display: flex; flex-direction:column;">
<!-- 內(nèi)容 E -->
    </div>
</div>

完整源碼

然而，微信官方的內(nèi)容編輯器并不支持直接編輯 HTML，不過(guò)這難不倒我們，我們要使用一些簡(jiǎn)單的黑科技（后文會(huì)說(shuō)明）就能把代碼提交到微信后端，實(shí)現(xiàn) Flex Layout 效果。

點(diǎn)擊事件、動(dòng)效

我們發(fā)現(xiàn)，Apple 的 ABCDE 每個(gè)模塊都有點(diǎn)擊事件，然而微信公眾號(hào)并不支持 JS，那么點(diǎn)擊事件是如何添加的的呢？ 其實(shí)，Apple 團(tuán)隊(duì)采用 SVG + JPEG/GIF 組合方案 來(lái)給圖片增加點(diǎn)擊事件和動(dòng)效的。** 我們來(lái)看下效果：

1，SVG + JPEG + JPEG 完整效果，請(qǐng)用微信掃描文章頂部二維碼：

2，SVG + JPEG + GIF 完整效果，請(qǐng)用微信掃描文章頂部二維碼：

3，SVG + GIF + GIF 完整效果，請(qǐng)用微信掃描文章頂部二維碼：

之所以可以實(shí)現(xiàn)上述效果，是因?yàn)槲覀兝?SVG 給圖片增加了點(diǎn)擊事件。由于在 SVG 中 使用 animate 標(biāo)簽 可以添加事件，同時(shí) animate 本身就有動(dòng)畫效果， 因此使用 SVG，微信文章中的圖片就擁有了交互能力。

使用這部分代碼時(shí)，只需要將圖片 1 、圖片 2 的 URL 替換成，你已經(jīng)上傳到微信圖庫(kù)中圖片的 URL 即可實(shí)現(xiàn)上述效果。

當(dāng)我們把 JPEG 用 GIF 來(lái)代替時(shí)，可以組合的效果選擇就豐富多了。比如上面演示的 “SVG + JPEG + GIF和SVG + JPEG + GIF`。

實(shí)現(xiàn)這個(gè)效果的主要代碼如下：

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

完整源碼

用 Chrome Inspect 提交代碼

我們知道，微信公眾號(hào)的編輯器是不支持直接修改文章 HTML 的。那么我們?cè)撊绾尾拍馨丫庉嫼玫拇a提交到微信后臺(tái)呢？ 這時(shí)候我們就要用到 Chrome Inspect，對(duì)于做前端的同學(xué)來(lái)說(shuō)，Chrome Inspect 是調(diào)試過(guò)程中離不開的工具，它可以直接幫助我們修改前端 HTML 代碼。因此提交代碼的步驟是：

  1. 用 Chrome 瀏覽器打開微信公眾號(hào)的圖文編輯器，在文章中隨意輸入一句話
  2. 右鍵點(diǎn)擊網(wǎng)頁(yè)空白處，選擇 Inspect 。
  3. 打開 Inspect 后，用 Inspect 左上角的選擇器選中最開始輸入的內(nèi)容，右鍵點(diǎn)擊標(biāo)簽，選擇 Edit as HTML
  4. 貼入代碼（ Flex 或 SVG ），就能看到效果。

Flex Layout + SVG + Chrome Inspect 實(shí)現(xiàn)蘋果動(dòng)效

我們了解了 Apple 公眾號(hào)的效果是如何實(shí)現(xiàn)的了，下面那么我們來(lái)實(shí)踐一下。

本文轉(zhuǎn)載自微信公眾號(hào)「東澤聊技術(shù)」文章《月薪 3W 的 Apple 微信編輯是這么發(fā)文章的 |如何發(fā)類似 Apple 微信公眾號(hào)的文章效果》

Apple 公眾 內(nèi)容 微信 排版 效果 源碼
評(píng)論