微信上最近奥运会很火很炫的广告是怎么实现的

首先致敬微信团队，再一次引领了移动互联网产品的发展方向，给手机端广告再开了一扇门！

一、广告介绍

不清楚的朋友先看微信团队对这个广告的介绍：朋友圈原生推广页广告随奥运上线

里约奥运第一天，微信广告团队再放大招，新设计了一种广告类型，据说旨在用户能够更愿意去分享。亲测，打开那一刹那，确实很惊艳。下面是展示图片：

作为一个热爱研究的移动开发者，第一印象是，这东西做成广告要怎么实现？

如上图，上面有一个很炫的入场动画，整个页面会展示若干上图片，里面会插入视频，视频会在出现时自动播放，划出后暂停，到最后会有一个可以跳转到具体产品的链接按钮。

之后看了微信放出来的另一个广告demo，和它的区别主要在元素位置、大小、以及最后按钮位置的不同，还有滑动交互的区别，如下图所示：

这个广告有一大区别，就是每个元素都占用一页，滑动弹性切换，而第三页感觉就是一个全景长图，支持根据重力传感器移动看图（酷炫！）。

二、简单分析，以及hook准备

很明显，这个是一个原生开发的页面，而并不是HTML（如果H5能达到这个效果，Native开发就没饭碗了）；但作为一个为广告主使用的页面，那就要能够根据需求灵活展示各种元素，必然需要较好的订制化特性。我脑子里一下想到了React Native，weex，微信是不是也是和这些一样的，通过javascript代码来渲染翻译原生页面展示的呢？下面hook以下微信iOS版，看看到底是怎么做的，这里临时将我可怜的5s越狱了。。。

微信走的socket，直接是tcp协议，如果不知道其加密方式，基本不可能通过拦截请求的方式查看其实现。我这里是通过查看其ui布局，根据objective-c的runtime特性，查看其当前布局中对象的成员变量，反过来猜测其实现方式，不说了，先上图：

上面是其中一个广告的View Hierarchy结构，很明显，这个页面和后面的ViewController在一个堆栈，也就是说，该页面全屏不是通过window并提高层级来实现的，而是用了iOS7后的隐藏status bar的方法，那可能该页面并不支持iOS6。

三、WCCanvasPageViewController

上图可以发现，用于处理广告页面的ViewController类名是WCCanvasPageViewController，Canvas可能就是这个项目的代号吧，猜测包含Canvas的所有名字都是与这类广告相关的。
堆栈底部显示着大大的MMTableView，也就是说，页面整体结构是一个UITableView。

然后研究了下UI层次接口，通过看View Hierarchy也可以发现的，首页动画是通过一个UIImageView和UITableView的第一个Cell共同实现的，尺寸、大小、资源、位置都完全一样，使得欺骗眼睛，以假乱真，如下图所示：

看到这里，还不可以确定这里实现的方案是不是React Native或者weex的方案；不过知道iOS app环境下可以执行的解释语言已知比较好的就只有javascript，其它的语言例如lua在支持都需要一些代码库的支持，在有js的情况下，其它语言基本已经被放弃了。

如果假设采用的是js来实现，那只需要在相关的WCCanvasPageViewController中找到大量以js或者jsexecutor或者jscontext等命名的方法或者常量即可，当然，最好是能直接找到ui代码，那就铁证如山了。

下面开始浏览WCCanvasPageViewController类：

• 1、m_FirstViewToAnimate 用于头部动画显示 —> 这个view其实就是头部图片，估计还兼顾一些动画相关的处理
• 2、未能发现任何与js或者javascript相关的命名
• 3、从名字就完全能看的出来关键信息肯定都在一个名字叫做m_advertiseInfo的对象当中，事实上，关于广告的所有model层数据都在其中。这其中的字段太多了，不是很熟悉微信广告的业务，也就无法猜测这里面都是什么意思。
• 4、由于当前页面叫WCCanvasPageViewController，前文说了，canvas应该就是这个项目的代号，所以m_advertiseInfo里面一个名字叫做adCanvasInfo的必然是这个页面渲染的关键。

