&这支特别的奥运宣传片仅30秒，却燃爆了！
这支特别的奥运宣传片仅30秒，却燃爆了！
日10时26分来源：
▲ 轻点视频，观看宣传片
你会成为伟大的人，你能做到最好
你能像金刚一样自信满满地敲打胸膛
你会成为英雄，你能赢得金牌
打破那些别人认为牢不可破的纪录
你可以举起双手，你可以战胜时间
你可以移动山峦，你可以击碎岩石
为你的国家而战，为你的荣誉而战
因为终有一天，你将身处名人堂
这首来自手稿乐队（The Script）的歌曲《Hall of Fame》，被一位小男孩重新演绎，折射出许多人自小就决心为之奋斗的梦想，燃爆了！就连奥运冠军田亮也在微博上转发了这支宣传片，以“运动精神不仅停留在对奖牌的追求，顽强拼搏、超越自己才是最大的奖励”来诠释他对于梦想的理解。
你儿时的梦想是什么？当宇航员遨游太空？作为建筑师打造新兴城市？还是成为政治家游说世人？梦想，是矢志不移的初心，无限激发我们的潜能，不断突破自我，改变世界。
在获得众多奖牌的肯定之前，这个男孩曾梦想拔得头筹。
他就是奥运史上受到最多奖牌认可的运动员迈克尔·菲尔普斯。他渴望成功，永不放弃，终于实现了自己的梦想。
在点亮伦敦之前，这个女孩曾梦想着成功。
她就是世界一流的七项全能名将杰西卡·恩尼斯。对田径的热爱加上辛勤的努力，她终于为自己的梦想交上了满意的答卷。
每一名优秀的运动员都有一个毕生的梦想，心怀执着信念和满腔热情。这个梦想可能是入围奥运会，可能是站上领奖台，可能是夺得金牌，甚至是打破世界纪录。时时刻刻，是梦想在支持着他们坚持训练，顽强拼搏，超越自我。在奥运会赛场上，这些梦想可以铸就历史。
记录奥运梦想，始于1932年。欧米茄84年来助力并见证运动员为荣誉与梦想而战。2016里约奥运会的圣火已经点燃，欧米茄再次和运动员们一起，记录傲人成绩，实现非凡梦想。
奥运赛场之外，欧米茄也在为更多心怀梦想的你我记录着奋斗过程。时间见证我们的汗水，努力终将会有回报。
你的梦想是什么？欢迎在留言里与我们分享。
▼ 点击阅读原文，莅临官网了解更多信息。一天就是225元，一个月大概花费四五千元。
手脚全上，只为可以得到娃娃，不顾围观目光。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　来源：一条码字犬（微信号：dognotes）
　　作者：刘二狗
　　当你还在刷屏里约奥运会开幕式的时候
　　NIKE 的朋友圈广告新形势已新鲜出炉
　　咋一看还以为只是普通的图文广告
　　然鹅点开外层图却是一个全新的H5
　　（后面会全面揭秘）
　　也许你还没有意识到
　　这则广告开创了朋友圈广告的新形态
　　精彩在下面
　　2015年1月
　　朋友圈出现了第一支商业广告
　　以往， 你看到的朋友圈广告形式也许是这样
　　获取优质粉丝的图文广告
　　或是这样，
　　增加曝光的图文广告
　　或者是
　　让内容具有社交属性的视频广告
　　另外也许是推广应用的图文广告
　　推广本地生活服务的图文广告
　　以上几种形态都是我们常见的朋友圈广告形态
　　而今天
　　朋友圈广告出现了一种最新的形式
　　点击外层图
　　直接进入H5
　　用户无需 像以往点击【查看详情】
　　方可查看内容
　　现在只需要点击外层图片
　　即可进入高大上的H5页面
　　好了， 别说话，看图
　　对于这种朋友圈广告的新形式值得思考
　　下面是我的几点思考与大家分享一下
　　1.外层图非常重要
　　这里需要注意两点：
　　一、文案内容需要促使引导人们去点击，比如耐克： “嘿，今天该你上场了！立即一探究竟。”
　　二、图片形式是否有冲击力或是引起人们点击的欲望，
　　耐克做得很好，以一个小孩的踏着滑板即将挑战极限为悬念吸引人点击
　　2.H5的内容创意、页面设计、交互设计，需要配合的很好
　　耐克结合时下里约奥运会的热点
　　配合“不信极限”的主题视频
　　以6位运动健将的人生经历升华主题
　　激发受众人群的想要挑战未来自我的情感共鸣
　　（每个人心中都有超越现在自己的梦，你难道不想吗？）
　　最后引出
　　NIKE不信极限配色系列上市的核心信息并导流官网购买
　　不仅如此
　　NIKE并不想只是通过线上让人们感受到“不信极限”的主题，
　　因此在最终页面发起“立即上场挑战”的线下活动，
　　让受众亲临现场参与去真实感受！
　　写在最后
　　此次微信推出的朋友圈广告新形态的H5，与以往的H5形式大有不同，可以看出这个H5上上部完全隐藏了。
　　这种形式特别像是一个APP的开机页面！同时这个H5的打开和关闭时的使用体验非常类似我们用手机点击APP图标打开应用的形式，缩放非常流畅。
　　换句话说，非常像在使用一个APP。这不禁让人想起，在日微信公开课PRO版上，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过公众号完成一些App的部分功能。
　　这样看来，这个H5可能就是微信即将推出应用号的产品模型，现在H5的技术已经非常成熟，完全可以做到一个APP的大部分功能。
　　这对于企业和H5开发者来说无疑是一个好消息。至于微信的野心，也以跃然纸上。
　　来源：一条码字犬（微信号：dognotes）
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
推酷网是一款个性化阅读网站，目标用户是IT领域人群，能够自...
17229文章数
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：[iOS] 微信朋友圈上这个很火很炫的广告是怎么实现的 - 推酷
[iOS] 微信朋友圈上这个很火很炫的广告是怎么实现的
不清楚的朋友先看微信团队对这个广告的介绍：
里约奥运第一天，微信广告团队再放大招，新设计了一种广告类型，据说旨在用户能够更愿意去分享。亲测，打开那一刹那，确实很惊艳。下面是展示图片：
作为一个热爱研究的移动开发者，第一印象是，这东西做成广告要怎么实现？
如上图，上面有一个很炫的入场动画，整个页面会展示若干上图片，里面会插入视频，视频会在出现时自动播放，划出后暂停，到最后会有一个可以跳转到具体产品的链接按钮。
之后看了微信放出来的另一个广告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、伊利牛奶广告元信息
&?xml version=&1.0& encoding=&utf-8&?&&adxml&
&originSnsId&-5202608&/originSnsId&
&originUxInfo&|wx0oghes5zhpmn4y||0|&/originUxInfo&
&nickname&伊利牛奶&/nickname&
&headClickType&0&/headClickType&
&adActionLinkHidden&1&/adActionLinkHidden&
&adActionLinkName&查看详情&/adActionLinkName&
&adActionLink&http://as./cgi-bin/redirect?tid=1601557&/adActionLink&
&adActionType&0&/adActionType&
&webviewRightBarShow&1&/webviewRightBarShow&
&attachShareLinkIsHidden&&/attachShareLinkIsHidden&
&expandOutsideTitle&
&zh&广告&/zh&
&tw&廣告&/tw&
&en&Sponsored&/en&
&/expandOutsideTitle&
&expandInsideTitle&
&zh&赞助商提供的广告信息&/zh&
&tw&贊助商提供的廣告信息&/tw&
&en&Sponsored story&/en&
&/expandInsideTitle&
&key&classify_zh_CN&/key&
&value&电器&/value&
&key&classify_zh_TW&/key&
&value&電器&/value&
&key&classify_en&/key&
&value&appliance&/value&
&key&nickname_zh_CN&/key&
&key&nickname_zh_TW&/key&
&key&nickname_en&/key&
&adCanvasInfo&
&pageID&&/pageID&
&id&1371&/id&
&canvasName&安慕希&/canvasName&
&sizeType&1&/sizeType&
&basicWidth&750&/basicWidth&
&basicRootFontSize&1&/basicRootFontSize&
&shareTitle&他会让世界好看，你看好吗？&/shareTitle&
&shareDesc&靠颜值可以霸屏的我涛，要去称霸全宇宙了。&/shareDesc&
&shareThumbUrl&/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLWWCd9cegRJ46W3BlEIrz5A/0&/shareThumbUrl&
&shareWebUrl&http://mp./tp/ad_detail_info?page_key=c6cd90ee560e0acde652c42b567fe3759cbd1ff8cb034dd9c0be9&/shareWebUrl&
&PageList&
&backgroundCover/&
&backgroundColor&#ffffff&/backgroundColor&
&componentItemList&
&componentItem&
&pureImageUrl&/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFxdZnUt8WSEQqibXtkwXplHQ/0&/pureImageUrl&
&imageHeight&938&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图1&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFLL5prEEujnDa0v0ANaBiaWw/0&/pureImageUrl&
&imageHeight&396&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图2&/name&
&/componentItem&
&/componentItemList&
&backgroundCover/&
&backgroundColor&#000000&/backgroundColor&
&componentItemList&
&componentItem&
&streamVideoUrl&http://wxsnsdy./105/20210/snsdyvideodownload?filekey=0fe55d4dd99e6d43de0400&bizid=1023&hy=SH&fileparam=302cffd2c0e8d7f&/streamVideoUrl&
&streamDisplayType&0&/streamDisplayType&
&streamVideoThumb&http://vweixinthumb./150/20250/snsvideodownload?filekey=106ed93afac5ffc400&bizid=1023&hy=SH&fileparam=302cffd2c31e8d7f&/streamVideoThumb&
&streamDisplayWidth&640&/streamDisplayWidth&
&streamDisplayHeight&1138&/streamDisplayHeight&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&62&/type&
&name&视频1&/name&
&/componentItem&
&/componentItemList&
&backgroundCover/&
&backgroundColor&#000000&/backgroundColor&
&componentItemList&
&componentItem&
&panoramaImageUrl&/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLZ1s7PbTjWlwjmxnyqk5QXA/0&/panoramaImageUrl&
&type&44&/type&
&name&全景1&/name&
&/componentItem&
&/componentItemList&
&backgroundCover/&
&backgroundColor&#ffffff&/backgroundColor&
&componentItemList&
&componentItem&
&pureImageUrl&/mmsns/olticmAYicoM882rFgvNH3mKo5ZDn6p7LFdQz4tNnibpxfbJ0XbzDsRlQ/0&/pureImageUrl&
&imageHeight&736&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图3&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/olticmAYicoM8aSeQibcyTFYR5BQx2zibXaoZWyQy8uUlbQAIm116KkSRw/0&/pureImageUrl&
&imageHeight&301&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图4&/name&
&/componentItem&
&componentItem&
&btnTitle&立即加入&/btnTitle&
&fontSize&30&/fontSize&
&fontColor&#ffffff&/fontColor&
&btnJumpUrl&/201608/main.html&/btnJumpUrl&
&btnType&0&/btnType&
&borderSize&0&/borderSize&
&btnHeight&78&/btnHeight&
&btnBgColorTheme&#004DA1&/btnBgColorTheme&
&btnBorderColorTheme&#004DA1&/btnBorderColorTheme&
&btnFontType&1&/btnFontType&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&205&/paddingRight&
&paddingLeft&205&/paddingLeft&
&type&21&/type&
&name&按钮1&/name&
&/componentItem&
&/componentItemList&
&/PageList&
&/adCanvasInfo&&/adxml&
2、Nike广告元信息
&?xml version=&1.0& encoding=&utf-8&?&&adxml&
&nickname&NIKE&/nickname&
&headClickType&0&/headClickType&
&adActionLinkHidden&1&/adActionLinkHidden&
&adActionLinkName&查看详情&/adActionLinkName&
&adActionLink&http://as./cgi-bin/redirect?tid=1601569&/adActionLink&
&adActionType&0&/adActionType&
&webviewRightBarShow&1&/webviewRightBarShow&
&attachShareLinkIsHidden&&/attachShareLinkIsHidden&
&expandOutsideTitle&
&zh&广告&/zh&
&tw&廣告&/tw&
&en&Sponsored&/en&
&/expandOutsideTitle&
&expandInsideTitle&
&zh&赞助商提供的广告信息&/zh&
&tw&贊助商提供的廣告信息&/tw&
&en&Sponsored story&/en&
&/expandInsideTitle&
&key&classify_zh_CN&/key&
&key&classify_zh_TW&/key&
&key&classify_en&/key&
&key&nickname_zh_CN&/key&
&key&nickname_zh_TW&/key&
&key&nickname_en&/key&
&adCanvasInfo&
&pageID&&/pageID&
&id&2566&/id&
&canvasName&nike其他城市&/canvasName&
&sizeType&1&/sizeType&
&basicWidth&750&/basicWidth&
&basicRootFontSize&1&/basicRootFontSize&
&shareTitle&嘿，今天该你上场了！&/shareTitle&
&shareDesc&没错，就是你！立即一探究竟&/shareDesc&
&shareThumbUrl&/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wrylT8DKZaj06bg9sbRzSbw/0&/shareThumbUrl&
&shareWebUrl&http://mp./tp/ad_detail_info?page_key=5b6cddf2c33149ccfdde13a63e56cd068fd9d5e65c22f692fb134f3fbc37fb96e77abbf502ec59ca87ddfc4&/shareWebUrl&
&PageList&
&backgroundCover/&
&backgroundColor&#ffffff&/backgroundColor&
&componentItemList&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wpEw5ySjbksLJiaAqcdeWicXw/0&/pureImageUrl&
&imageHeight&750&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&头图&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wX2aMkzC0zeoWEEVJRfZWdQ/0&/pureImageUrl&
&imageHeight&448&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&文本1-1&/name&
&/componentItem&
&componentItem&
&streamVideoUrl&http://wxsnsdy./105/20210/snsdyvideodownload?filekey=22c5ae7e28d5ca1d&bizid=1023&hy=SH&fileparam=302cffdf&/streamVideoUrl&
&streamDisplayType&1&/streamDisplayType&
&streamVideoThumb&http://vweixinthumb./150/20250/snsvideodownload?filekey=10ee035de565a944eabfecc7a&bizid=1023&hy=SH&fileparam=302cffdaf&/streamVideoThumb&
&streamDisplayWidth&750&/streamDisplayWidth&
&streamDisplayHeight&421.875&/streamDisplayHeight&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&62&/type&
&name&流媒体视频&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6eX7uHPR8P04tkiakghyIj02xL4nxRaThSt4vDdttU8XZA/0&/pureImageUrl&
&imageHeight&354&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&文案2&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXXZibicqiaw9t7KMVsWZe0zMg/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图1&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkIV7oAFquic7wHjBt24qHTUw/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图2&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkx3Abdic8QWHClsasGBdYbRA/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图3&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkuouM2ZUaRVPKYN4eDCvAEw/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图4&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkGZG8yw8dW0kDhfVEfSMP1g/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图5&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fk8g4sjFQnuelkgysLQpVXAw/0&/pureImageUrl&
&imageHeight&1334&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图6&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dUFC5PWYcDbzoSgX8qB4fkXdbibibUsMwqOt13Wcyqns3w/0&/pureImageUrl&
&imageHeight&1505&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&0&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&长图7&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dibv6ICjLoMb5qyAosI4ian1A/0&/pureImageUrl&
&imageHeight&728&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&0&/paddingTop&
&paddingBottom&40&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图片3&/name&
&/componentItem&
&componentItem&
&btnTitle&立即上场&/btnTitle&
&fontSize&30&/fontSize&
&fontColor&#000000&/fontColor&
&btnJumpUrl&/cn/zh_cn/c/justdoit/national?cp=cn_brom_080616_u_GEN_AL_OLP_nwc_LM_02_SP_GC&/btnJumpUrl&
&btnType&0&/btnType&
&borderSize&2&/borderSize&
&btnHeight&80&/btnHeight&
&btnBgColorTheme&#ffffff&/btnBgColorTheme&
&btnBorderColorTheme&#000000&/btnBorderColorTheme&
&btnFontType&1&/btnFontType&
&paddingTop&0&/paddingTop&
&paddingBottom&20&/paddingBottom&
&paddingRight&150&/paddingRight&
&paddingLeft&150&/paddingLeft&
&type&21&/type&
&name&按钮&/name&
&/componentItem&
&componentItem&
&pureImageUrl&/mmsns/gFuZJlqxR6dGp4D8cCyJo38N3Oj4R89Dd799WvreUsibkibiaEh19p1lQ/0&/pureImageUrl&
&imageHeight&392&/imageHeight&
&imageWidth&750&/imageWidth&
&paddingTop&40&/paddingTop&
&paddingBottom&50&/paddingBottom&
&paddingRight&0&/paddingRight&
&paddingLeft&0&/paddingLeft&
&type&41&/type&
&name&图片4&/name&
&/componentItem&
&/componentItemList&
&/PageList&
&/adCanvasInfo&
&originSnsId&&/originSnsId&
&originUxInfo&|wx0vl72zluinqfpw||0|&/originUxInfo& &/adxml&
看了xml，再对比下UI效果，基本就确定了，整个xml里面就是一段tableview的元信息，可以认为，该广告只支持tableview的展示，也就是说：
客户端订好若干模板，tableview的每一个cell是一个模板，广告主去组合这个即可
不得不说，这里很有想象力！
其中，最后用于广告主效果跳转的button竟然也是一个cell，通过xml字段来看，这个位置会限制广告主的发挥，因为该cell背景只能用纯色！
最后，我们看看这一波广告支持多少种模板的组合方式：
上图所有以WCCanvasComponent开头的，都是能支持的模板，字面上大多数能看明白意思：有意思的是视频竟然包含流媒体和小视频两种，有一个WebViewInfo可能预示着这里必要的时候某些模块可以load一段网页进行展示。。。
六、简单的优缺点分析，以及Android
好吧，整个分析都完事了，可以确信微信广告团队采用的技术方案了。
这种技术方案的好处在于完全可控，客户端在定制化过程中能最大化的提高流畅度和性能，传输协议也能兼容微信现有的消息方式，通过模块组合也能过实现广告主非常好的定制化。
缺陷在于毕竟所有功能样式都依赖于客户端版本支持，虽然会有很多好玩的样式，但毕竟有限，最终广告主的创意发挥也会受限，不过手机端的广告受限于屏幕宽度，能展示的创意本身也不是很多，微信广告团队的这种方案几乎可以cover主所有主流创意了。
无论如何，这种广告方式都是一个非常了不起的发明，可以确信，app端广告将正式进入原生时代！
被遗忘的Android
上面说了这种实现方式一大优势就是兼容性好，直接支持现有的微信消息协议，所以Android端在获取广告元信息必然也是消息传输过来的xml信息，无非渲染方式不一样而已。可以猜测，应该也仅仅是listview中组了一些原生组建吧。不过由于android中屏幕千奇百怪，各种ROM的碎片化订制，Android在实现分页弹性滑动和全景图片展示会遇上更多的坑。（亲测确实很多地方不尽如人意）
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}