iOS H5使用URL Scheme唤醒

在使用移动端设备访问类似京东等平台时，会发现右上角有个“立即打开”按钮，如果当前手机上又正好安装了京东App，那就会直接唤醒App并打开对应的“商品详情”页面；反之，如果没有安装则会跳转至下载App的落地页。本文主要以这个功能为例，描述如何实现iOS端通过Scheme唤醒。

截图.jpg

配置注意点：

1. Identifier必须配置为你当前工程的bundle identifier
2. URL Schemes必须独一无二

iOS工程配置.png

接下来在JS代码中，配置iOSUrl与上面的URL Schemes一致。

function openApp(){
    
    var iOSUrl = "projectcomApp://";//填URL Schemes

    var u = navigator.userAgent;
    var isIOS = !!u.match(/\i[^;]+;(U;)? CPU.+Mac OS X/);

    //判断是否是iOS
    if(isIOS){

        window.location.href = iOSUrl;

        var loadDataTime = Date.now();
        setTimeOut(function()){
            var timeOutDateTime = Date.now();
            if(timeOutDateTime - loadDataTime < 1000){
                window.location.href = "https://www.app.com/download.html";//填下载App落地页
            }
        }, 25);

    }
}

到此为止，唤醒功能就好了。用真机测试，用sarfari打开对应界面，点击按钮就可以打开App了。
接下来，实现传值商品ID，打开对应的“商品详情”页面，需要通过H5写逻辑传值给原生实现。将上面代码中iOSUrl参数修一下：

var iOSUrl = "projectcomApp://?product_id="+id;

在工程项目中AppDelegate.m中实现以下三个回调，并打上断点调试。注意：微信、支付宝SDK完成后返回App时也会走，注意判断url.scheme区分开逻辑。

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    
    return YES;
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{

  return YES;
}

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

    return YES;
}

取到url后将其解析，解析方法如下：

NSString*urlScheme=[url scheme];//获取schema
NSString*urlHost=[url host];

if([urlScheme isEqualToString:@"projectcomApp"]){ //判断Scheme

  NSDictionary *infoDic = [url.absoluteString ZB_dictionaryWithURLString];

  NSString *product_id = [infoDic objectForKey:@"product_id"];//获得商品id
//TODO:跳转商品详情
}

注意：微信白名单机制会导致分享到微信的页面无法正常打开原生App。

环路：原生分享->微信打开M站->唤醒原生跳转至对应界面。

附：微信分享功能实现

如果本文对你有所帮助记得点个喜欢哈