四、重中之重—“adCanvasInfo”

好，下面查看它的信息：

• shareTitle:”就是这个广告的标题”
• shareDesc:”广告的一些介绍”
• shareWebUrl:”广告试试上的分享链接，亲测在不支持的版本会直接跳转该url的h5进行广告展示”
• sizeType:1 —- 不明白什么意思，应该与样式有关
• baseWidth:750 —- 不太懂用在那里了
• adCanvasPageList –> 一个数组，这个好像就是用于分页显示的数组，也就是page分页吧，处理滑动的惯性的，如果页面如果没有分页，那数组里面只有一个对象，事实上，一切都来自于下面的xml。
• fromAdXml — 一段xml，最最关键的信息来了，整个页面的meta data都在这里面！

由于知道微信消息的数据交换格式就是xml，很自然的，就能确信这个就是数据存放的地方。

仅仅知道采用xml还不能确定渲染方案，需要浏览xml，如果其中不包含样式相关信息，还需要理解其内部的含义，下面就贴出来这两个广告的xml信息：

1、伊利牛奶广告元信息

 -6114390104925202608  1600004088|wx0oghes5zhpmn4y||0|1470527748伊利牛奶01查看详情http://as.weixin.qq.com/cgi-bin/redirect?tid=1601557011918989427广告廣告Sponsored赞助商提供的广告信息贊助商提供的廣告信息Sponsored storyclassify_zh_CN电器classify_zh_TW電器classify_enappliancenickname_zh_CNnickname_zh_TWnickname_en17000016661371安慕希17501他会让世界好看，你看好吗？靠颜值可以霸屏的我涛，要去称霸全宇宙了。http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLWWCd9cegRJ46W3BlEIrz5A/0http://mp.weixin.qq.com/tp/ad_detail_info?page_key=95264e7fa44c6cd90e55334350d4e560e0acde652c42b567fe3759cbd644983dc171ff853248263e068cb034dd9c0be9#ffffffhttp://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFxdZnUt8WSEQqibXtkwXplHQ/0938750000041图11371_3015_41http://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFLL5prEEujnDa0v0ANaBiaWw/0396750000041图21371_3016_41#000000http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30270201010420301e0201690402534804100fe55d4d35540737a214d99e1721636002036d43de0400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024ef202031e8d7f02030f42400204045a320a02010004000http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30280201010421301f020200960402534804106ed93afac5f3924bd8f6f6666917470c0203016a870400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024f1a02031e8d7f02030f42400204045a320a02010004006401138000062视频11371_3017_62#000000http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLZ1s7PbTjWlwjmxnyqk5QXA/044全景11371_3018_44#ffffffhttp://mmsns.qpic.cn/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFdQz4tNnibpxfbJ0XbzDsRlQ/0736750000041图31371_3019_41http://mmsns.qpic.cn/mmsns/olticmAYicoM8aSeQibcyTFYR5BQx2zibXaoZWyQy8uUlbQAIm116KkSRw/0301750000041图41371_3020_41立即加入30#ffffffhttp://yili.cici6.com/201608/main.html0078#004DA1#004DA110020520521按钮11371_3021_21

2、Nike广告元信息

