iOS Smart App Banner 智能App广告条

在iOS中提供了两种在浏览器中打开APP的方法：Smart App Banner和schema协议。
Smart App Banner 是iOS6的新特性，只针对iOS设备，可以让App开发者可以更容易以超链接的方式自由跳转，快速地引导用户到App Store下载自己的App，将访问Web页面的用户转化成App用户。
通过Smart App Banners，开发者将可以获得一个将网站流量转化成App用户的新渠道。
形如(第一张为未安装APP时的显示，第二张为安装APP时的显示)：
简书也有哦，用iOS设备Safari打开链接地址试试。

IMG_0040.jpg IMG_0045.jpg

本文知乎问题的链接

方法很简单，在html heander内增加一个meta 标签，在标签上带上app的信息，和打开后的行为，例如：app-id之类的，代码形如：

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
#content 属性可以传三个参数，以逗号隔开
#app-id(必选) 填写应用在APPStrore的ID 
#affiliate-data(可选) 是iTunes 分销联盟计划的ID 一般用不到。
#app-argument（可选）点击『打开』给APP传参数

下图是查看iPhone上 Safari打开的知乎网页源码

safari.png

蓝色的是选中了html顶级标签，在上方知乎的网页上会覆盖一层蓝色图层，可见 Smart App Banner并没有变为蓝色，说明它不是网页的一部分。

红色方框内是显示这块Smart App Banner的核心，有知乎的APPID，和app-argument=zhihu://questions/25152251
点击打开，会跳转至知乎，并跳转至该问题，就是这个app-argument在起作用。

IMG_0047.jpg

在iOS APP接收数据并处理：

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

{

// in this example, the URL from which the user came is 
zhihu://questions/25152251

// determine if the user was viewing a profile

if ([[url absoluteString] contins:@"zhihu"]) {

//解析url 
//做一些跳转

}

return YES;

}

把本文知乎问题的链接 放到QQ内打开：

IMG_0046.jpg

会发现上边的Smart APP Banner失效了。但是下面多了个『知乎 下载APP』
这个就是自己在html上绘制的了，并且使用URL Schema.
有关URL Schema大家应该不陌生了。
、