iOS开发基础98-跳转淘宝案例

在iOS应用开发中，实现点击广告跳转至淘宝商品详情页的需求，要求能在WebView中加载淘宝商品页面，并允许用户在淘宝客户端中查看商品详情和评论。为了解决这一需求，我们可以通过拦截特定URL并利用淘宝的URL Scheme来跳转至淘宝客户端。本文将详细介绍实现过程，并分析其中的细节与底层逻辑。

实现目标

1. 在应用内WebView中加载淘宝商品详情页。
2. 用户操作如点击评论时，能跳转至淘宝客户端查看详细信息。

解决方案

通过分析淘宝的网页请求，发现淘宝在跳转操作中会使用特定的URL Scheme（tbopen开头的地址）。利用这个特性，我们可以拦截这些URL，实现从WebView跳转至淘宝客户端。

第一步：在Info.plist添加白名单

苹果的应用安全机制要求在Info.plist文件中声明需要使用的URL Scheme白名单。需要添加tbopen到白名单中，以便我们能够使用淘宝的URL Scheme进行跳转。

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>tbopen</string>
    <string>taobao</string> <!-- 可选，如果需要手动拼接URL -->
</array>

第二步：拦截tbopen关键字，处理对应的业务逻辑

在应用中使用WKWebView加载网页，并在打开淘宝页面时拦截URL跳转至淘宝客户端。实现方法如下：

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSURL *requestUrl = navigationAction.request.URL;

    if ([navigationAction.request.URL.scheme containsString:@"tbopen"]) { // 拦截tbopen开头的URL
        if ([[UIApplication sharedApplication] canOpenURL:requestUrl]) { // 检查是否能打开淘宝客户端
            [[UIApplication sharedApplication] openURL:requestUrl]; // 打开淘宝客户端
        }
    } else {
        decisionHandler(WKNavigationActionPolicyAllow); // 允许WebView继续加载
    }
}

详细分析

1. URL Scheme白名单：

   • LSApplicationQueriesSchemes 是一个plist键，用于声明应用查询到其他应用URL Scheme的权限。将tbopen添加进去后，应用可以使用淘宝自定义的URL Scheme进行跳转。
   • 通过添加taobao可以更灵活地拼接URL，但需要了解并规范操作URL格式以确保跳转成功。

2. 拦截URL并跳转：

   • WKNavigationAction 提供了关于导航动作的信息。在其中可以获取请求的URL。
   • if ([navigationAction.request.URL.scheme containsString:@"tbopen"]) 判断URL是否使用tbopen协议。
   • canOpenURL: 方法用于检查当前设备是否可以处理指定的URL。
   • openURL: 方法实现打开淘宝客户端。

3. 注意事项：

   • 并非每次打开WebView都会立即调用tbopen开头的URL，但在第一次加载时通常会出现。拦截这些URL并跳转即可满足大部分需求。
   • 确保应用的配置文件和代码符合苹果安全机制及审核要求。

实际效果

经过配置和实现拦截代码后，可以确保在WebView中点击操作如跳转评论时，通过tbopen Scheme跳转至淘宝客户端，实现流畅的用户体验。

代码示例补充

完整的ViewController示例代码：

#import "ViewController.h"
#import <WebKit/WebKit.h>

@interface ViewController () <WKNavigationDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame];
    self.webView.navigationDelegate = self;
    [self.view addSubview:self.webView];
    
    NSURL *url = [NSURL URLWithString:@"https://detail.taobao.com/item.htm?id=XXXXXX"]; // 替换为实际的淘宝商品详情页URL
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSURL *requestUrl = navigationAction.request.URL;

    if ([requestUrl.scheme containsString:@"tbopen"]) { // 拦截tbopen开头的URL
        if ([[UIApplication sharedApplication] canOpenURL:requestUrl]) { // 检查是否能打开淘宝客户端
            [[UIApplication sharedApplication] openURL:requestUrl]; // 打开淘宝客户端
        }
    } else {
        decisionHandler(WKNavigationActionPolicyAllow); // 允许WebView继续加载
    }
}

@end

这个示例显示了如何在ViewController中实现拦截并处理tbopen URL Scheme，实现应用内WebView和淘宝客户端的无缝跳转。

总结

通过拦截并处理特定URL来实现应用内WebView与淘宝客户端的页面跳转，是一个利用URL Scheme优化用户体验的有效方法。通过在Info.plist中配置白名单和实现URL拦截逻辑，确保了WebView的内容加载和淘宝客户端的顺利跳转，使得广告点击操作更加流畅和交互性更强。

这种技术思路不仅适用于淘宝，也适用于其他支持URL Scheme跳转的第三方应用，具有广泛的应用价值与实际上手操作性。