前言
在前面的文章中，我們介紹了UIWebView领猾、WKWebView一些使用，與JS的交互和一些坑骇扇，相信看過的小伙伴們摔竿，已經大概清楚了吧，如果有問題少孝，歡迎提問继低。
本文是本系列文章的最后一篇，主要為小伙伴們分享下Safari調試稍走、與前端的配合以及實際應用中一些需求的實現(xiàn)等：
- iOS中UIWebView與WKWebView袁翁、JavaScript與OC交互柴底、Cookie管理看我就夠（上）
- iOS中UIWebView與WKWebView、JavaScript與OC交互粱胜、Cookie管理看我就夠（中）
- iOS中UIWebView與WKWebView柄驻、JavaScript與OC交互、Cookie管理看我就夠（下）
關于文中提到的一些內容焙压，這里我準備了個Demo鸿脓，有需要的小伙伴可以下載。
本文目錄
- 前言
- Safari調試
- 開啟Safari開發(fā)菜單
- iPhone開啟Web檢查器
- 運行App
- 調試對應的頁面
- 與前端配合解決bug
- 實際應用中一些需求的實現(xiàn)
- 自定義瀏覽器UserAgent
- Native與H5共享登錄狀態(tài)
- Native預覽H5頁面中的image
- 分析
- 方案
- UIWebView實現(xiàn)
- WKWebView實現(xiàn)
- 注意
- Native加載并緩存H5頁面中的img
- Native分享H5頁面到微信涯曲、QQ等
- Native為H5提供一套Native Api（微信野哭、支付寶小程序）
- 分享
- 從通訊錄選擇聯(lián)系人
- 掃描二維碼
- 總結
Safari調試
在前面的文章中，查看網頁的Cookie幻件，其實已經用到了Safari調試拨黔。筆者覺得Safari調試功能真的很有用，通過它可以輕松定位問題的所在绰沥。也因此蓉驹，公司中App一旦有問題出現(xiàn)，不管是客戶端的問題揪利，還是前端的問題态兴，找問題的重任都落到了筆者的身上呢。這一度是一個困擾??疟位。想象一下瞻润，h5頁面的一個bug，App端幫忙快速定位甜刻，并且告知h5相關開發(fā)人員該如何修復绍撞，是多么偉大的一件事情。
下面來簡單講講怎么用Safari調試得院。
開啟Safari開發(fā)菜單
在Mac的Safari偏好設置中傻铣，開啟開發(fā)菜單。具體步驟為：Safari -> 偏好設置… -> 高級 -> 勾選在菜單欄顯示“開發(fā)”菜單祥绞。
iPhone開啟Web檢查器
具體步驟為：設置 -> Safari -> 高級 -> Web 檢查器非洲。
運行App
打開項目，Cmd + R 運行蜕径，打開想調試的Web頁面两踏。
調試對應的頁面
打開Safari -> 開發(fā) -> 設備 -> URL。
選中的頁面會變成藍色兜喻，點擊然后打開了如下的界面梦染。
這個頁面就很像Windows 平臺Chrome的F12。可以打斷點：
查看斷點
查看Cookie
打印Cookie或者元素
比如我在這里Alert頁面的title帕识，輸入 alert(document.title);泛粹，你會在模擬器中看到彈窗
整體十分有用，操作的體驗跟Xcode很像肮疗，小伙伴們自行探索晶姊。
與前端配合解決bug
前端有一些問題，在瀏覽器中是無法調試的族吻，很可能只在App內的瀏覽器中才會復現(xiàn)帽借。這個時候你可以期待前端開發(fā)人員會使用Xcode和Safari調試來解決bug，或者靠自己超歌。畢竟大家的目標一致砍艾，給用戶提供一個更好的App，解決所有已知問題巍举。
這里我舉個例子脆荷，運用Safari調試來解決一個前端的bug。
比如新做的h5頁面中懊悯，有一個分享按鈕蜓谋，點擊調用原生的分享，但是發(fā)現(xiàn)炭分，點擊之后沒有反應了桃焕，什么問題呢？是Native端實現(xiàn)有問題捧毛，還是前端寫的有問題呢观堂？如圖
我們來幫忙看下吧，打開Safari Web 檢查器呀忧，定位到資源师痕，并且在share方法中添加斷點，如圖
會發(fā)現(xiàn)而账，并沒有斷住胰坟，而是頁面直接報錯了，仔細查看錯誤描述泞辐，share方法里多了一個“/”笔横，因此報錯了。當我點擊分享按鈕時
share狠裹。這里我需要說明一下：
當js中報錯的時候，報錯位置所在的函數以及報錯位置之后的代碼汽烦，都不會執(zhí)行，所以我點擊分享時莉御，提示的是找不到方法撇吞，因為js的語法不對俗冻，報錯了，這里解析不出來牍颈，所以也就沒有了
那么當我點擊分享下面的按鈕是煮岁，調用share下面定義的方法也就會提示找不到對應的函數了讥蔽。share迄薄、testAddMethod和之后的函數。
至此，問題找到了画机，只要告之前端開發(fā)人員即可冶伞，讓他修復即可。
實際遇到的問題可能要復雜的多步氏，可以通過斷點响禽，以及控制臺打印一些js變量的值，DOM操作來尋找問題荚醒，解決問題芋类。希望可以幫助到小伙伴們。
實際應用中一些需求的實現(xiàn)
自定義瀏覽器UserAgent
這個其實在App開發(fā)中界阁，比較重要侯繁。比如常見的微信、支付寶App等泡躯，都有自己的UserAgent贮竟，而UA最常用來判斷在哪個App內，一般App的下載頁中只有一個按鈕"點擊下載"精续，當用戶點擊該按鈕時坝锰，在微信中則跳轉到應用寶，否則跳轉到AppStore重付。那么如何區(qū)分在哪個App中呢顷级？就是js判斷UA。
//js中判斷
if (navigator.userAgent.indexOf("MicroMessenger") !== -1) {
//在微信中
}
關于自定義UA确垫，這個UIWebView不提供Api弓颈，而WKWebView提供Api，前文中也說明過删掀，就是調用customUserAgent屬性翔冀。
self.webView.customUserAgent = @"WebViewDemo/1.0.0"; //自定義UA，只支持WKWebView
而有沒有其他的方法實現(xiàn)自定義瀏覽器UserAgent呢披泪？有纤子。
//最好在AppDelegate中就提前設置
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//設置自定義UserAgent
[self setCustomUserAgent];
return YES;
}
- (void)setCustomUserAgent
{
//get the original user-agent of webview
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero];
NSString *oldAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
//add my info to the new agent
NSString *newAgent = [oldAgent stringByAppendingFormat:@" %@", @"WebViewDemo/1.0.0"];
//regist the new agent
NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", newAgent, @"User-Agent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];
}
@end
上面的代碼，展示了在原有UserAgent的基礎上，添加一些自定義的內容控硼。
可以看到原本的UA后面已經有我們添加的內容了WebViewDemo/1.0.0泽论。
這里需要說明的是：
- 通過
NSUserDefaults設置自定義UserAgent，可以同時作用于UIWebView和WKWebView卡乾。WKWebView的customUserAgent屬性翼悴，優(yōu)先級高于NSUserDefaults，當同時設置時幔妨，顯示customUserAgent的值鹦赎。如上圖。
Native與H5共享登錄狀態(tài)
這個需求在前面的文章中針對WKWebView和UIWebView分別單獨做過介紹误堡。維持登錄狀態(tài)古话，依賴的是相同的Cookie。
UIWebView實現(xiàn)起來基本不需要做額外的操作埂伦，只要保證sharedHTTPCookieStorage中的Cookie是沒問題的煞额。
WKWebView實現(xiàn)起來相對麻煩，有很多坑沾谜，這里不再詳細描述膊毁，小伙伴們可以看下上篇文章中Cookie管理一節(jié)。
Native預覽H5頁面中的image
這個需求基跑，應該是一個比較常見的需求婚温。在微信中瀏覽網頁時，看到喜歡的圖片媳否，你會點擊圖片查看大圖栅螟，然后長按圖片保存。
分析
如果你的項目中有這樣的需求的話篱竭，可能你需要做如下的分析力图。
- 如果想在Native預覽H5中的image，最需要的是什么掺逼？是圖片的鏈接吃媒。如果能有縮略圖更好了。
- 只要獲取了鏈接吕喘，就可以跳轉到一個
ViewController中赘那，預覽圖片，后續(xù)長按保存自然水到渠成氯质。- 那應該如何獲取圖片的鏈接呢募舟？通過JS -> OC 傳遞圖片url。
這里闻察，究竟如何實現(xiàn)獲取圖片鏈接拱礁，取決于你用的是UIWebView還是WKWebView琢锋。
方案
當頁面加載完成后，給html頁面中所有無默認點擊事件的
<img>添加點擊事件觅彰，當用戶點擊時吩蔑，拿到所有參數钮热。（其實這不是最好的方案填抬，最好的解決方案是，跟前端約定一下隧期，哪些圖片需要預覽飒责，哪些img標簽的id統(tǒng)一，或者有個特定的屬性仆潮，這樣客戶端可以根據id找到這些img標簽）
首先宏蛉，Html中有個img標簽
我先寫好一個ImgAddClickEvent.js文件，來實現(xiàn)給所有無默認點擊事件的<img>添加點擊事件性置。
//獲取所有img標簽
var imgs = document.getElementsByTagName("img");
//獲取所有的imgUrl
var imgUrls = new Array();
var x = 0;
var y = 0;
var width = 0;
var height = 0;
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
//如果圖片鏈接存在
if (img.src || img.getAttribute('data-src')) {
//添加到圖片鏈接數組中
imgUrls.push(img.src || img.getAttribute('data-src'));
//如果圖片沒有默認的onclick事件拾并，且父元素不是a標簽，則添加onclick事件鹏浅，當用戶點擊時嗅义，把圖片鏈接回傳給Native
if (!img.onclick && img.parentElement.tagName !== "A") {
//給圖片添加下標的屬性
img.index = i; //記錄下標
//添加點擊事件，并且回傳選中的圖片鏈接隐砸、下標之碗、屏幕上的位置、全部的圖片數組等
img.onclick = function() {
x = this.getBoundingClientRect().left;
y = this.getBoundingClientRect().top;
x = x + document.documentElement.scrollLeft;
y = y + document.documentElement.scrollTop;
width = this.width;
height = this.height;
var imgInfo = {
imgUrl: this.src || this.getAttribute('data-src'),
x: x,
y: y,
width: width,
height: height,
index: this.index,
imgUrls: imgUrls
};
//UIWebView使用
h5ImageDidClick(imgInfo);
}
}
}
}
function h5ImageDidClick(info) {
//WKWebView使用
window.webkit.messageHandlers.imageDidClick.postMessage(info);
}
下面分別介紹UIWebView和WKWebView如何實現(xiàn)季希。
UIWebView實現(xiàn)
UIWebView直接使用JavaScriptCore給<img>添加onclick方法為OC的實現(xiàn)即可褪那。
- (void)webViewDidFinishLoad:(UIWebView *)webView {
[self convertJSFunctionsToOCMethods];
}
- (void)convertJSFunctionsToOCMethods {
//獲取該UIWebview的javascript上下文
//self持有jsContext
//@property (nonatomic, strong) JSContext *jsContext;
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//先注入給圖片添加點擊事件的js
//防止頻繁IO操作，造成性能影響
static NSString *jsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"ImgAddClickEvent" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
[self.jsContext evaluateScript:jsSource];
//替換回調方法
self.jsContext[@"h5ImageDidClick"] = ^(NSDictionary *imgInfo) {
NSLog(@"UIWebView點擊了html上的圖片式塌，信息是：%@", imgInfo);
};
}
WKWebView實現(xiàn)
而WKWebView實現(xiàn)博敬，需要使用WKUserScript和scriptMessageHandler，下面簡單介紹下峰尝，詳細實現(xiàn)偏窝，見Demo。
WKWebView的UIViewController中實現(xiàn)如下
/**
頁面中的所有img標簽添加點擊事件
*/
- (void)imgAddClickEvent {
//防止頻繁IO操作境析，造成性能影響
static NSString *jsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"ImgAddClickEvent" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
//添加自定義的腳本
WKUserScript *js = [[WKUserScript alloc] initWithSource:jsSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
[self.webView.configuration.userContentController addUserScript:js];
//注冊回調
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"imageDidClick"];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"imageDidClick"]) {
//點擊了html上的圖片
NSLog(@"點擊了html上的圖片囚枪，參數為%@", message.body);
}
}
當我點擊這個標簽時，因為我添加了onclick事件劳淆，在OC端我會接收到回調链沼。因此打印出log
注意
上面無論是
UIWebView還是WKWebView，參數中的x沛鸵，y是不包含自定義scrollView的contentInset的括勺，如果要獲取圖片在手機屏幕上的位置：x = x + self.webView.scrollView.contentInset.left; y = y + self.webView.scrollView.contentInset.top;
拿到了這些信息缆八，想必，你可以實現(xiàn)一個十分完美的圖片預覽效果了疾捍。
Native加載并緩存H5頁面中的img
因為頁面中的img標簽加載圖片的網絡請求是由WebView管理的奈辰，所以要想Native接管圖片的下載，只有2條路：
- 在頁面加載前乱豆，把頁面中img標簽的src換成一張native的占位圖或者""奖恰，并且把img.src傳遞到native，在native下載圖片或者讀取緩存完畢后宛裕，再把相應的img標簽的src設置成本地的瑟啃，如img.src ="native cache url"。整體交互是JS->Native, Native -> JS揩尸。
NSURLProtocol攔截WebView的所有圖片請求蛹屿，交由我們自己管理。
比較有可行性的是方法2岩榆。但也只限于UIWebView错负。WKWebView上篇文中說過，雖然有私有Api勇边，但是筆者不推薦使用犹撒。
先說下，為何方法1不可行粥诫。首先油航，頁面加載前，是在什么時候呢怀浆？如果h5不做修改谊囚，全部交由Native端處理，是沒有辦法修改html的执赡，因為UIWebView和WKWebView都沒有提供一個Api镰踏，在圖片加載之前告訴你html是什么內容，所以這個方法是走不通的沙合。除非你用loadHTMLString的方法加載奠伪，加載前先替換img的src。但是loadHTMLString的方法首懈，又加載不到Web端的js和css绊率，只能用于本地拼接完整HTML String的情況，不適用于一般的場景究履。So滤否，這條路是走不通的，局限性太大了最仑。
方法2的核心思路就是攔截請求藐俺，最核心的是在你的NSURLProtocol子類中炊甲，實現(xiàn)這個方法
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
//處理過不再處理
if ([NSURLProtocol propertyForKey:DAURLProtocolHandledKey inRequest:request]) {
return NO;
}
//根據request header中的 accept 來判斷是否加載圖片
/*
{
"Accept" = "image/png,image/svg+xml,image/*;q=0.8,*\/*;q=0.5\";
"User-Agent" = "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E269 WebViewDemo/1.0.0";
}
*/
NSDictionary *headers = request.allHTTPHeaderFields;
NSString *accept = headers[@"Accept"];
if (accept.length >= @"image".length && [accept rangeOfString:@"image"].location != NSNotFound) {
return YES;
}
return NO;
}
當攔截到圖片請求時，再做后續(xù)的處理欲芹，下面寫一些偽代碼
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {
return [super requestIsCacheEquivalent:a toRequest:b];
}
- (void)startLoading {
NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
//這里也可以添加一些自定義的header卿啡，看具體需求
//標記該request已經處理過
[NSURLProtocol setProperty:@(YES) forKey:DAURLProtocolHandledKey inRequest:mutableReqeust];
//這里NSURLProtocolClient的相關方法都要調用
//比如 [self.client URLProtocol:self didLoadData:data];
.....
}
- (void)stopLoading {
.....
}
這部分代碼，Demo中并沒有完全實現(xiàn)菱父，如果小伙伴們有興趣研究下具體的實現(xiàn)颈娜，可以參考這篇文章， 筆者這里就不多說了滞伟。
Native分享H5頁面到微信揭鳞、QQ等
這個需求，其實我在前面的文章中針對UIWebView和WKWebView都已經做了很詳細的介紹梆奈。這里，簡單分享下如何獲取分享的內容称开。
一般分享到微信或者QQ至少需要的參數是
- Title（主標題）
- Description（副標題或者描述）
- ThumbnailImage（縮略圖）
- WebpageUrl（h5頁面的鏈接）
這些參數亩钟，都怎么獲取呢？通過OC->JS的方式鳖轰，獲取清酥。當然你也可以自定義。
var title = document.title;
var desc = document.getElementsByTagName("article")[0].textContent; //或者 document.body.innerText; 或者 document.getElementById("yourId").innerText;
var thumbnailImageUrl = document.getElementsByTagName("img")[0].src; //或者看需求取哪個
var webpageUrl = location.href;
具體如何用OC調用JS獲取這些值蕴侣，這里就不多說了焰轻，看過前面文章的小伙伴，可以自行實現(xiàn)昆雀。
Native為H5提供一套Native Api（微信辱志、支付寶小程序）
很多時候，Native與H5交互得深了狞膘，必定會有一些更深層次的需求揩懒。比如h5想控制頁面的pop、push挽封、present已球，想調用Native的Share，想調用Native的掃描二維碼功能辅愿，獲取掃描結果……
那么近半年比較??的小程序智亮，微信提供的一些Api（掃碼、選擇照片等）都是如何實現(xiàn)的呢点待？很明顯阔蛉，native提供的。
筆者作為支付寶小程序（尚未發(fā)布）的內測用戶之一亦鳞，也接觸了支付寶小程序馍忽，其中也有很多Api是native提供的棒坏。
其實這就涉及到一個完整的Native與JS交互的流程，從JS->Native到Native->JS遭笋。也就是前面介紹過的坝冕，異步回調結果。這個不局限于iOS瓦呼，Android也是同樣的喂窟。
首先，我們?yōu)镠5提供一套Api央串，那自然Api是暴露給js的磨澡，所以這些Api也是js的。筆者封裝了一個接口文件：NativeApi.js（在最新的Demo中有）质和。下面針對一些需求稳摄，分析下封裝和實現(xiàn)。其中用到了js閉包饲宿，需要一點js知識厦酬。
分享
前面的文章中，筆者最常舉的一個例子就是分享瘫想，Native為H5提供原生的分享方法仗阅，h5調用后可以獲取分享結果（成功or失敗）国夜。這里針對分享這個如何實現(xiàn)减噪，就不贅述了。筆者直接貼上適用于WKWebView的js代碼车吹。
/**
* Native為H5提供的Api接口
*
* @type {js對象}
*/
var DANativeApi = (function() {
var NativeApi = {
/**
* 分享
* @param {js對象} shareInfo 分享信息和回調
* @return {void} 無同步返回值筹裕，異步返回分享結果 true or false
*/
share: function(shareInfo) {
if (shareInfo == undefined || shareInfo == null || typeof(shareInfo) !== "object") {
alert("參數" + JSON.stringify(shareInfo) + "不合法");
} else {
alert("分享的參數為" + JSON.stringify(shareInfo));
}
//調用native端
_nativeShare(shareInfo);
}
}
//下面是一些私有函數
/**
* Native端實現(xiàn)，適用于WKWebView礼搁，UIWebView如何實現(xiàn)饶碘，小伙伴自己動腦筋吧~
* @param {js對象} shareInfo 分享的信息和回調
* @return {void} 無同步返回值，異步返回
*/
function _nativeShare(shareInfo) {
//用于WKWebView馒吴，因為WKWebView并沒有辦法把js function傳遞過去扎运，因此需要特殊處理一下
//把js function轉換為字符串，oc端調用時 (<js function string>)(true); 即可
//如果有回調函數饮戳，且為function
var callbackFunction = shareInfo.result;
if (callbackFunction != undefined && callbackFunction != null && typeof(callbackFunction) === "function") {
shareInfo.result = callbackFunction.toString();
}
//js -> oc
// 至于Android端豪治，也可以，比如 window.jsInterface.nativeShare(JSON.stringify(shareInfo));
window.webkit.messageHandlers.nativeShare.postMessage(shareInfo);
}
//閉包扯罐，把Api對象返回
return NativeApi;
})();
/*
//調用時负拟，分享
DANativeApi.share({
title: document.title,
desc: "",
url: location.href,
imgUrl: "",
result: function(res) {
// body...
alert("分享結果為：" + JSON.stringify(res));
}
});
*/
Native端不貼了，小伙伴們看Demo吧歹河。
從通訊錄選擇聯(lián)系人
這里筆者再舉個從通訊錄選擇聯(lián)系人的例子掩浙，從js到native花吟，再從native到js。
首先js端厨姚，添加如下實現(xiàn)
/**
* Native為H5提供的Api接口
*
* @type {js對象}
*/
var DANativeApi = (function() {
var NativeApi = {
/**
* 從通訊錄選擇聯(lián)系人
* @return {void} 無同步返回值衅澈，異步返回選擇的結果
*/
choosePhoneContact: function(param) {
//具體是否需要判斷
//調用native端
_nativeChoosePhoneContact(param);
}
}
//下面是一些私有函數
/**
* Native端實現(xiàn)選擇聯(lián)系人，并異步返回結果
* @param {[type]} param [description]
* @return {[type]} [description]
*/
function _nativeChoosePhoneContact(param) {
var callbackFunction = param.completion;
if (callbackFunction != undefined && callbackFunction != null && typeof(callbackFunction) === "function") {
param.completion = callbackFunction.toString();
}
//js -> oc
window.webkit.messageHandlers.nativeChoosePhoneContact.postMessage(param);
}
//閉包谬墙，把Api對象返回
return NativeApi;
})();
/*
//選擇聯(lián)系人
DANativeApi.choosePhoneContact({
completion: function(res) {
alert("選擇聯(lián)系人的結果為：" + JSON.stringify(res));
}
});
*/
OC端依然加載此文件今布，并注冊handler
/**
添加native端的api
*/
- (void)addNativeApiToJS
{
//防止頻繁IO操作，造成性能影響
static NSString *nativejsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
nativejsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"NativeApi" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
//添加自定義的腳本
WKUserScript *js = [[WKUserScript alloc] initWithSource:nativejsSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[self.webView.configuration.userContentController addUserScript:js];
//注冊回調
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"nativeChoosePhoneContact"];
}
#pragma mark - WKScriptMessageHandler js -> oc
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//選擇聯(lián)系人
if ([message.name isEqualToString:@"nativeChoosePhoneContact"]) {
NSLog(@"正在選擇聯(lián)系人");
[self selectContactCompletion:^(NSString *name, NSString *phone) {
NSLog(@"選擇完成");
//讀取js function的字符串
NSString *jsFunctionString = message.body[@"completion"];
//拼接調用該方法的js字符串
NSString *callbackJs = [NSString stringWithFormat:@"(%@)({name: '%@', mobile: '%@'});", jsFunctionString, name, phone];
//執(zhí)行回調
[self.webView evaluateJavaScript:callbackJs completionHandler:^(id _Nullable result, NSError * _Nullable error) {
}];
}];
}
}
具體回調方式拭抬，在之前的WKWebView中部默，講過了，這里不再贅述造虎，選擇聯(lián)系人用的是Contacts框架傅蹂，具體的小伙伴可以看Demo。
整體效果如下：
掃描二維碼
相信看過從通訊錄選擇聯(lián)系人的實現(xiàn)累奈，小伙伴們可以自行實現(xiàn)掃描二維碼了吧~ 快動手嘗試一下吧~
總結
本文給小伙伴們介紹了下Safari調試贬派，以及其具體運用，并且分享了實際應用中一些需求的實現(xiàn)方式澎媒。
結合前面的兩篇文章， 相信現(xiàn)在小伙伴們一定對WebView有相當深刻的理解了吧波桩。那么戒努，本系列文章也告一段落了，具體有問題的話镐躲，歡迎提問储玫。
