需求
用户从 qq / 微信分享出去的 H5 页面,当点击 H5 页面的某个按钮时,要实现如下功能:
-
当用户未安装 App 时,跳转到 AppStore 页面引导用户下载
-
当用户已安装 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
魔窗 App key
④想要使用深度链接,还需要配置魔窗的 mlink 服务,如下图
点击添加 mLink 服务
点击添加 mLink 服务后,如下图
mLikn 服务配置页面
mLink 服务名称可自己配置 mLink 服务 key 也可自己配置 这个 key 后面代码里面需要使用。
然后就是 URL 如何拼接了。比如你 app 中有用户的个人中心,且可以用参数决定是否显示用户的详细信息,那么您需要输入的页面 URI 如下:mw://www.mycompany.com/user/:userI… 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 这里二者必须保持一致
Xcode URL Scheme 配置
②applinks 配置 这里的 Domains 一定要填你之前在魔窗配置后获得的那个魔窗域名,这里要保证不能出差错,否则无法完成跳转
Xcode applinks 配置
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 链接的原因。测试方法,直接用短连接 + 参数 ab9e1n.mlinks.cc/AcJF?roomId… 如果类似这样的链接在微信里面正常,那么可推断是 web 端原因,如果这样的链接也不正常,那么则是 App 端没配置好,可检测下 AppDelegate.m 需要实现的那三个方法有没有实现,是不是写错了。