NIKE01查看详情http://as.weixin.qq.com/cgi-bin/redirect?tid=1601569011110914615广告廣告Sponsored赞助商提供的广告信息贊助商提供的廣告信息Sponsored storyclassify_zh_CNclassify_zh_TWclassify_ennickname_zh_CNnickname_zh_TWnickname_en17000023642566nike其他城市17501嘿，今天该你上场了！没错，就是你！立即一探究竟http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wrylT8DKZaj06bg9sbRzSbw/0http://mp.weixin.qq.com/tp/ad_detail_info?page_key=5b6cddf2c33149ccf8692fb1a3dde13a63e56cd068fd9d5e65c22f692fb134f3fbc37fb96e77abbf502ec59ca87ddfc4#ffffffhttp://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wpEw5ySjbksLJiaAqcdeWicXw/0750750000041头图2566_2832_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wX2aMkzC0zeoWEEVJRfZWdQ/0448750000041文本1-12566_2833_41http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f02016904025348041022c56408ca857868ae7e28d5ca2457f50204011d47340400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024ef202031e8d7f02030f42400204045a320a02010004001http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30270201010420301e02020096040253480410ee035de565a944eabf9145f8098ecc7a020231130400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024f1a02031e8d7f02030f42400204045a320a0201000400750421.875000062流媒体视频2566_2834_62http://mmsns.qpic.cn/mmsns/gFuZJlqxR6eX7uHPR8P04tkiakghyIj02xL4nxRaThSt4vDdttU8XZA/0354750000041文案22566_2835_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXXZibicqiaw9t7KMVsWZe0zMg/01334750000041长图12566_2836_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkIV7oAFquic7wHjBt24qHTUw/01334750000041长图22566_2837_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkx3Abdic8QWHClsasGBdYbRA/01334750000041长图32566_2838_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkuouM2ZUaRVPKYN4eDCvAEw/01334750000041长图42566_2839_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkGZG8yw8dW0kDhfVEfSMP1g/01334750000041长图52566_2840_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fk8g4sjFQnuelkgysLQpVXAw/01334750000041长图62566_2841_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXdbibibUsMwqOt13Wcyqns3w/01505750000041长图72566_2842_41http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dibv6ICjLoMb5qyAosI4ian1A/07287500400041图片32566_2843_41立即上场30#000000http://m.nike.com/cn/zh_cn/c/justdoit/national?cp=cn_brom_080616_u_GEN_AL_OLP_nwc_LM_02_SP_GC0280#ffffff#000000102015015021按钮2566_2844_21http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dd799WvreUsibkibiaEh19p1lQ/039275040500041图片42566_2845_4112334591275321071424  1600004109|wx0vl72zluinqfpw||0|1470415303 

五、结论

看了xml，再对比下UI效果，基本就确定了，整个xml里面就是一段tableview的元信息，可以认为，该广告只支持tableview的展示，也就是说：

客户端订好若干模板，tableview的每一个cell是一个模板，广告主去组合这个即可

不得不说，这里很有想象力！

其中，最后用于广告主效果跳转的button竟然也是一个cell，通过xml字段来看，这个位置会限制广告主的发挥，因为该cell背景只能用纯色！

最后，我们看看这一波广告支持多少种模板的组合方式：

上图所有以WCCanvasComponent开头的，都是能支持的模板，字面上大多数能看明白意思：有意思的是视频竟然包含流媒体和小视频两种，有一个WebViewInfo可能预示着这里必要的时候某些模块可以load一段网页进行展示。。。

六、简单的优缺点分析，以及Android

好吧，整个分析都完事了，可以确信微信广告团队采用的技术方案了。

这种技术方案的好处在于完全可控，客户端在定制化过程中能最大化的提高流畅度和性能，传输协议也能兼容微信现有的消息方式，通过模块组合也能过实现广告主非常好的定制化。

缺陷在于毕竟所有功能样式都依赖于客户端版本支持，虽然会有很多好玩的样式，但毕竟有限，最终广告主的创意发挥也会受限，不过手机端的广告受限于屏幕宽度，能展示的创意本身也不是很多，微信广告团队的这种方案几乎可以cover主所有主流创意了。

无论如何，这种广告方式都是一个非常了不起的发明，可以确信，app端广告将正式进入原生时代！

被遗忘的Android

上面说了这种实现方式一大优势就是兼容性好，直接支持现有的微信消息协议，所以Android端在获取广告元信息必然也是消息传输过来的xml信息，无非渲染方式不一样而已。可以猜测，应该也仅仅是listview中组了一些原生组建吧。不过由于android中屏幕千奇百怪，各种ROM的碎片化订制，Android在实现分页弹性滑动和全景图片展示会遇上更多的坑。（亲测确实很多地方不尽如人意）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！