使用jsBridge实现H5页面和APP端交互(andriod和ios通用)

1、通过jsBridge获取App端的token,H5定义的函数名必须和APP端对应

window.function () {
// 获取请求token
    window.getToken=function(token){
        // document.getElementById("show").innerText = token  通过dom元素可以把获取的token渲染到页面上,看是否取到
        requestList(token) //js需要用到token的函数名
    }

// 初始化事件监听(固定代码)
    function setWebViewJavascriptBridge(callback) {
        //andriod
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    // 第一次连接,注册回调函数
    setWebViewJavascriptBridge(function(bridge) { 
        bridge.init(function(message, responseCallback) {
            console.log('JS got a message', message);
            var data = {
                'Javascript Responds': '测试中文!'
            };
            console.log('JS responding with', data);
            responseCallback(data);
        });
        // 接收native发来的消息,指定处理者,返回给native结果
        bridge.registerHandler("functionInJs", function(data, responseCallback) {        
            document.getElementById("show").innerHTML = ("data from Java: = " + data);
            var responseData = "Javascript Says  我要你的地址!";
            responseCallback(responseData);
        });
    });
}

2、通过点击某个按钮跳转到APP对应的页面,对应的href需要APP端定义好,h5只需要跳转到正确的路径即可。

     function requestList(token){
        window.location.href="bifex://torecharge";
      }

你可能感兴趣的:(APP和h5页面交互)