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

最新推荐文章于 2023-01-13 15:12:02 发布
最新推荐文章于 2023-01-13 15:12:02 发布
阅读量7.9k 收藏 3
点赞数 2
分类专栏： 个人见识 文章标签： Android hook iOS

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


一、广告介绍

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

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

1.pic_meitu_1.jpg

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

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

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

5.pic_meitu_1.jpg

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

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

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

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

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

三、WCCanvasPageViewController

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

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

看到这里，还不可以确定这里实现的方案是不是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”

好，下面查看它的信息：

wcadcanvasinfo.jpg

  • 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>-6114390104925202608</originSnsId>  
  <originUxInfo>1600004088|wx0oghes5zhpmn4y||0|1470527748</originUxInfo>
  <nickname>伊利牛奶</nickname>
  <headClickType>0</headClickType>
  <adActionLinkHidden>1</adActionLinkHidden>
  <adActionLinkName>查看详情</adActionLinkName>
  <adActionLink>http://as.weixin.qq.com/cgi-bin/redirect?tid=1601557</adActionLink>
  <adActionType>0</adActionType>
  <webviewRightBarShow>1</webviewRightBarShow>
  <attachShareLinkIsHidden>1918989427</attachShareLinkIsHidden>
  <expandOutsideTitle>
    <zh>广告</zh>
    <tw>廣告</tw>
    <en>Sponsored</en>
  </expandOutsideTitle>
  <expandInsideTitle>
    <zh>赞助商提供的广告信息</zh>
    <tw>贊助商提供的廣告信息</tw>
    <en>Sponsored story</en>
  </expandInsideTitle>
  <adArgs>
    <arg>
      <key>classify_zh_CN</key>
      <value>电器</value>
    </arg>
    <arg>
      <key>classify_zh_TW</key>
      <value>電器</value>
    </arg>
    <arg>
      <key>classify_en</key>
      <value>appliance</value>
    </arg>
    <arg>
      <key>nickname_zh_CN</key>
      <value/>
    </arg>
    <arg>
      <key>nickname_zh_TW</key>
      <value/>
    </arg>
    <arg>
      <key>nickname_en</key>
      <value/>
    </arg>
  </adArgs>
  <adCanvasInfo>
    <pageID>1700001666</pageID>
    <id>1371</id>
    <canvasName>安慕希</canvasName>
    <sizeType>1</sizeType>
    <basicWidth>750</basicWidth>
    <basicRootFontSize>1</basicRootFontSize>
    <shareTitle>他会让世界好看，你看好吗？</shareTitle>
    <shareDesc>靠颜值可以霸屏的我涛，要去称霸全宇宙了。</shareDesc>
    <shareThumbUrl>http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLWWCd9cegRJ46W3BlEIrz5A/0</shareThumbUrl>
    <shareWebUrl>http://mp.weixin.qq.com/tp/ad_detail_info?page_key=95264e7fa44c6cd90e55334350d4e560e0acde652c42b567fe3759cbd644983dc171ff853248263e068cb034dd9c0be9</shareWebUrl>
    <PageList>
      <Page>
        <backgroundCover/>
        <backgroundColor>#ffffff</backgroundColor>
        <componentItemList>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>1371_3015_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>1371_3016_41</id>
          </componentItem>
        </componentItemList>
      </Page>
      <Page>
        <backgroundCover/>
        <backgroundColor>#000000</backgroundColor>
        <componentItemList>
          <componentItem>
            <streamVideoUrl>http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30270201010420301e0201690402534804100fe55d4d35540737a214d99e1721636002036d43de0400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024ef202031e8d7f02030f42400204045a320a0201000400</streamVideoUrl>
            <streamDisplayType>0</streamDisplayType>
            <streamVideoThumb>http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30280201010421301f020200960402534804106ed93afac5f3924bd8f6f6666917470c0203016a870400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4522c02024f1a02031e8d7f02030f42400204045a320a0201000400</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>
            <id>1371_3017_62</id>
          </componentItem>
        </componentItemList>
      </Page>
      <Page>
        <backgroundCover/>
        <backgroundColor>#000000</backgroundColor>
        <componentItemList>
          <componentItem>
            <panoramaImageUrl>http://mmsns.qpic.cn/mmsns/olticmAYicoM8WH03wUK2LgURpbYn92GxLZ1s7PbTjWlwjmxnyqk5QXA/0</panoramaImageUrl>
            <type>44</type>
            <name>全景1</name>
            <id>1371_3018_44</id>
          </componentItem>
        </componentItemList>
      </Page>
      <Page>
        <backgroundCover/>
        <backgroundColor>#ffffff</backgroundColor>
        <componentItemList>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>1371_3019_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>1371_3020_41</id>
          </componentItem>
          <componentItem>
            <btnTitle>立即加入</btnTitle>
            <fontSize>30</fontSize>
            <fontColor>#ffffff</fontColor>
            <btnJumpUrl>http://yili.cici6.com/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>
            <id>1371_3021_21</id>
          </componentItem>
        </componentItemList>
      </Page>
    </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.weixin.qq.com/cgi-bin/redirect?tid=1601569</adActionLink>
  <adActionType>0</adActionType>
  <webviewRightBarShow>1</webviewRightBarShow>
  <attachShareLinkIsHidden>1110914615</attachShareLinkIsHidden>
  <expandOutsideTitle>
    <zh>广告</zh>
    <tw>廣告</tw>
    <en>Sponsored</en>
  </expandOutsideTitle>
  <expandInsideTitle>
    <zh>赞助商提供的广告信息</zh>
    <tw>贊助商提供的廣告信息</tw>
    <en>Sponsored story</en>
  </expandInsideTitle>
  <adArgs>
    <arg>
      <key>classify_zh_CN</key>
      <value/>
    </arg>
    <arg>
      <key>classify_zh_TW</key>
      <value/>
    </arg>
    <arg>
      <key>classify_en</key>
      <value/>
    </arg>
    <arg>
      <key>nickname_zh_CN</key>
      <value/>
    </arg>
    <arg>
      <key>nickname_zh_TW</key>
      <value/>
    </arg>
    <arg>
      <key>nickname_en</key>
      <value/>
    </arg>
  </adArgs>
  <adCanvasInfo>
    <pageID>1700002364</pageID>
    <id>2566</id>
    <canvasName>nike其他城市</canvasName>
    <sizeType>1</sizeType>
    <basicWidth>750</basicWidth>
    <basicRootFontSize>1</basicRootFontSize>
    <shareTitle>嘿，今天该你上场了！</shareTitle>
    <shareDesc>没错，就是你！立即一探究竟</shareDesc>
    <shareThumbUrl>http://mmsns.qpic.cn/mmsns/gFuZJlqxR6dJFiccZHiagg9l2ibIPClbic4wrylT8DKZaj06bg9sbRzSbw/0</shareThumbUrl>
    <shareWebUrl>http://mp.weixin.qq.com/tp/ad_detail_info?page_key=5b6cddf2c33149ccf8692fb1a3dde13a63e56cd068fd9d5e65c22f692fb134f3fbc37fb96e77abbf502ec59ca87ddfc4</shareWebUrl>
    <PageList>
      <Page>
        <backgroundCover/>
        <backgroundColor>#ffffff</backgroundColor>
        <componentItemList>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2832_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2833_41</id>
          </componentItem>
          <componentItem>
            <streamVideoUrl>http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f02016904025348041022c56408ca857868ae7e28d5ca2457f50204011d47340400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024ef202031e8d7f02030f42400204045a320a0201000400</streamVideoUrl>
            <streamDisplayType>1</streamDisplayType>
            <streamVideoThumb>http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30270201010420301e02020096040253480410ee035de565a944eabf9145f8098ecc7a020231130400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457a4387102024f1a02031e8d7f02030f42400204045a320a0201000400</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>
            <id>2566_2834_62</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2835_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2836_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2837_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2838_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2839_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2840_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2841_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2842_41</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2843_41</id>
          </componentItem>
          <componentItem>
            <btnTitle>立即上场</btnTitle>
            <fontSize>30</fontSize>
            <fontColor>#000000</fontColor>
            <btnJumpUrl>http://m.nike.com/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>
            <id>2566_2844_21</id>
          </componentItem>
          <componentItem>
            <pureImageUrl>http://mmsns.qpic.cn/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>
            <id>2566_2845_41</id>
          </componentItem>
        </componentItemList>
      </Page>
    </PageList>
  </adCanvasInfo>
  <originSnsId>12334591275321071424</originSnsId>  
  <originUxInfo>1600004109|wx0vl72zluinqfpw||0|1470415303</originUxInfo> 
