当前位置：网站首页>The interactive solution of JS and app in the H5 page embedded in app (parameters can be transferred and callbacks can be made)

The interactive solution of JS and app in the H5 page embedded in app (parameters can be transferred and callbacks can be made)

2022-07-04 04:22:00 【Careteen】

Preface

During the rapid iteration of the project ,APP Embedded in H5 Page is already a very common practice .

There will be APP and JS Interactive scenarios , for example JS evoke APP And carry parameters ...

Interactive mode

Method 1 ：app End interception and h5 End agreed specific url

//  Without reference 
window.location.href = 'https://xxx.focus.cn/backtoapp'
//  Banded ginseng 
window.location.href = 'https://xxx.focus.cn/backtoapp?data=xxx'

The problem is ：

Some of the solutions are to avoid url Defects in length , stay iOS The use of Ajax How to send the same domain request , And put the parameters in head or body in . such , Although I evaded url The hidden danger of length , however WKWebView I don't support this way .
Why choose iframe.src No choice locaiton.href ？ Because if you pass location.href Continuous call Native, It's easy to lose some calls .
Modify continuously for many times window.location.href Value , stay Native The layer can only receive the last request , All previous requests will be ignored .
Only solved js Call the native problem . As for the result of the call and the callback of some pages after the call , Through this interception url There is no way to do it .

Method 2 ： Use WebViewJavascriptBridge

Essentially , It's through webview Agent intercepts scheme, Then inject the corresponding JS.

Method 3 ： Use `webkit MessageHandler`

The principle is the same as WebViewJavascriptBridge

This library

This library mainly uses WebViewJavascriptBridge and webkit MessageHandler encapsulate .

Use `WebViewJavascriptBridge` and `webkit MessageHandler`

APP End

H5 End

principle ： H5 page <--> Native App Execution is called Native The code returns the call result （H5 Page execution is called JavaScript Code and return the call result ）

encapsulation bridge.js.

index.html Use in ：

<button id="btn"> Simulate call login with parameters and callback </button>

index.js Use in ：

require('/path/to/bridge.js');
//  You need to agree the method name, parameters and callback of mutual calls with the client students in advance , Functions needed for the package 
HFWVBridge.wrapNativeFn(['login']);
document.getElementById('btn').onclick = function() {
    // Android End if used  messageHandlers  The way ,HFWVBridge  that will do ;
    //  If not, use  WebViewJavascriptBridge , Then use  window.WebViewJavascriptBridge.callHandler
    if (isFocusAppIOS()) {
        HFWVBridge.runNative('login', {
            name: ' Sohu netizens '
        }, function() {
            alert(' Welcome to Sohu ');
        })
    } else {
        /**
         *
         * @desc  Mode one ： Send a message to app
         * @param {Any}  Message sent 
         * @param {Function}  Send a message to app Callback after , And can get app Returned data 
         */
        var data = {id: 1, content: " This is a picture  <img src=\"a.png\"/> test\r\nhahaha"};
        window.WebViewJavascriptBridge.send(
            data
            , function(responseData) {
                document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
            }
        );

        /**
         *
         * @desc  Mode two ： call app Methods 
         * @param {String}  The call method name agreed with the client in advance 
         * @param {Object}  call app The transmission of the method 
         * @param {Function}  call app Method callback , And can get app Returned data 
         */
        window.WebViewJavascriptBridge.callHandler(
            'submitFromWeb'
            , {'param': ' Chinese test '}
            , function(responseData) {
                document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
            }
        );
    }    
};
HFWVBridge.add('hideBtn',function(){
    document.getElementById('btn').style.display = 'none';
});

Advantages and disadvantages

advantage

The mobile terminal no longer needs to intercept jump links , Hard coding is reduced .
Support bidirectional callback , Support asynchronous callback .
High safety .

shortcoming

JS、IOS、Android There are many initializations of three terminal code , It's a little bit more complicated . Need a big boss , Problems can be repaired in time .