Problems encountered when using H5 page in App

According to the requirements, we need to make several H5 pages, and then use them nested in the App. We have written static pages before, and have not encountered any problems, but now we need to interact with the App a little, and then know that we can interact with the App through jsBridge. See other blogs about the use of jsBridge.

jsBridge

<! -- Paste code directly -->// jsBridge registers listening events
	// This code is fixed and must be placed in js
	function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }

        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)}// Call up the js method natively
    setupWebViewJavascriptBridge(function(bridge) {
        // Register the native callup method
        // Parameter 1: buttonjs registers the flag for native use, to be consistent with the native
        // Parameter 2: data is the data that is passed to js natively
        // Parameter 3: responseCallback (responseCallback)
        bridge.registerHandler("buttonjs".function(data,responseCallback){
    
            document.getElementById("show").innerHTML = "buuton js" + data;
            responseCallback("button js callback");
        });
    })
    
    When calling the method of App, I encountered a problem,ios can get it normally, but Android can not,android shows that it has been called, but I did not get it, I later asked a colleague to solve the problem, that is, add try catch below)
    setupWebViewJavascriptBridge(function(bridge) {
        // Later added code to solve js to get Android data
        try { Android has init init init init init init init init init init init init init init init init init init init
            bridge.init(function (message, responseCallback) {
                console.log('JS got a message', message);
                var data = {'Javascript Responds': 'Test Chinese! '};
                console.log('JS responding with', data);
                responseCallback(data);
            });
        } catch (e) {
        
        }
        
        
        var data = "good hello"
        // Parameter 1: pay registers the flag for native use and must be consistent with native use
        // Parameter 2: is the parameter passed to the native when the native is called
        // Parameter 3: the data returned by the native call callback
        bridge.callHandler('getBlogNameFromObjC',data,function(resp){
                document.getElementById("show").innerHTML = "resp:"+ resp; }); })Copy the code

Android and IOS use WebViewJavascriptBridge to interact with each other

Whether wechat is open

// Check whether wechat is openfunction is_weixin(){
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false; }}Copy the code

Search on your phone’s keyboard

Remember to put input in form

<form action="javascript:;" id="searchFrom" onsubmit="search()">
	<div class="seabor clearfix">
		<! Input is of type search-->
		<input class="zsearch fl" type="search" value="" placeholder="Please enter what to search for." />
	</div>
</form>
Copy the code

function search(){
	// Perform a search
	alert('Clicked search on my phone's keyboard.')}Copy the code

Open App in H5 page

// Start with window.location.href ='myapp://? params=... '; Var frame = document.createElement() var frame = document.createElement('iframe');
frame.src = 'myapp://? params=... ';
frame.style.display = 'none';
document.body.appendChild(frame);

setTimeout(function() { document.body.removeChild(frame); }, 10000);
Copy the code