1. 云图网首页
  2. 技术专区

iOS/Android原生App与js优雅交互

• 技术专区


无论Android还是iOS，Webview都具有与js交互的能力，这使得我们可以利用混合开发(原生+h5)满足相对复杂的业务需求。但是由于Android和iOS系统的差异，原生App在与js交互时，js需要判断不同的系统从而调用不同的代码，从而使js代码的维护成本更高。

 

原生与js交互的传统做法

  • android一般这样为js提供接口：

webview.addJavascriptInterface(new JsInteraction(), "Android");

public class JsInteraction {
    @JavascriptInterface
        public void action(String param) {
            //TODO
        }
}

 

 

  • ios一般这样为js提供接口

webView!.configuration.userContentController.add(self, name: "action")
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name.caseInsensitiveCompare("action") == .orderedSame {
            guard let param = message.body as? String else {
                return
            }
            //TODO
        }
    }
}

 

  • 而js一般是这样调用的

if (isiOS) { // ios
    window.webkit.messageHandlers.action.postMessage('xxxxx')
}else{
    //android
    Android.action('xxxxx')
}

 

如果只是简单的交互，使用这种方法简单快捷。如果接口过多，或者存在参数回调的情形，则这种方式对各端都不太友好。客户端还封装处理回调相关的代码，前端则需要大量的判断系统的代码。这个时候我们就可以使用帮我们封装好的第三方库的方式来解决。

 

使用第三方库让原生App与js优雅交互

接下来我来介绍一下怎么使用第三方库的，让js与原生app互相调用，且支持参数回调，且js代码统一，总之让原生App与js的交互更加优雅。

 

在ios中我们使用WebViewJavascriptBridge，在android中我们使用jsbridge。

 

下面我们来看一下各端的代码具体都是怎么写：

 

  • iOS代码配置

  1. ios引入WebViewJavascriptBridge

在podfile中加入以下代码，并执行’pod install’：

pod 'WebViewJavascriptBridge'

     2.ios webview配置

class BaseWebView: WKWebView {
    var bridge: WKWebViewJavascriptBridge?
    
    override init(frame: CGRect, configuration: WKWebViewConfiguration) {
        super.init(frame: frame, configuration: configuration)
    }
    
    init(frame: CGRect) {
        let configuration = WKWebViewConfiguration()
        configuration.allowsInlineMediaPlayback = true
        configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
        super.init(frame: frame, configuration: configuration)
        bridge = WKWebViewJavascriptBridge(for: self)
        addFunc()
        getHtmlPageUrl()        
    }

    func addFunc() {
        //注册供js调用的方法（获取客户端版本号）
        bridge!.registerHandler("getVersion", handler: {[weak self] data, responseCallback in
            guard let this = self else {
                return
            }
            responseCallback?("1.0.0")
        })
    }

    //调用js的getPageUrl方法，获取url
    func getHtmlPageUrl() {
        bridge!.callHandler("getPageUrl", data: nil) { response in
            print("getPageUrl:/(response ?? "")")
        }
    }
}


class H5ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        addWebView()
    }
    
    func addWebView() {
        webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
        webView!.bridge!.setWebViewDelegate(self)
        
        let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
        let url = URL(fileURLWithPath: path!)
        webView!.load(URLRequest(url: url))
        view.addSubview(webView!)
    }
}

 

在ios代码中，需要初始化bridge，bridge为

WKWebViewJavascriptBridge类型。

为js提供方法用bridge.registerHandler()进行注册，调用js方法用bridge.callHandler()进行调用。

 

 

  • Android 代码配置

    1.Android 引入jsbridge

gradle中添加

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

 

        2.Andriod webview配置

class BaseWebView: WKWebView {
    var bridge: WKWebViewJavascriptBridge?
    
    override init(frame: CGRect, configuration: WKWebViewConfiguration) {
        super.init(frame: frame, configuration: configuration)
    }
    
    init(frame: CGRect) {
        let configuration = WKWebViewConfiguration()
        configuration.allowsInlineMediaPlayback = true
        configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
        super.init(frame: frame, configuration: configuration)
        bridge = WKWebViewJavascriptBridge(for: self)
        addFunc()
        getHtmlPageUrl()        
    }

    func addFunc() {
        //注册供js调用的方法（获取客户端版本号）
        bridge!.registerHandler("getVersion", handler: {[weak self] data, responseCallback in
            guard let this = self else {
                return
            }
            responseCallback?("1.0.0")
        })
    }

    //调用js的getPageUrl方法，获取url
    func getHtmlPageUrl() {
        bridge!.callHandler("getPageUrl", data: nil) { response in
            print("getPageUrl:/(response ?? "")")
        }
    }
}


class H5ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        addWebView()
    }
    
    func addWebView() {
        webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
        webView!.bridge!.setWebViewDelegate(self)
        
        let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
        let url = URL(fileURLWithPath: path!)
        webView!.load(URLRequest(url: url))
        view.addSubview(webView!)
    }
}

 

Android的写法基本与ios一样，与ios不同的是不需要初始化bridge（需要前端初始化）。

为js提供方法用webview.registerHandler()进行注册，调用js方法用webview.callHandler()进行调用。

 

  • js代码写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vconsole.min.js"></script>
    <script> var vConsole = new VConsole(); </script>
    <title>Document</title>
</head>
<body>
<div id="content">内容</div>
<button id="btn1">获取版本号</button>
<script>

        function setupWebViewJavascriptBridge(callback) {

            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }

            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }

        setupWebViewJavascriptBridge(function(bridge){
            let uagent = window.navigator.userAgent
            let isAndroid = uagent.indexOf('Android') > -1 || uagent.indexOf('Adr') > -1

            if (isAndroid) {
                //android需要初始化bridge
                bridge.init(function(message, responseCallback) {
                    var data = {
                        'Javascript Responds': 'Wee!'
                    };
                    responseCallback(data);
                });
            }
             
            //注册可供原生调用的方法（获取页面同url）
            bridge.registerHandler("getPageUrl", function (data, responseCallback) {
                console.log("call过来了 getPageUrl")
                responseCallback(document.location.toString())
            })
            //点击按钮，获取app版本号
            document.getElementById('btn1').onclick = function(e) {
                console.log(bridge)
                bridge.callHandler('getVersion', null, function(response) {
                    document.getElementById('content').innerHTML = "版本号：" + response
                })
            }
        });

    </script>
</body>
</html>

 

在Android系统中，js需要初始化bridge。而在ios中，bridge则由客户端初始化后传入。

js调用客户端方法统一用bridge.callHandler(‘方法名’,’参数’,function(response){})

js为客户端提供方法则统一用bridge.registerHandler(‘方法名’,function (data, responseCallback) {})

 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/280690.html

赞 (0)
0
上一篇 2022年8月15日
下一篇 2022年8月15日

相关推荐

发表回复

登录后才能评论