需求場景
- 做過電商App的可能都遇到過這樣的需求氮块,在商場首頁绍载,各種各樣動態(tài)的跳轉(zhuǎn),跳轉(zhuǎn)商品詳情滔蝉、秒殺列表击儡、品牌列表、搜索結(jié)果蝠引、分類結(jié)果頁面等等等等阳谍。同一個位置,可能今天跳這個商品螃概,明天跳轉(zhuǎn)那個商品矫夯,運營配的就是一個web端的URL。
- 攔截webView里面的URL吊洼。
需求分析
- 攔截各種各樣的URL训貌,跳轉(zhuǎn)到指定的原生頁面。
- URL的種類可能會一直增加冒窍。
- 指定位置即某個button點擊后的URL也不是固定的递沪,可以動態(tài)配置。
以前的解決方案
接手項目前综液,已經(jīng)有這個功能款慨,之前也沒有引入路由。這一塊的做法是:對url進行path匹配或者字符串匹配谬莹,成功后再做特殊的操作樱调。所以經(jīng)常出現(xiàn)這個url沒攔截,那個url跳錯了這樣的bug届良。每添加新的URL攔截都得修改代碼笆凌,發(fā)版。
新的解決方案
在客戶端引入路由后士葫,我們需要的應(yīng)該是下面這樣一個URLRewrite模塊乞而,將輸入的各種各樣的URL轉(zhuǎn)化為本地可以設(shè)別的路由URL。
做法是效仿天貓的Rewrite系統(tǒng)慢显。天貓團隊文章看這里:解耦神器---統(tǒng)跳協(xié)議和Rewrite引擎
原理
Rewrite引擎的原理非常簡單爪模,模擬Web容器(Apache/Nginx等)的Rewrite配置欠啤,根據(jù)配置把傳入的原始URL進行重寫,返回重寫后的目標URL屋灌,交給統(tǒng)跳協(xié)議處理洁段。
配置是通過正則表達式描述的Rewrite規(guī)則列表,這份列表通過后臺接口實現(xiàn)動態(tài)更新共郭。
關(guān)鍵點:URL是動態(tài)的祠丝,跳轉(zhuǎn)的頁面也是動態(tài)的,所以除嘹,URLRewrite中應(yīng)該也有一個動態(tài)的東西來對應(yīng)這個兩個動態(tài)的變化写半。那就是Rewrite的規(guī)則。規(guī)則可以由接口動態(tài)更新尉咕,所以可以做到不發(fā)版本添加新的URL解析叠蝇,新的頁面跳轉(zhuǎn)。
具體實現(xiàn)
后面會有具體的例子解析年缎,先看一下代碼實現(xiàn)悔捶。
規(guī)則的組成:規(guī)則有三個字段組成
- pattern 用來匹配原始URL的正則表達式串。
- targetUrl 轉(zhuǎn)換后的目標串单芜。
- flag 標記位蜕该,做一些特殊處理。
匹配過程:原始URL通過規(guī)則匹配缓溅,找到URL中的參數(shù)蛇损,將targetUrl字段里面的參數(shù)占位符替換成url中找到的參數(shù)。完成重寫坛怪。
//
// RewriteRule.h
// YTURLRewrite
//
// Created by brant on 2017/8/3.
// Copyright ? 2017年 瘦不拉機. All rights reserved.
//
#import <Foundation/Foundation.h>
@interface RewriteRule : NSObject
// 用來匹配的原始URL的正則串
@property (nonatomic, copy) NSString *pattern;
// 轉(zhuǎn)換后的目標串 參數(shù)占位用 $0, $1 這樣
// 這里是一個標準的本地路由
@property (nonatomic, copy) NSString *targetUrl;
// 標記位
// 值一:k: 保留原url淤齐,不做重寫
@property (nonatomic, copy) NSString *flag;
// 返回重寫后的url
- (NSString *)targetUrlWithParams:(NSArray *)params url:(NSString *)url;
@end
原始URL解析
/**
* 正則匹配返回符合要求的字符串及參數(shù)
數(shù)組
*
* @param string 需要匹配的字符串
* @param regexStr 正則表達式
*
* @return 符合要求的字符串及參數(shù)
數(shù)組
*/
+ (NSArray *)matchString:(NSString *)string toRegexString:(NSString *)regexStr {
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:regexStr options:NSRegularExpressionCaseInsensitive error:nil];
NSArray * matches = [regex matchesInString:string options:0 range:NSMakeRange(0, [string length])];
NSMutableArray *array = [NSMutableArray array];
for (NSTextCheckingResult *match in matches) {
for (int i = 0; i < [match numberOfRanges]; i++) {
//以正則中的(),劃分成不同的匹配部分
NSString *component = [string substringWithRange:[match rangeAtIndex:i]];
[array addObject:component];
}
}
return array;
}
匹配過程 app啟動時,更新服務(wù)器規(guī)則賦值給 self.rules
袜匿,沒有就讀取本地規(guī)則更啄。使用時,調(diào)用rewriteUrl方法返回重寫后的URL居灯。
/**
重寫url
@param url 要重寫的url
@return 返回重寫后的url
*/
- (NSString *)rewriteUrl:(NSString *)url {
for (RewriteRule *rule in self.rules) {
NSArray *array = [YTURLRewrite matchString:url toRegexString:rule.pattern];
if (array.count > 0) {
// 匹配到了
return [rule targetUrlWithParams:array url:url];
}
}
return url;
}
具體例子
原始URL: http://test.com/product/2345.html 這是運營配置的一個商品詳情的URL
self.rules
里面會有一條這樣的規(guī)則與之對應(yīng):
pattern:
^(?:https?:)\\/\\/test.(com|test)\\/product\\/([0-9]*).html$
targetUrl:
myappScheme://host.mobile/goodsDetail?goodsId=$2
flat:
空
原始URL經(jīng)過 [YTURLRewrite matchString:url toRegexString:rule.pattern]
方法后,匹配到上面這條規(guī)則祭务,返回的NSArray是這樣的:
array[0] : 是匹配到的字符串,即:http://test.com/product/2345.html
array[1]: 是后面用小括號括起來的參數(shù) com
array[2]: 也是小括號括起來的參數(shù) 2345
targetUrlWithParams
方法會返回targetUrl字符串怪嫌,$2這種參數(shù)占位符會被解析出來的參數(shù)替換掉义锥。
- (NSString *)targetUrlWithParams:(NSArray *)params url:(NSString *)url {
if ([self.flag isEqualToString:@"a"]) {
// 添加
return [NSString stringWithFormat:@"%@%@", url, self.targetUrl];
}
else if ([self.flag isEqualToString:@"k"]) {
// 保留原url
return url;
}
NSString *target = self.targetUrl;
// 將參數(shù)替換成從url中解析出來的參數(shù)
for (int i = 1; i < params.count; i++) {
target = [target stringByReplacingOccurrencesOfString:[NSString stringWithFormat:@"$%d", i] withString:params[i]];
}
return target;
}
所以最后Rewrite出來的URL是這樣的:myappScheme://host.mobile/goodsDetail?goodsId=2345
這是我們本地支持的路由,可以直接這樣處理: [YTRouter openUrl:myappScheme://host.mobile/goodsDetail?goodsId=2345];
跳轉(zhuǎn)到商品詳情頁面岩灭。
可以看到拌倍,這個URLRewrite引擎是只依賴規(guī)則的,所以要添加新的url,新的跳轉(zhuǎn)柱恤,只要后臺更新規(guī)則就可以了数初。