V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
netpi
V2EX  ›  分享创造

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

  •  
  •   netpi ·
    netpi · 2020-06-12 11:59:47 +08:00 · 5566 次点击
    这是一个创建于 1386 天前的主题,其中的信息可能已经有所发展或是发生改变。


    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 + GIFSVG + 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,点击 完整源码 即可获得**。

    第 1 条附言  ·  2020-06-12 14:47:21 +08:00
    如果微信扫码无效,可在微信里打开链接

    https://mp.weixin.qq.com/s/qAKqKz9rVJFC7hsJ5GjimA
    35 条回复    2020-06-16 00:45:26 +08:00
    huazhu
        1
    huazhu  
       2020-06-12 12:50:41 +08:00
    👍赞
    stillyu
        2
    stillyu  
       2020-06-12 14:15:20 +08:00
    apple 牛逼
    macwhirr
        3
    macwhirr  
       2020-06-12 14:38:14 +08:00
    二维码错误。
    netpi
        4
    netpi  
    OP
       2020-06-12 14:41:42 +08:00
    @macwhirr 奇怪 我测试二维码是好的 微信里打开这个地址也可:

    https://mp.weixin.qq.com/s/qAKqKz9rVJFC7hsJ5GjimA
    leoleoasd
        5
    leoleoasd  
       2020-06-12 14:42:27 +08:00
    微信公众号的添加文章的 api 是可以直接提交 html 的
    murmur
        6
    murmur  
       2020-06-12 14:44:23 +08:00
    让小编震惊的苹果 惊了又惊
    netpi
        7
    netpi  
    OP
       2020-06-12 14:45:36 +08:00
    @leoleoasd 嗯 用 API 提交是最好的,这样一体化的编辑器目前有么
    chairuosen
        8
    chairuosen  
       2020-06-12 14:48:23 +08:00
    Chrome Inspect ?????? 提交代码?????
    netpi
        9
    netpi  
    OP
       2020-06-12 14:50:01 +08:00
    @chairuosen
    * 用 Chrome Inspect 插入代码
    * 然后点击 微信编辑器的 `保存`
    Telegram
        10
    Telegram  
       2020-06-12 15:05:35 +08:00
    用 chrome 的 F12 提交内容,怎么感觉有点像黑客作风啊,哈哈
    Dogergo
        11
    Dogergo  
       2020-06-12 15:17:59 +08:00
    也就是说他们家的微信编辑其实背地里是个程序员???😀
    netpi
        12
    netpi  
    OP
       2020-06-12 15:21:55 +08:00 via iPhone
    @Dogergo 应该是他们家程序员 下班后顺便兼职个编辑
    Qiss
        13
    Qiss  
       2020-06-12 15:22:27 +08:00
    会玩。。。3W 值
    netpi
        14
    netpi  
    OP
       2020-06-12 15:24:23 +08:00 via iPhone
    @Telegram 不会 chrome inspect 都不好意思当编辑
    kergee
        15
    kergee  
       2020-06-12 15:46:53 +08:00
    苹果估计有自己公众号后台接入微信后台的,因为本来 API 就支持的。
    rioshikelong121
        16
    rioshikelong121  
       2020-06-12 15:52:47 +08:00
    我只想问掌握了这个技巧的楼主月薪多少。
    CODEWEA
        17
    CODEWEA  
       2020-06-12 16:00:31 +08:00
    牛逼哦,这都被你发现了
    netpi
        18
    netpi  
    OP
       2020-06-12 16:04:10 +08:00 via iPhone
    @rioshikelong121 哈哈 怎么还不得比苹果编辑高点
    Sngo
        19
    Sngo  
       2020-06-12 17:13:43 +08:00 via iPhone
    好文干货,赞一个
    kingliang123
        20
    kingliang123  
       2020-06-12 17:27:49 +08:00   ❤️ 1
    cool,很干货。
    d5
        21
    d5  
       2020-06-12 17:31:09 +08:00   ❤️ 1
    这个很酷,点个 star
    netpi
        22
    netpi  
    OP
       2020-06-12 17:42:52 +08:00
    @d5 感谢
    explore365
        23
    explore365  
       2020-06-12 17:49:09 +08:00
    微信 6.X 中,二维码无法扫,需要反色
    netpi
        24
    netpi  
    OP
       2020-06-12 17:51:33 +08:00
    @explore365 原来如此 看来二维码还是白底黑码最稳妥
    jswh
        25
    jswh  
       2020-06-12 17:51:35 +08:00
    经常帮一个广告公司做这种特效。这种微信文章特效基本都是 svg,而且还有很多限制,即使是 api 提交也会过滤掉很多关键字非常坑。
    casparchen
        26
    casparchen  
       2020-06-12 18:13:15 +08:00
    太棒了,原来可以这样啊,我怎么就没想到呢!
    ariza
        27
    ariza  
       2020-06-12 20:13:49 +08:00 via iPhone
    cool
    dragonszy
        28
    dragonszy  
       2020-06-12 20:37:20 +08:00
    战略马克。
    chotow
        29
    chotow  
       2020-06-12 21:06:11 +08:00 via iPhone
    开发者工具里编辑再提交这个方法,很久之前(忘记什么时候了)被官方「堵」上了一点点—编辑完后,鼠标点击页面,过一秒钟左右编辑器里的内容会被重置回去。不过,只要手速快,还是可以保存的。
    netpi
        30
    netpi  
    OP
       2020-06-12 21:08:07 +08:00 via iPhone
    @chotow 一秒钟… 这得是什么职业才能达到的手速
    Apple9876
        31
    Apple9876  
       2020-06-13 01:52:37 +08:00
    @jswh 求联系 也需要
    Hades300
        32
    Hades300  
       2020-06-14 10:11:49 +08:00 via Android
    既然 html 被解析。。。那么意味着这里可以 self xss...如果是 hacker 的公众号,意味着可以塞一些淘口令啊等等到用户剪切板里...
    netpi
        33
    netpi  
    OP
       2020-06-14 13:46:33 +08:00 via iPhone
    @Hades300 微信前端虽然可以提交 但是服务端还是会做防 xss 攻击的
    jswh
        34
    jswh  
       2020-06-15 11:08:39 +08:00
    @Apple9876 联系微信 wcaoweijie
    zdb1115
        35
    zdb1115  
       2020-06-16 00:45:26 +08:00
    谢谢 分享
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5219 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:21 · PVG 15:21 · LAX 00:21 · JFK 03:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.