需求是在移动端app中跳转至H5页面,需要调用该app的刷脸接口。只是使用过,故在此留下笔记。

使用JSBridge的方式调用

以下代码是在jsp文件中。

1. 建立jsbridge链接

    var JSBridge = {
        isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1,
        isiOS: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        //这是必须要写的,用来创建一些设置
        setupWebViewJavascriptBridge(callback) {
            //Android使用
            if (this.isAndroid) {
                if (window.WebViewJavascriptBridge) {
                    callback(window.WebViewJavascriptBridge);
                } else {
                    document.addEventListener('WebViewJavascriptBridgeReady',function() {
                            callback(window.WebViewJavascriptBridge);
                    },false);
                }
                console.log('tag', '安卓');
                sessionStorage.phoneType = 'android';
            }

            //iOS使用
            if (this.isiOS) {
                if (window.WebViewJavascriptBridge) {
                    return callback(window.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);
                console.log('tag', 'ios');
                sessionStorage.phoneType = 'ios';
            }
        },

        //注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
        init(){
            var that = this;
            this.setupWebViewJavascriptBridge(function(bridge) {
                if (that.isAndroid) {
                    //初始化
                    bridge.init(function(message, responseCallback) {
                        var data = {
                            'Javascript Responds': 'Wee!'
                        };
                        responseCallback(data);
                    });
                }
            });
        },

        // js调APP方法 (参数分别为:app提供的方法名  传给app的数据  回调)
        callHandler(name, data, callback) {
            this.init();    //初始化
            this.setupWebViewJavascriptBridge(function(bridge) {
                bridge.callHandler(name, data, callback);
            });
        },
        // APP调js方法 (参数分别为:js提供的方法名  回调)
        registerHandler(name, callback) {
            setupWebViewJavascriptBridge(function(bridge) {
                bridge.registerHandler(name, function(data, responseCallback) {
                    callback(data, responseCallback);
                });
            });
        }
    }

2. 使用jsbridge正式调用

	JSBridge.callHandler('getAuthCode',{
	    state: 'STATE',
	    scope: that.scope,
	    client_id: that.client_id,
	})

直接使用对象调用

以下代码是在vue文件中。

1. 暴露供app调用的回调方法faceVerifyResult

	window.faceVerifyResult = function (result){
       if(JSON.parse(result).status == 'success'){
            if (_this.$route.query.apiType && _this.$route.query.apiType == '3') {
                 _this.doRequest_V2();
            } else {
                _this.doRequest();
            }
      	}
 	}

2. 调用app原生方法

		  let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
		  let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		  //安卓调用
          if(this.$common.isAndroid){
            android.FaceVerify();
          }
          //苹果调用
          if(this.$common.isiOS){
            // this.$common.callHandler('FaceVerify');
            window.webkit.messageHandlers.FaceVerify.postMessage(null);
          }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