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

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

感谢曾经在微信工作的经历,让我更理解互联网

如果文章有任何不妥的地方,请直接邮件chaisong.cn@gmail.com

如果你喜欢我的文章,可以直接访问我的博客,欢迎批评指正。

一、广告介绍

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

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

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

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

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

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

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

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

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

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

三、WCCanvasPageViewController

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

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

好,下面查看它的信息:
blog_wcadcanvasinfo.jpg

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

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

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

1、伊利牛奶广告元信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<?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&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457a4522c02024ef202031e8d7f02030f42400204045a320a0201000400</streamVideoUrl>
<streamDisplayType>0</streamDisplayType>
<streamVideoThumb>http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30280201010421301f020200960402534804106ed93afac5f3924bd8f6f6666917470c0203016a870400&amp;bizid=1023&amp;hy=SH&amp;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广告元信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<?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&amp;bizid=1023&amp;hy=SH&amp;fileparam=302c020101042530230204136ffd93020457a4387102024ef202031e8d7f02030f42400204045a320a0201000400</streamVideoUrl>
<streamDisplayType>1</streamDisplayType>
<streamVideoThumb>http://vweixinthumb.tc.qq.com/150/20250/snsvideodownload?filekey=30270201010420301e02020096040253480410ee035de565a944eabf9145f8098ecc7a020231130400&amp;bizid=1023&amp;hy=SH&amp;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背景只能用纯色!

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

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

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

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

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

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

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

被遗忘的Android

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