主要内容

• Safari调试
• swift/OC与JS互调
• 增加加载进度条
• 支持JS中alert、confirm、prompt

Safari调试

设置 —> safari --> 高级，开启JavaScript、网页检查器

打开Safari浏览器，选择调试的网页,同样在js里面可以断点调试:

swift/OC与JS互调

这里只介绍Swift，OC可以照着swift翻译即可

• swift调用JS，并传参数
  先定义一个JS函数，如：

    function add(params) {let msg  = JSON.stringify(params);showMsg("调用了add函数")}

swift调用JS实际上就是调用WKWebView的evaluateJavaScript方法

    /* @abstract Evaluates the given JavaScript string.@param javaScriptString The JavaScript string to evaluate.@param completionHandler A block to invoke when script evaluation completes or fails.@discussion The completionHandler is passed the result of the script evaluation or an error.Calling this method is equivalent to calling `evaluateJavaScript:inFrame:inContentWorld:completionHandler:` with:- A `frame` value of `nil` to represent the main frame- A `contentWorld` value of `WKContentWorld.pageWorld`*/open func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil)

参数javaScriptString就是JS的函数名+参数，如：
调用add的JS函数，javaScriptString为"add({\n “name” : “jack”\n})"
可以简单封装下调用方法：

    /// 调用JS函数/// - Parameters:///   - jsFunName: JS函数名///   - params: 传给JS函数的参数/// - Returns:func callJSFunction(jsFunName: String, params: Any?) -> Void {var js = String(format: "%@()", jsFunName)if let valueStr = params as? String {js = String(format: "%@('%@')", jsFunName, valueStr)} else if let valueNum = params as? NSNumber {js = String(format: "%@(%@)", jsFunName, valueNum)} else if let valueBool = params as? Bool {if valueBool {js = jsFunName + "(true)"} else {js = jsFunName + "(false)"}} else if let valueDiction = params {if let temValue =  converObjToJson(obj: valueDiction) {js = String(format: "%@(%@)", jsFunName, temValue)} else {js = String(format: "%@()", jsFunName)}} else {js = String(format: "%@()", jsFunName)}self.webView?.evaluateJavaScript(js) { (item, error) in}}

• JS调用swift，并传参数
  在JS端调用window.webkit.messageHandlers.自定义一个名称.postMessage(params)，如：
  var params = {“name”: “JSName”};
  window.webkit.messageHandlers.minus.postMessage(params);
  这个自定义的名称需要提前设置到WKWebView上，设置方法：

    /** @abstract Adds a script message handler to the main world used by page content itself.@param scriptMessageHandler The script message handler to add.@param name The name of the message handler.@discussion Calling this method is equivalent to calling addScriptMessageHandler:contentWorld:name:with [WKContentWorld pageWorld] as the contentWorld argument.*/open func add(_ scriptMessageHandler: WKScriptMessageHandler, name: String)

如：

        let userContent = WKUserContentController()// 配置JS可以调用的名称let jsCallFun: [String] = ["minus"]for value in jsCallFun {userContent.add(self, name:  value)}let config = WKWebViewConfiguration()config.preferences = preferencesconfig.userContentController = userContentconfig.suppressesIncrementalRendering = true

配置完后，当JS调用window.webkit.messageHandlers.minus.postMessage(params);时会进入到WSWebView的WKScriptMessageHandler代理方法userContentController
如：

    // MARK: - WKScriptMessageHandlerfunc userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {let name = message.name // 注册过的JS可调用的名称if name.elementsEqual("minus") {if let params = message.body as? NSDictionary { // JS传递的参数if let name = params.value(forKey: "name") as? String {minus(name: name)}}}}func minus(name: String) -> Void {showAlert(title: "Swift minus方法", message: "name:\(name)", modelArray: nil, cancelTitle: "确定", cancelHandle: {}, vc: self, sourceView: webView)}

总结：
我们常用的需求更多的场景应该是JS调用swift的某个方法后，再回调JS的某个方法，达到异步回调的效果，这时我们可以这样设计：
把JS的回调函数名当作参数传给swift的方法，swift处理完逻辑后直接调用这个参数：

 var params = {"name": "JSName","callBackFun": "minusCallback"};
window.webkit.messageHandlers.minus.postMessage(params);

而swift端：

    // MARK: - WKScriptMessageHandlerfunc userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {let name = message.name // 注册过的JS可调用的名称if name.elementsEqual("minus") {if let params = message.body as? NSDictionary { // JS传递的参数if let name = params.value(forKey: "name") as? String {let callback = params.value(forKey: "callBackFun") as? Stringminus(name: name, callBack: callback)}}}}func minus(name: String, callBack: String?) -> Void {showAlert(title: "Swift minus方法", message: "name:\(name)", modelArray: nil, cancelTitle: "确定", cancelHandle: { [weak self] inif let callBackFun = callBack {guard let self = self else { return }self.callJSFunction(jsFunName: callBackFun, params: nil)}}, vc: self, sourceView: webView)}

swift调用JS同理！

增加加载进度条

进度条使用第三方库NJKWebViewProgress

pod 'NJKWebViewProgress'

在WKWebView上面预留2个高度显示进度条，使用ReactiveCocoa监听WKWebView的进度：

        self.webView?.reactive.signal(forKeyPath: "estimatedProgress").observeValues({ [weak self](result) inguard let self = self else {return}if let progress = result as? NSNumber {self.progressView?.setProgress(progress.floatValue, animated: true)if progress.floatValue >= 1.0 {self.progressWrapViewHeightConst.constant = 0}}})

其他地方涉及到进度的地方再优化下：

     // MARK: - WKNavigationDelegate// MARK: 页面开始加载时调用func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {self.progressWrapViewHeightConst.constant = self.progressHeight}// MARK: 内容开始返回时调用func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {}func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {self.progressWrapViewHeightConst.constant = 0}func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {self.progressWrapViewHeightConst.constant = 0}func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {self.progressWrapViewHeightConst.constant = 0}

支持JS中alert、confirm、prompt

在JS端调用alert、confirm、prompt这几个方法，实际上会回调到WKWebView的WKUIDelegate代理中，对应的方法为：

    @available(iOS 8.0, *)optional func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void)@available(iOS 8.0, *)optional func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void)@available(iOS 8.0, *)optional func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void)

需要实现具体方法才能有效果：

 // MARK: - WKUIDelegatefunc webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {showAlert(title: "温馨提示", message: message, modelArray: nil, cancelTitle: "确定", cancelHandle: {completionHandler()}, vc: self, sourceView: webView)}func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {var modelArray: [AlertModel] = [AlertModel]()let model = AlertModel(title: "确定") {completionHandler(true)}modelArray.append(model)showAlert(title: "温馨提示", message: message, modelArray: modelArray, cancelTitle: "取消", cancelHandle: {completionHandler(false)}, vc: self, sourceView: webView)}func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {let alertController = UIAlertController(title: prompt, message: defaultText, preferredStyle: UIAlertController.Style.alert)alertController.addTextField { (txtField) intxtField.text = defaultText}alertController.addAction(UIAlertAction(title: "确定", style: UIAlertAction.Style.default, handler: { (alertAction) inlet txt = alertController.textFields?[0].textcompletionHandler(txt)}))self.present(alertController, animated: true) {}}

项目源码： https://codechina.csdn.net/ios1/projectcommon

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！

读者有什么想看的相关技术篇章，欢迎评论留言！

QQ交流群:908058499