</adxml>


五、结论

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

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

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

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

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

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

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

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

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

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

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

被遗忘的Android

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

Zhiyuan_Ma
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最近微信很火的html小游戏安卓版【按一秒】
07-24
最近微信上很火的一个小游戏，你的一秒有多长安卓版，完美代码. 代码有点大是因为我加了字体特效。还没有做压缩处理，不过可以根据自己需求修改
微信公众平台开发入门教程（三）消息类型讲解
BOTOAI
10-21 1664
接收消息类型 目前普通用户能向公众账号推送五种格式的消息：文本（包括表情）、语音、图片、视频、位置、链接。名片发送会失败。下面就这五种分别详解如下： 1. 文本（包括表情）发送文本 后台格式: xml> ToUserName>gh_680bdefc8c5d]]>ToUserName> FromUserName>oIDrpjqASyTPnxRmpS9O_ruZGsfk]]>Fro
微信小程序购物车实现 微信小程序购物车实现
06-04
微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现
微信小程序实现列表下拉刷新上拉加载
08-28
主要为大家详细介绍了微信小程序实现列表下拉刷新上拉加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现首页弹出广告
01-18
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码，供大家参考，具体内容如下 这个微信小程序首页广告demo 仅供有需要的参考 .wxml <!-- 广告展示 --> <view class=active-conten
微信小程序-实现图灵机器人聊天功能
05-09
微信小程序源码实现图灵机器人聊天功能实现了和图灵机器人聊天的功能。
万邦微信公众号根据关键词取文章列表 API 返回值说明
Noah_ZX的博客
01-13 1128
参数说明：q:关键词,没有其他参数。异常示例相关资料错误码解释。请求参数：q=连衣裙&
把detail_info字段插入数据库的总结
szwuwang的博客
05-15 890
该字段非常复杂，有如下问题：1. 在mysql数据库中它是一个json类型字段2. 在python中最外面它是一个Field，里面包含list、dict、有各种单双引号的文本解决办法：为了把这条数据插入mysql，进行如下处理：1. 对于python，它虽然是Field，也可以理解成dict，所有可以使用json.dumps方法转成json数据detail_info = json.dumps(it...
微信开发 ： 绕过微信防盗链，显示图片
如果有一天我能够拥有一个大果园，我愿放下所有追求做个农夫去种田
04-25 1483
原始图片URL： http://mmbiz.qpic.cn/mmbiz/DUQNyFETicAZ5dcTQtHmic557unfEMXmVXfvKZbOVWTGmaD7TwNH2dNk7biaOib8de1E74ibNwwwSMyPtmiaNY2zPDicQ/0?wx_fmt=jpeg 使用跳板： http://read.html5.qq.com/imag
获取微信as，获取临时二维码
韩小转的博客
03-22 8408
public class GetAccessToken { public final static String app_id = GlobalKeys.getProperties("app_id"); public final static String app_secret = GlobalKeys.getProperties("app_secret"); public final s
微信小程序进入广告实现代码实例
10-16
主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js .net 微信公众号自定义分享解决ios无法分享的问题
CY的博客
10-25 1033
retwx: function (obj1, obj2) { var _this = this; var url = location.href; let ua = navigator.userAgent.toLowerCase();//获取当前设备 //Andro...
微信小程序实战之实现微信支付+购物车功能，还可以在线填写资料哦！寺庙必备小程序功能
tian_jiangnan的博客
04-18 2319
我们来看看一下效果图吧！ 我是用微信开发工具的，所以到了支付功能会提示用二维码扫描，如果在真机上就是支付弹框输入支付密码的页面了！ 这个页面的功能如下 1、典型的购物车，勾选价格与物品件数都发生变换 2、在线填写信息，支付的时候回把页面上的信息全部都存储数据库里面 3、微信支付功能 这个页面的wxml如下 <view class='header1'> ...
HTML5和微信小程序最近挺火的
xionghui2007的博客
11-28 2031
最近看到很多技术科技类网站或者新闻提到HTML5和微信小程序，感觉挺流行的，就停下来看看相关资料教程学习学习。 发现自己之前学的网页设计技术落伍太多了，要学的很是很多的，打算放慢脚步，学下HTML5和HTML4之间的差异，还有看了点微信小程序的教程，感觉跟HTML5网页设计挺类似的，不是很难的样子，干脆一起学习了。 当然自己那个网页项目也要进行下去，打算放弃非重点模块-财富论坛和帮助中心的细节
关于微信广告的获取
wuda19920215的博客
03-16 608
关于微信广告的获取 工具及开发依赖 python 3.6 appium mitmproxy redis mysql adb fidder nox 或者真机 一台服务器或者电脑 作者未来升级计划 -&gt; 邮件发送 – 环境安装 在这之前需要先安装依赖环境 python：安装很简单，去官网下载安装包，按照界面提示一步一步安装 java：需要配置 JAVA_HOME, CLASS_PATH...
大数据开发企业级案例__某通信企业数据处理需求(建议收藏)
Maynor996的博客
06-22 1460
现有部分GN数据，数据为全省数据，解析GN数据，将数据按照 /OutputData/城市名称/日期（YYYY-MM-dd）/类型（固定Gn）/imsi.txt (有很多imsi)的结构，将相同城市，相同日期，相同imsi（国际移动用户标识），类型为Gn的数据汇总到一起。
搜狗微信文章爬取（下）
utopianist的博客
11-27 4355
GitHub: https://github.com/utopianist/SougouWeixin 前言 上节我们爬完了所有索引页，这节我们开始爬取公众号文章。 要知道，我们之前爬的是 weixin.sogou.com ,而现在爬取的是 mp.weixin.qq.com ，这是两个完全不同的网站。 关于 mp.weixin.qq.com 的反爬，并不是很严厉，我们只需需要构造新的请求头。...
MapReduce算法（计算每个相同IMSI（国际移动用户标识）、TAC（跟踪区域码）的上行流量和，下行流量和，总流量和）
热门推荐
最慢的步伐不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持
12-20 1万+
需求: 计算每个相同IMSI（国际移动用户标识）、TAC（跟踪区域码）的上行流量和，下行流量和，总流量和。 需求说明：将S1U数据里面的VOLUME字段（数据流量）和IMSI、TAC两个字段提取出来， 并且按相同IMSI、TAC对VOLUME求和（上行流量和、下行流量和、总流量的和）。其结果保存为新的文件。 数据： 2604|731|11|fe58db672c0fdf509b000000...
社交应用动态九宫格图片的规则
weixin_34379433的博客
10-18 479
这里主要以微信和QQ空间为作为研究对象，得到的结论如下。 QQ空间里的动态 iOS设备，以iPhone6为分界 iPhone6及以上分辨率的设备： 当宽且高同时 &gt; 512px时，判断 宽/高的比例值：大于 2时，以高度为基准，缩小到512px，宽度等比缩、小于等于 2时，以宽度为基准，缩小到512px，高度等比缩 当宽、高其中一边小于512px，直接下原图； i...
市面上idea插件的微信登录功能是怎么实现的
最新发布
06-08
市面上的许多 IDEA 插件使用了微信开放平台提供的 OAuth 2.0 授权方式实现了微信登录功能。具体实现步骤如下： 1. 在微信开放平台上注册一个开发者账号，并创建一个新的网站应用。 2. 在网站应用的设置页面中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值