Webview和H5页面的交互方式（一）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

通过问题看本质！！！

用之前我们要明白，为什么要用它？它的优缺点是什么？

一、APP内为什么要用webview呢？

• 跨平台能力，一份代码在iOS和Android上都能运行；开发效率高、成本相对较低；
• 灵活的开发模式、以及热更新机制；
• 适合展示有大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样）的页面。

当然，它也有缺点。

• 在体验和性能上有很大的局限性；
• 图片和动画支持性不高；
• 户体验感较差；
• 无法调用手机硬件（摄像头、麦克风等）；

总结：一般是一些活动页面用到webview的场景比较多，适合快速迭代开发。

二、Webview和H5页面的交互方式

我们知道APP内无法避免要使用webview之后，就要捋起袖子干活了。接下来就是技术方案选型了。

• JavaScriptCore框架（支持UIWebview）
• url拦截
• WebViewJavascriptBridge
• WKScriptMessageHandler

三、JavaScriptCore框架（支持UIWebview）

JavaScriptCore框架是一个苹果在iOS7引入的框架，是苹果Safari浏览器的JavaScript引擎，其实就是基于webkit中以C/C++实现的JavaScriptCore的一个包装，让交互变得更加的简单方便。

2020年苹果已经强制使用WKWebiew了，UIWebView已经退出历史的舞台了。所以JavaScriptCore框架就不细说了。

四、url拦截方式

和前端同事约定好协议，如以xc://开头的链接，表示需要客户端处理。

//html代码
<a href="xc://scan">扫一扫(拦截url)</a>

//iOS端 wkwebview代理方法
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
   if ([navigationAction.request.URL.absoluteString isEqualToString:@"xc://scan"]) {
        //调用原生扫描二维码
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}