最近在做一个电商项目,需要做一些推广、跳转之类的,所以接触到了深度跳转这个东东。
- iOS 要申请域名、配置universal-link的apple-app-site-association文件、还要跨域······
- Android 要适配各种设备、各种浏览器、各种奇葩机型的问题·····
啊···· 脑壳疼·····(还有 H5 还没说要做呢😔)
所以,我放弃了😂·····
选择了个第三放来做深度跳转,选谁呢?
我是有原则😎,必须满足我的要求采用:
- 第一要功能满足
- 第二使用要简单,但是要足够灵活
- 第三忽略前两条,最重要的是要免费(我没钱😂)
我选择了极光全家桶里的“极光魔链JMLink”😄。
第一次集成和使用还是遇到了一些问题和踩了写坑,也看到了一些“傻大个”在社区提的“傻大个问题(使用错误导致的问题😂,10个问题就有8个半是不会用,其他公司的SDK感觉比较死板,很多平台只能用浏览器打开,JMLink 适配了很多平台,可能是太灵活了😂,导致好些人不会用)”。
下面我来说说正确的使用吧。
不对,
下面我来为大家讲解一下各端的正确使用姿势(😎正式点)
注意了,开始上课
一、前言
JMLink 是分为JS SDK、iOS SDK、Android SDK 三个端的SDK的,深度跳转一般都是 H5 界面和客户端的交互,当然也有H5、记事本、短信、邮件等渠道,魔链也都是支持的。
我这里主要讲大众化的 H5 -- APP:
H5 界面,也就是我们投放或者说分享出去的界面,需要集成JS SDK,千万别直接投放或者分享极光短链(就是你在极光控制台创建的短链,下面会具体讲到什么是短链);
H5 界面在使用JS SDK 时,小哥哥小姐姐们要认真看集成文档,太多人乱使用了🤮
二、准备工作
2.1 首先你的要有极光账号
额··· 这个不想说,自己点链接去注册吧!! 用力戳我😂注册
2.2 创建应用
还是那个套路,还是那个味道。先创建应用,然后有AppKey,巴拉巴拉的一些东西
我创建了一个名为《Demo》的应用,然后系统会自动分配AppKey,然后进入到魔链的设置页(不知道路径的话,看下一张图的)
2.3 设置魔链相关配置
在这个魔链的设置页面里有如下模块:Android、iOS、高级、域名设置:
2.3.1 Android模块
Android模块有如下东东:
- 应用包名:这不多说,是个搬砖的都知道。一旦指定,不可更改。
- Scheme:这个也不想说,是个搬砖的也应该都知道。支持字母和数字,建议都用小写字母,如 jiguang123。
- 应用下载地址:当设备没有安装APP时,通过短链服务引导用户到当前地址安装APP
- AppLink:这个我是觉得没必要开,好多厂商不支持
2.3.2 iOS模块
iOS模块有如下东东:
- Bundle ID:这个也不多说,全国人民都知道
- Scheme:😔,如 jiguang123 。xcode里在 Target-> Info -> URL Types
- 应用下载地址:当设备没有安装APP时,通过短链服务引导用户到当前地址安装APP
- Universal Link:这个就有点重要了,这个是相对scheme跳转更加好用的和强大的,
- 详细的 scheme和universal link 讲解可以看这篇文章
- universal link 的设置请仔细查看 集成指南
- 不明白的我继续讲😄
- 这里需要填写一下你证书的组织单位,电脑钥匙串里双击你的证书就能看到
- 填写证书组织单位后,极光就会自动给你分配域名,帮你配置好apple-app-site-association文件
- 具体分配了哪些域名,哪些域名支持universal link 那就要看[域名设置]模块
2.3.3 高级设置
这个高级设置里的东西有必要提醒一下各位,没事别找事,不要乱开乱关,会蛋疼的😔
- 应用宝微下载地址:这个我没配置,配置会好多鸟事,腾讯系的微信、QQ、QQ 浏览器好多鸟事,不配置大不了就提示用系统浏览器打开,配置了你会遇到很多你想不到的酸爽故事,哦不对,是事故😂
- 开启应用宝跳转:上面地址都不配,所以我这里也是关闭的,iOS就这是完全完全没必要开
- 场景还原时间:我看到有些社区的人把时间设置为0,卧槽,那干毛线,都是0那还还原个毛线啊
2.3.4 域名设置
这个域名设置就厉害哦🤩,极光会给每个应用的魔链分配多个域名,至少是2个哈,为什么这样做了(我猜是如下原因😂):
- 第一为了universal link 跨域跳转的更灵活,随便跳,
- 第二为了防止以为被某些xx平台封禁了某个域名(当然,正常是不会封禁,除非不正当使用比如上面说的直接投放短链,没有自己的H5 页面,还有违规应用也是会被封的)
好了,我们继续看这个域名设置界面,
- 域名:就是极光分配的域名地址
- universal link:这个是表示当前域名是否支持UL
- 建议把所有域名都设置支持UL
- 支持 UL 的域名,把所有支持UL的域名要配置到 xcode 里
- 一定把所有支持UL的域名要配置到 xcode 里,不然会跳转失败的
- xcode 路径在:target ,点击Capablities,开启Associated Domains
- 我是建议把所有分配的域名,不管是否打开UL ,都配置到xcode
- 因为你可能现在没开,后面你又想支持,但是你又没配置到xcode里,那就没得玩了
- App Link:和前面Android模块里说的一样,没事就不开这个了😔
- 微信打开:这个是说这个域名直接投放在微信里是否能打开
- 所以,建议要有自己H5 界面,前面强调好几次了
- 这个【微信打开】是无法自己操作的,如果需要全部都支持估计应该找极光商务申请
- 操作:这个大概意思就是我们自己选一个做为魔链的域名
三、开始工作
我们先来定义个使用场景吧,下面的工作更方便说明情况,
举个栗子:
某电商平台,正在浏览手机商品详情,我分享这个给微信好友,好友点开分享的商品H5 页面,然后点击里面的【打开APP】按钮,跳转到APP,然后跳转到手机商品详情。
3.1 创建短链
前面把各种准备和配置都整好了,现在开始工作了,既然是深度跳转,那么得先有条链接,极光平台称职为:短链
创建需要填写一些东西,我这里使用的是动态参数,因为大部分情况下参数都是变动的,不可能是写死的,比如商品id 每次肯定是不一样的。
创建短链的域名是可以选择的(不清楚的就用默认的域名)
对于短链参数的设置:
- 可以写成动态参数,然后通过JS SDK 从H5 页面动态传值
- 也可以不写,然后通过JS SDK 从H5 页面设置自定义参数
创建好了之后就是这样的
短链接:就是我们前面所说的“短链”,这个短链直接放微信/QQ/浏览器里是有默认模板页的,可以打开APP,但是前面说了强烈建议不要直接使用这个短链进行投放,要有自己的H5 页面。
在测试阶段可以直接使用这个短链来测试,检验跳转、获取参数等。
3.2 H5 前端
对于JS SDK 的使用,请查看 Web SDK 集成指南 和 Web SDK API
这里重点讲一下参数的使用,对于 JS SDK 的传参方式我是推荐使用下面两种:
- config.params:自定义参数,这些参数不是极光魔链后台的 jmLink 服务配置中设置的参数占位符,可以直接通过 JS SDK 随时任意传
- config.plhparams:这个是占位符参数,这写参数需要在极光控制台配置动态参数,上面讲到过
- 其他类型参数,别瞎折腾(有些人会说他们想要用无码邀请参数啊,别急,文末我会说一下为什么别瞎折腾也能实现)
注意:
* 在界面初始化时就要去初始化JS SDK ,不要点击按钮时才初始化
* 如果不使用 JS SDK 就跳过此步骤,直接使用 短链 进行和客户端的测试联调
3.3 iOS 端
iOS端需要配置好bundle id 、scheme 和 Universal link域名,这些简单配置的值都是在极光控制台可以看到的,上面章节有截图说明的。xcode 的具体配置路径就看iOS SDK 集成指南 (很简单的😔,不要写错)
3.3.1 导入 SDK
CocoaPods导入
1、cd到项目根目录,执行pod setup
2、在 Podfile 文件中添加命令:pod 'JMLink'
3.3.2 初始化
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if (@available(iOS 14,*)) {
/// 因为 iOS 14 开始APP与外部通过剪切板传递数据会有系统弹框
/// 如果不介意有系统弹框可以去掉这个判断
/// 通过剪切板来传递数据会很大程度增加成功率
/// 注:SDK 不会读其他数据,只是从 H5 传递魔链的数据到 SDK
[JMLinkService pasteBoardEnable:NO];
}
[JMLinkService setDebug:YES];
JMLinkConfig *mlinkConfig = [[JMLinkConfig alloc] init];
mlinkConfig.appKey = JG_APP_KEY;
[JMLinkService setupWithConfig:mlinkConfig];
....
}
初始化SDK要放在主线程,启动时就初始化
3.3.3 拉起APP
JMLink 通过标准的 Scheme(iOS<9),Universal Links(iOS≥9)技术,在 app 已安装的情况下,从各种浏览器(包括微信、QQ、新浪微博、钉钉等主流社交软件的内置浏览器)拉起 app 并传递动态参数。
a) 集成通用链接(Universal Links),只适用于iOS9以上
在 Xcode 中配置 JMLink 为当前应用生成的关联域名(Associated Domains):
注意:极光会为应用分配多域名,我们只需要把所有分配的域名都填上就好了。
在AppDelegate
中添加通用链接(Universal Links)回调方法,委托给 JMLink SDK 来处理
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
[JMLinkService continueUserActivity:userActivity];
return YES;
}
b) 集成 Scheme,只适用于iOS9以下
在Xcode里选中 Target -> Info -> URL Types,配置你在极光控制台设置的 Scheme,如图所示:
在AppDelegate
中添加 Scheme 回调方法,委托给 JMLink SDK 来处理
//iOS9以下,通过url scheme来唤起app
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
[JMLinkService routeMLink:url];
return YES;
}
//iOS9+,通过url scheme来唤起app
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(nonnull NSDictionary *)options{
[JMLinkService routeMLink:url];
return YES;
}
3.3.4 获取参数
- 一链拉起:H5 点击按钮唤起APP
- 场景还原:H5 点击下载APP,用户打开APP还原到原来 H5 浏览的内容
- 无码邀请:无需填写邀请码就能自动匹配
一链拉起、场景还原、无码邀请,获取参数其实都可以使用同一个接口来获取,只是一个概念的转换和理解。
为什么只写一个defaultHandler
的回调呢?,那个通过短链服务 key 获取参数的呢?获取无码邀请参数的接口呢?
😔 很多人会问,有这么多接口为什么就用一个?
其实,很简单,截图上也说了,说白了深度跳转就是 H5 传值到 APP ,我们拿到参数后做自己的逻辑处理,是不是?
所以,不需要去整那么多花花肠子。
- 那个通过短链服务 key 获取参数的接口多此一举,而且还会增加万一匹配 key 适配的风险;
- 无码邀请参数,也是参数,直接通过动态参数、自定义参数传就可以了。
我们我们需要的只是正确拿到参数就可以了,所以都走defaultHandler
回调接口去拿,因为SDK就算匹配短链服务 key 失败也会走。
又有人说,我们就是需要用无码邀请参数去做地推的啊。
卧槽,大哥,换个思路好不啦。无码邀请只不过是SDK单独给了一个接口让你去设置和获取参数而已,你何必这么为难自己,还为难前端开发,多去写一个接口呢,还多管一套逻辑。
所以,我们只需要定义好自己的参数协议,然后通过JS SDK 传动态参数值/自定义参数值,最后客户端直接调用一个defaultHandler
回调接口获取参数就好了。拿到参数后自己去判断是什么类型、跳转到什么页面、是否地推参数·····等,都是自己的参数协议
注意:
- 如果你有个参数是 url,那么在设置参数前最好加密一下,比如简单的 base64,嵌套url容易出问题
- 如果你的参数是有各种特殊字符,那么在设置参数前最好加密一下,比如简单的 base64
- 如果你的参数都是无法确认,那么用JS SDK 的自定义参数,或则你就设置个json 的动态参数😄到时候让前端传一个机密后的json 字符串
3.4 Android 端
Android 端这边请认真仔细严格参考Android集成指南 配置包名、scheme之类的东西,这些都很基础啊,不要配错了,到时候又叽叽哇哇说这个失败啊,那个失败的。😔
对于获取参数,和iOS端一样,就注册一个defaultHandler
就好了,其他的不需要,不需要,不需要。
原理和解析内容和上面iOS的一样。
注意:
- 初始化SDK要放在主线程,启动时就初始化
四、资源
4.1 完整 demo 源码
😄文字太多,太无力,程序员们都不喜欢看文章,那直接看代码的。
其实,这个代码就是极光的😂,他们有个相对完整的APP,还有源码哦
极光魔链 APP iOS
极光魔链 APP Android
极光魔链 APP Web
(其实三个都是在同一个GitHub仓库 极光魔链APP Demo)
0条评论