需求:
用户从qq/微信分享出去的H5页面,当点击H5页面的某个按钮时,要实现如下功能:
1.当用户未安装App时,跳转到AppStore页面引导用户下载
2.当用户已安装App时,唤醒App并跳转到App里面的某一个指定页面
传统的url schema实现方式存在两个弊端,一是跳转的时候会有一个提示框:“是否打开XXX”,用户体验不好,二是微信屏蔽了URL Scheme,必须是在微信的白名单里面才可跳转,也就意味着用户在微信里面是无法一键直达App的。这对于大多数公司来讲,是难以承受的。而通用链接Universal Link正是可以解决上述问题的技术手段。
一、通用链接介绍及优点 :
iOS 9 Universal Links 通用链接可参考这篇博文
二、通用链接具体实施步骤
这里可以分两种实现方式,第一种是自己去配置通用链接,第二种是通过一些第三方sdk来实现此功能,笔者在这里强烈推荐第二种,我自己有尝试第一种配置,坑多,而且配置半天后发现得到的链接始终通不过测试,怀疑是服务器那边不支持。而第二种配置的话,坑少,而且还会节省大量的开发时间,保证该功能的迅速上线。
①自己配置通用链接
iOS的UniversalLink开发总结 不建议 坑太多。
②用第三方sdk去集成配置(魔窗,LinkedME等)
下面以魔窗为例,讲解如何配置。魔窗iOS集成文档
用魔窗的话iOS端只需要做三部分操作,分别是魔窗后台配置部分,Xcode配置部分,代码实现部分。下面将详细描述步骤。
魔窗后台配置部分
①注册一个魔窗账号 魔窗注册
②账号注册完毕后,登录魔窗点击右上角新增产品然后选择App。
③要填写的信息分为三部分,分别是产品信息,App信息,魔窗位信息。产品信息没什么可讲的,魔窗位信息可以不填 无视。App信息页面如下图
应用宝下载地址,基本大多数公司都会有,直接填上即可。
应用名称和Bundle ID不用解释 直接填上
URL Scheme:这个LiveRoom名称可以自己随便起,但要保证跟Xcode里面URL Scheme 保持一致(后面会讲解Xcode中的配置)。
下载地址就是应用程序在App Store里面的下载地址。
Team ID :如何获取Team ID 按照教程得到填写即可。
将这些都填写完毕后,魔窗会给你分配一个域名,这个域名会在后面Xcode中配置使用到。
魔窗位信息无视,下一步,然后注册完毕后,会得到一个App key,这个是魔窗App key
④想要使用深度链接,还需要配置魔窗的mlink服务,如下图
点击添加mLink服务后,如下图
mLink服务名称可自己配置 mLink服务key也可自己配置 这个key后面代码里面需要使用。
然后就是URL如何拼接了。比如你app中有用户的个人中心,且可以用参数决定是否显示用户的详细信息,那么您需要输入的页面URI如下:mw://www.mycompany.com/user/:userId?containsDetail=:containsDetail。这里mw://为URI Scheme,可从外部唤醒App,在“App管理”中设置。www.mycompany.com是hostname,user是path。url不懂得如何配置的可参考魔窗上面的点击查看如何配置URL,简言之,就是服务器地址后面拼参数。
这些填完以后,会得到一个短连接。
至此,魔窗的所有配置均已做完。
小结:魔窗的配置是为了获得五个关键参数,以供后面配置使用。分别是URL Scheme,魔窗App key,魔窗mLink key 魔窗域名 魔窗短连接。
Xcode配置部分
Xcode这边配置非常容易,就两步即可。
①配置URL Scheme 这里的identifier可填可不填没影响,URL Schemes这里填在魔窗后台配置时,你写的URL Scheme,魔窗跟Xcode这里二者必须保持一致
②applinks配置 这里的Domains一定要填你之前在魔窗配置后获得的那个魔窗域名,这里要保证不能出差错,否则无法完成跳转
Xcode的配置到这里就完成了。
代码实现部分
①集成魔窗sdk,手动和cocopods两种方式,手动请参考魔窗文档,下面只讲cocopods集成
pod 'MagicWindowSDK'
pod install
记住不要pod update,因为魔窗sdk自己集成了微信分享,非常容易跟shareSDK 友盟分享SDK冲突。
②Appdelegate中实现注册魔窗
在didFinishLaunchingWithOptions这个app初始化方法里面, 其中MWKey就是魔窗key, liveRoomKey需要你替换成之前配置的魔窗mLink key。回调代码里面,不同的项目有不同需求,灵活应变即可。
下图是官网推荐的回调代码内容:
③Appdelegate中实现必要的方法,在.m中 实现以下这三个方法即可。这里我的openUrl有做判断,因为项目里面集成了友盟分享,如果不做判断的话,会很容易冲突。大家根据自己的项目,灵活处理即可。
至此,iOS端就完成了所有的配置,看着文章内容很多,其实配置起来还是很快很简单的。将你之前获得的魔窗短链,交给你们的web开发小伙伴,让他参考这篇文章,进行web端的配置即可魔窗JS API。(超简单)
小提示:如果你按教程配置完事了,发现qq分享出去的链接,可以正常跳到自家的App某个页面,而微信的不行,那么可以先排除是不是h5链接的原因。测试方法,直接用短连接+参数 https://ab9e1n.mlinks.cc/AcJF?roomId=0849170 如果类似这样的链接在微信里面正常,那么可推断是web端原因,如果这样的链接也不正常,那么则是App端没配置好,可检测下AppDelegate.m需要实现的那三个方法有没有实现,是不是写错了。