App中使用h5页面碰到的问题

根据需求,需要做几个h5页面,然后嵌套在App中使用,之前写过的静态页面,也没碰到过什么问题,但是现在需要和App有一点交互,然后知道通过jsBridge可以进行交互.看到其他博客中关于jsBridge的使用.

jsBridge

<!--直接贴代码-->
    // jsBridge 注册监听事件
	// 这段代码是固定的，必须要放到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)
    }
    
    
    //原生调起js方法
    setupWebViewJavascriptBridge(function(bridge) {
        //注册原生调起方法
        //参数1： buttonjs 注册flag 供原生使用，要和原生统一
        //参数2： data  是原生传给js 的数据
        //参数3： responseCallback 是js 的回调，可以通过该方法给原生传数据
        bridge.registerHandler("buttonjs",function(data,responseCallback){
    
            document.getElementById("show").innerHTML = "buuton js" + data;
            responseCallback("button js callback");
        });
    })
    
    //js 调用原生方法(在调用App的方法时,碰到一个问题,ios的可以正常获取,但android不行,android那里显示已经调用,但是我这并没有获取到,后来问一个同事才解决这个问题,即在下面加入try catch)
    setupWebViewJavascriptBridge(function(bridge) {
        //后来添加的代码,解决js获取android的数据
        try { //此处try catch注意  android 有init初始化方法，必须调用 不调用后续注册的事件将无效 而IOS却没有init方法 调用会报错 所以得捕获异常
            bridge.init(function (message, responseCallback) {
                console.log('JS got a message', message);
                var data = {'Javascript Responds': '测试中文!'};
                console.log('JS responding with', data);
                responseCallback(data);
            });
        } catch (e) {
        
        }
        
        
        var data = "good hello"
        //参数1： pay 注册flag 供原生使用，要和原生统一
        //参数2： 是调起原生时向原生传递的参数
        //参数3： 原生调用回调返回的数据
        bridge.callHandler('getBlogNameFromObjC',data,function(resp){
                document.getElementById("show").innerHTML = "resp:" + resp;
            }
         );
    })

参考的博客: Android 和 IOS 使用 WebViewJavascriptBridge 进行交互方法

是否是微信打开

// 是否是微信打开
function is_weixin(){
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}

使用手机键盘中的搜索

记得把input放在form中

<form action="javascript:;" id="searchFrom" onsubmit="search()">
	<div class="seabor clearfix">
		<!--input的类型是search-->
		<input class="zsearch fl" type="search" value="" placeholder="请输入要搜索的内容" />
	</div>
</form>

function search(){
	//进行搜索操作
	alert('点击了手机键盘上的搜索')
}

在h5页面中打开App

// 一开始通过href跳转
window.location.href = 'myapp://?params=...';
//发现当手机中没有这个App时浏览器默认会给一个弹窗
//所以换成下面的代码了
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);

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